Conditional Stylesheets Revisited
If you’re writing CSS in 2012, there’s a good chance that you’ve tried pre-processing through SASS or LESS. Nicolas Gallagher recently described a SASS technique for mobile first development that allows you to easily deliver large screen styles to outdated browsers. After experimenting with the technique, I’ve found some ways to push it even further.
Pre-processing to the Rescue
Nicolas’ technique uses SASS imports to create a media query-laden style sheet for capable browsers and an IE-specific style sheet that delivers the same styles in a conditional comment.
It feels sort of odd to use an IE style sheet in a world of conditional classes, but if we’re going to we might as well make the most of it. Even if you aren’t much of a pre-processor, you’ve likely realized that modularizing your CSS in this way doesn’t have to stop with media queries. Since we’re already creating an IE-specific style sheet, we might as well import our IE-specific styles (written with the aforementioned conditional classes) into that file and leave them out of the other, like so:
@import "480.scss"; @import "768.scss"; @import "992.scss"; @import "ie.scss";
Easy as that, your main styles are free of
.oldie. Feels good, right?
The same thing is possible with the SASS importing method. It’s easiest if you’re using Modernizr, which has both html5shiv and a conditional loader called yepnope built in. Using yepnope, we can ensure that the legacy style sheet only loads when html5shiv is in use:
<!--[if (lt IE 9) & (!IEMobile)]> <script>yepnope('/css/legacy.css')</script> <![endif]-->
You can toss a script like Selectivizr in at the same time, if you’re so inclined.
Be Not Afraid
Although I’ve been talking about SASS here, this style of modular CSS isn’t dependent on it. It works with LESS, with a build script a la HTML5 Boilerplate, and if you’re really masochistic you could do it by hand with copy and paste. (Don’t do that.)
If your design is fully responsive and is built on a fluid grid, IE users will still enjoy an experience that meets them halfway.
My only concern is that the technique is IE specific. In the last week, multiple people have visited this site using Firefox 3. That’s pretty strange, but it’s worth noting that there are still people using legacy browsers other than IE. As always, take a look at your statistics before you do anything rash.