…or… <html>’s conditional classes
From what I’ve seen a good number of developers these days are split between conditional stylesheets and css hacks.
You’re used to seeing this:
1
2
3
|
|
But probably also plenty of this:
1
|
|
CSS hacks to target specific browsers stay where the rest of your styles are, but they certainly don’t validate. For sometime now, the standards community has rallied around conditional stylesheets as a solution to the validation problem.
There are a few problems with it though:
- Conditional stylesheets mean 1 or 2 additional HTTP requests to download
- As they are in the the <head>, the rendering of the page waits until they’re totally loaded.
- Also - Yahoo’s internal coding best practices do not recommend conditional stylesheets
- It can separate a single CSS rule into multiple files. I’ve spent a lot of time wondering “Where the eff is that rule coming from!?” when it turned out to be tucked away in a conditional stylesheet.
Here’s my proposed solution:
1
2
3
4
|
|
Using the same conditional comments, we’re just conditionally adding an extra class onto the html tag. This allows us to keep our browser-specific css in the same file:
1
2
|
|
Plus it totally validates and works in all browsers.
(Hat tip to Paul Hammond and Adam McIntyre for being s-m-r-t.)
1
2
3
4
5
6
|
|
Doug Avery of Viget points out he prefers to use this technique on the HTML tag, freeing the body tag for dynamic classes. That works just fine. I later changed all my sites to use it on HTML instead of body, actually… Also it combo’s really well with the Avoiding the FOUC v3.0 technique as well as Modernizr.
You fancy something different?
gtlater and we’re good. 2010.05.20: Turns out IE conditionals around css files for IE6 can slow down your page load time in IE8! Crazy, right? The solution here avoids that, as does forcing IE to edge rendering.
2010.06.08: And then… Rob Larsen points out that when these conditional classes are applied to the HTML element, it doesn’t block. No empty comment necessary. I think that’s a new winner.
2010.09.07: Update follows!
Throw it on the html tag
Here is the new recommendation, and the one that’s in use in theHTML5 Boilerplate.
1
2
3
4
5
|
|
Why?
- This fixes a file blocking issue discovered by Stoyan Stefanov and Markus Leptien.
- It avoids an empty comment that also fixes the above issue.
- CMSes like Wordpress and Drupal use the body class more heavily. This makes integrating there a touch simpler
- It doesn’t validate in html4 but is fine in html5. Deal with it.
- It plays nicely with a technique to kick off your page-specific javascript based on your markup.
- It uses the same element as Modernizr (and Dojo). That feels nice.
I left an empty class in there because you’ll probably be putting a no-js in there or something else. If not, delete. Also if the extra comments around that last tag look weird to you, blame Dreamweaver, which chokes on normal !IE conditional comments.
This solution tends to encourage developers to largely ignore IE during development, and just hack it into submission at the end. That’s actually the worst thing you can do when writing your CSS, because it will force you to use hacks or workarounds that aren’t necessary. Many hacks and workarounds can be avoided by just coding things to work in IE from the start. If you test IE early in development, you should do your best to use good, standards-compliant code that is optimized for performance and future maintenance. Style forking creates code that’s less optimized in both those areas. Although IE can often be difficult to work with, it is possible to get it to work in most circumstances using good code – it just takes some forethought.
It’s very smart.
In reply to his post I said..
When you are addressing IE’s inconsistencies, attempt to first fix them without singling out IE in particular. In many cases, this is a matter of adding awidthorheight.. or someoverflow:hidden. In general, being more explicit about how the element should appear helps IE6 and IE7 greatly.
Something to keep in mind. :)
2011.04.11: The HTML5 Boilerplate community dug into this and figured out a lot more details around the syntax. Hopefully I’ll get a chance to update this post with those learning, but until then.. click through!
2011.05.18: Updated the main snippet to match the syntax tricks we used in h5bp. See above link for more crazy details.
Conditional classes, ported
- In Thesis (php) sorta, uses UA sniffing. :/
- in Slim (rails) by helloluis
- in Jade (node) by kmiyashiro & monokrome
- in HAML (rails) by gf3
- thematic by scott nix
An earlier presentation of the idea that this page builds on, can be found at Big John’s classic IE hacking web site positioniseverything.net, in a guest article from February 2007 by Hiroki Chalfant entitled “#IEroot — Targeting IE Using Conditional Comments and Just One Stylesheet”.
.oldIE class for IE ≤8 (to use with safe css hacks), but that didn’t fly. Anyway, our current version..
1
2
3
4
|
|