Stylesheet order for Responsive site.

[eelucid8]

Hi there.
I just watched a Lynda tutorial that said I should use my desktop.css style as a fallback for browsers that can't read media queries. For this reason, my links look like this:

<link href="css/desktop.css" type="text/css" rel="stylesheet"/>
<link href="css/tablet.css" type="text/css" media="screen and (min-width:481px) and (max-width: 768px)" rel="stylesheet"/>
<link href="css/mobile.css" type="text/css" media="screen and (max-width: 480px)" rel="stylesheet"/>

But as I check the page on an iPhone emulator, I can see that it's quickly loading the background specified from desktop.css (and probably everything else) before it hits the media query and runs mobile.css. Should I just put the desktop.css after the media queries? If I do that, it will override the whole tablet and mobile design, won't it?

What is best practice for how to handle this? Thanks very much in advance. This is my first responsive site for a client. Regards,
Bill

 

[Edge]

Hmm, I'm not sure what's in those stylesheets but using the design for mobile first principle this is how I would do it:

I would first create a core stylesheet which is loaded by all devices and which contains enough styles for the usual 1 column layout on a mobile and which doesn't use media queries. Then, now using media queries, create a second style sheet which adds in any more styles necessary for narrow layouts (and above) such as an iPad in portrait mode or smaller tablets. Then create a third style sheet which adds in more styles necessary for a 'normal' layout and above (you're targetting iPad landscape and desktop browsers with the old 1024px width resolution). Then finally a fourth stylesheet for widescreens with a few more styles in it.

So you have a core css stylesheet which mobiles use (and everything else) and add in styles for larger screens progressively. Typically the stylesheet for widescreen will have very few rules in it. First stylesheet that needs loading is obviously your core styleheet, so the order you have things above is the reverse of what it should be.

Mobile first has the advantage of being lightweight for mobiles and only serving up the minimum necessary.

There are plenty of fallback techniques for browsers which don't support media queries (e.g. IE8 and below).

 

[chrishirst]

What is best practice for how to handle this?

Styles 'cascade' from top to bottom, so the last applied rule is the the one that takes precedence, unless a !important directive specifies that an earlier rule set should not be overridden.

 

[Frank]

What is best practice for how to handle this?

The most webmaster friendly, with also the best results, is to simply have javascript determine which style sheet should be loaded. Like this:

<script type="text/javascript">
var scrW = screen.width
var styleSheet
if      (scrW <= 480) styleSheet = 'mobile';
else if ((scrW >= 481) && (scrW <= 768)) styleSheet = 'tablet';
else if (scrW > 768) styleSheet = 'desktop';
document.write ('<link href="css/'+styleSheet+'.css" type="text/css" rel="stylesheet" />')
</script>
<noscript><link href="css/desktop.css" type="text/css" rel="stylesheet" /></noscript>

Less than 1.5% of the surfers has javascript disabled, and that includes crawlers and other systems that are not designed to render pages.

However, I am a severely confused. Must 768 be regarded as the width of tablets (iPads)? If so, why? If folks turn the gizmos a quarter turn, don't they have a much wider screen (1024)? And don't most people surf that way because there are hardly sites narrower than 1024 anymore?

Regardless of the answer to that question: does javascript regard 768 to be the width, rather than 1024 (I assumed it does, for the script)?

 

[Phreaddee]

I use one stylesheet

/* Generic Styles */
then
/* Mobile Styles */
then
/* Tablet Styles */
then
/* Desktop Styles */
then
/* Super massive Styles */ (occasionally, depending on the design and client needs)

and a fallback sheet for those pesky ie critters.