Last Updated: February 25, 2016

Best way to link stylesheets in the <head> for RWD

#pe1999

Things like this will continue to be debated as the community learns more and more, therefore, I do not mean to claim that this is the ONLY way to do it. What the title should say is "Best way to link stylesheets in the <head> for RWD, for now."

This is what we use for our projects now. The first declaration is our Mobile First basic container styles. Notice there are no media declarations on it, which implies media="all". Then, we use media="not print, braille, embossed, speech, tty" for our RWD styles (columns and floats).

The not clause is very useful here, but it does have one drawback. It negates the entire query, so while not ... and (min-width: 32em) would be preferred, it is not a valid declaration. This means that while we do not serve the more complicated layouts to print or assistive technologies that don't need them, we are allowing mobile devices to download a stylesheet that they may not use.

Without further ado, here is the current best practice that we use at Project Evolution:

<link rel="stylesheet" href="stylesheets/style.css" title="default">
<link rel="stylesheet" href="stylesheets/media-queries.css" media="not print, braille, embossed, speech, tty">

<!--[if (lte IE 8)&(!IEMobile)]>
<link rel="stylesheet" href="stylesheets/no-media-queries.css" media="screen">
<![endif]-->

The added benefit here is that we can also deliver all of our Old IE hacks or re-definitions via the no-media-queires.css, which keeps that code out of our nice future-friendly CSS for more current browsers.

Since we use SCSS and Compass, we set up our code in a very specific way that helps make the generation of these stylesheets make more sense. But that might be for another Pro Tip (done! <a href="/p/tddyma">Here it is</a>).

For those of you interested, here was the previous standard that we were using. It also works well, and has the benefit of not allowing the download of the large-screen.css to smaller devices that may not need it (though some browsers request it anyway). What it fails to do is exclude itself from being used by print and assistive technologies.

<link href="stylesheets/style.css" rel="stylesheet">
<link href="stylesheets/large-screen.css" media="(min-width: 32em)" rel="stylesheet">

<!--[if (lte IE 8)&(!IEMobile)]>
<link rel="stylesheet" href="stylesheets/large-screen.css" media="screen">
<![endif]-->

For the initial spark that brought me to this latest best practice, visit the source:

Ben Callahan at Sparkbox: <a href="http://seesparkbox.com/foundry/how_should_we_write_media_queries">How Should we write Media Queries?</a>

Written by J. Hogue

Say Thanks

Respond

1 Response

Add your response

twolfson

You also could do something similar to Modernizr which adds classes to the HTML tag.

http://modernizr.com/docs/#features-css

This allows for usage like

// If the page does not support media queries
<html class="no-media-queries">
// via js document.documentElement.className += 'no-media-queries'

// Hook in via CSS
.no-media-queries .my-object {
  // Normal styles for object
}

You can hook into that via something like Zakas' media query tool or Modernizr's variant.

http://www.nczonline.net/blog/2012/01/03/css-media-queries-in-javascript-part-1/

http://modernizr.com/docs/#mq

over 1 year ago ·