Tag Info

New answers tagged

1

I'd be inclined to say this. For production, always keep them in one file; the reason being that it's more efficient for the browser, and that should be your primary interest (IMO) when moving from development to production. Development's a different kettle of fish. I tend to split Media queries up so that they're by whatever element, eg: .foo { // .. ...


1

You should split your CSS files based on media queries because CSS files are render blocking. When the browser is constructing your DOM, it has to first wait and load all your CSS files. You will reduce your page load time if some of your CSS files are only loaded based on certain media queries. This also goes for adding async to a JavaScript script tag; ...


3

Its probably best to have only one CSS file, but to minify and gzip it. Assuming your 30KB are before doing that, you will probably get the file size down to about 5KB with minification (white space removal) and gzipping. Splitting up will probably get you some more speedup, but only under some conditions. You'd have to make sure that only one stylesheet ...


1

Simple: use 1 stylesheet and just add comments to them to make it easier to find and change the CSS styles e.g.: //sheet 1 (mobile device 800 px) code //sheet 2 (mobile device 768 px) code //sheet 3 (mobile device 480 px) code //sheet 4 (desktop size 1024 px) code If you want you could use multiple stylesheets and call them for each specific size.


-1

I would rather look at Bootstrap. It is 1 CSS file that contains all the CSS. It works on almost 99% of browsers and is extremely responsive. Click on the live demo an zoom in (Ctrl + = zoom in, Ctrl - = zoom out, Ctrl 0 = normal) or open it on your mobile to see how it renders.


4

It slightly depends on what you want to achieve: are you trying to make your page load faster or are you trying to make developing easier? If you target on the latter, than you could use multiple sheets, but thats all a matter of preference. I find it the easiest to use one big file since this gives you an overview of all the styles you've declared. If you ...


10

I think it really depends on what you find easiest for development and what helps you keep a tidy stylesheet. The only real downside I can think of in splitting would be that should an element's attribute appear in all your stylesheets, you would have to update 5 separate files to change it (rather than it appearing side-by-side in one place). According ...


0

My own tests on noscript using firebug's net tab don't actually load any image contained within the noscript tags unless javascript is off. Likewise, the first poster here has no such problems and points to the w3 specification saying that such tags will be treated as text when js is on. ...


1

You can work around this problem by being more specific on your media queries. Landscape and Portrait is unreliable and often not specific enough as you know and causes problems. To overcome this problem your code should be more specific and sadly this means writing more code. Sadly it's easily to write a website on width alone than it is both or just ...


0

I detect mobile browsing using server-side PHP and serve CSS, images and ui pattern for the device in landscape & portrait...


2

Using multiple H1 tags is valid in HTML 5, as long as each is inside a <section> element (except for the first H1 on the page which does not need a specific wrapper). For SEO, Google has confirmed that multiple H1 tags are fine. However, you ought to take another look at your responsive layout, as requiring an H1 in two different places seems strange ...


2

On the pc web site add meta tag that links to the mobile version like: <link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" > On the mobile version add meta tag that links to the normal version: <link rel="canonical" href="http://www.example.com/page-1" > See ...


0

In case you have two different CSS files, you can display required one in landscape or portrait mode using css media queries. You can also hide Elements not required in one orientation. eg: For Landscape CSS, create css-landscape.css and use this media query: @media screen and (orientation:landscape) { ... } similarly for Portrait, create another CSS and ...


3

If a block of content is hidden with CSS, the browser still needs to download the HTML inside that element. All browsers except Opera download the images, too. (In fact, since Opera has switched to Webkit it likely downloads hidden images now.) One of the best ways to reduce load in mobile browsers is to use background images in CSS (e.g. sprites) where ...


0

Optimising for mobile is almost the same as desktop as you easily aiming to serve as little as possible in the least possible size. Because of mobiles lower screen resolutions desktop resolution images are not required and you can look at adaptive images which means it'll serve a different resolution image depending what device you are on. This can be done ...



Top 50 recent answers are included