How did the IE Conditional Classes Get on the HTML Element in HTML5 Boilerplate?

Posted on by Rob Larsen

Since it comes up from time to time on Github (See #1288 and #1187) and I was involved in part of the discussion I thought I’d try to clarify the timeline and reasoning for the placement of the IE conditional comments in the HTML5 Boilerplate project (and anywhere else that uses the HTML element for the conditional classes.)

For those of you unfamiliar with the pattern, it looks like this:

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->

These different versions of the <html> element are displayed in IE6, IE7, IE8 and modern browsers allowing you to target Internet Explorer conditionally based on a CSS class at the very top of the cascade.

Anyway, for such a small block of code it actually generates a lot of discussion in the repo and is the subject of at least one, long-standing issue.

Also, removing them is an open issue right now.

Anyway, since I was involved in some of the original discussion and still actively watch activity on the HTML5 Boilerplate repo and participate where it makes sense; I often find myself chiming in on issues discussing the conditional comments with a series of links trying to illustrate the long and tortuous journey they took to get to the state they’re currently in.

While those links contain all the information needed to follow the thread, it’s not all that easy to put the trail together without having lived through it.

To that end, here’s how the comments ended up where they are- presented in chronological order with just the most important details.

  1. On October 20 2008, Paul Irish kicked the whole thing off with the post “Conditional stylesheets vs CSS hacks? Answer: Neither!. In it’s original form the conditional comments wrapped the <body> element
  2. I ended up learning about the technique in December of 2009 when I interviewed at Molecular (where Paul worked at the time) and Nick Cooley mentioned it during the interview. “Cool” I thought. Since I didn’t actually read the post and just had the technique described to me, I ended up implementing it in a way that made sense to me during the redesign of my (other) site (which is once again on the block to be redesigned.) I placed the comments around the <html> element. I was already using the <body> element for classes, so I probably never even considered using the <body> element for that purpose.
    That version of the site launched March 1, 2010.
  3. On May 20, 2010 Markus Leptien posted IE 6 slowing down IE 8. In which he details the curious case of IE8 blocking downloads because of the presence of an IE6 specific conditional comment.
  4. Stoyan Stefanov took up the cause on May 23, 2010 with his post http://www.phpied.com/conditional-comments-block-downloads/ where he outlines the even curiouser case of IE blocking downloads even if the conditional comment isn’t for a CSS resource. This spelled trouble for the conditional comments on the body element.
  5. On May 24th, 2010 Markus Leptien posted a solution to the issue which required an empty conditional comment high up in the DOM.
  6. Paul added the empty conditional fix to HTML5 Boilerplate on June 3, 2010
  7. For whatever reason, I got hooked into the discussion and pointed out that “My variation of Paul’s pattern works out of the box. Instead of applying classes to the body, I apply them to the HTML element. No need for empty comments” The same day Paul updated his blog post with that news and the pattern settled on the HTML element
  8. On September 9, 2010 Divya Manian moved the comments to the HTML element in the HTML5 Boilerplate repo.

And that’s the origin story. It’s not exactly as exciting as how Bruce Wayne went from being a rich kid seeing the Mask of Zorro to being Gotham’s Dark Knight Detective, but at least now people be confused by how the placement came to be.

6 thoughts on “How did the IE Conditional Classes Get on the HTML Element in HTML5 Boilerplate?”

  1. Thanks Rob, I’ve always wondered how they got there and just needed the right time to investigate them fully … your timeline is greatly appreciated!

  4. Thanks for this nice sources list. I myself first started using conditional classes with Boilerplate. But never inquired how all these bright brains came up with such cray idea? Now I have some references.

  5. Pingback: How to target old versions of Internet Explorer in our CSS in 2013 | Front / Back

  6. When we try to put this patch into our code then suddenly our angular code stops working in IE8…..

    Will you suggest why this happen?

Leave a Reply

Your email address will not be published. Required fields are marked *