I generally have a “fuck you” attitude toward IE, but I have to support them now at my new job. Because I’ve worked so exclusively with mobile for the past few years, I’ve neglected really perfecting my conditional comments until now, but it seems like it’s a good idea to finally get a good handle on it.
The WYSIWYG text editor used by WordPress makes it a little tough to do this, but here is what I’ve settled on for now.
First, we put an empty CC on the very first line. It should go right before the DTD (I’m using the new “latest” HTML DTD supplied through the HML5 standard). This improves page load performance for IE by preventing that browser’s inherent tendency to block downloads. See Conditional comments block downloads for more info.
<!--[if IE]><![endif]--> <!doctype html>
Then we have a series of CCs for each of the browsers we want to target with HTML5 Boilerplate. In this case, there’s one for IE7 …
<!--[if IE 7]> <html class="ie7 oldie" lang="en"> <![endif]-->
… another for IE8 …
<!--[if IE 8]> <html class="ie8 oldie" lang="en"> <![endif]-->
… and also one for IE with a major version number greater than IE8.
<!--[if gt IE 8]> <html lang="en"> <![endif]-->
Lastly, we want to put in the standard html tag. The difference here is very subtle and it’s usually where I mess up. You kind of have to turn your brain inside out for this one – it’s kind of a double-negative. So, IE sees the opening CC, which tells it to ignore everything until it sees the closing CC. Standard browsers ignore the CC altogether because they themselves are contained within standard HTML comments.
<!--[if !IE]--> <html class="no-js" lang="en"> <!--[endif]-->
Make sure you look out for the extra dashes (hyphens) when you are using CCs that exclude IE; otherwise standardized browsers won’t seem either!
QuantumTom 