Doing Conditional Comments for your Internet Explorer css fixes better, with HTML top tag classes

Now browser sniffing is basically a bad thing but there is still a need to fix / hack issues on older browsers, in particular Internet Explorer. Okay, almost entirely in Internet Explorer. IE6 may be -mostly- dead, but IE8 will be around for a long time given that there is no IE9 for WinXP. (See Detecting a Mobile Browser on the Server in your Rails app for one reason server side agent sniffing and how to do so.)

The “traditional way” to correct IE issues is using a conditional css style sheet (in the head section ) to load an additional style sheet after the default styles specific to that browser version and take advantage of the cascading part of Cascading Style Sheets (CSS) like so:

The conditional comments tag is a proprietary IE tag, introduced in IE5, and only works in IE, and “are thus excellently suited to give special instructions meant only for IE”. (IE10 will not support this tag, because it will render perfect HTML5. No ,really.)

I have become aware of a slightly different way to do this via the new hotness of doing feature sniffing ( or Object Detection ) via Modernizer. Modernizer’s trick of loading (or over loading 🙂 ) classes on the tag can be used not only be used for its JavaScript-driven feature detection for html5, but also for creating a top-level class that apply styling to that an individual page or type of page. For a more general description see Why use Classes or IDs on the HTML element?

So technique of “Classes on the HTML tag” was demonstrated by Paul Irish’s back in 2008 (lots of good updates and info there) and a a variation of it is used in Html5 Boilerplate :

This will allow you to make your corrections close to the original place in your css (or sass) files, general reduce the number of files to maintain and load, and as a bonus it appears to fix problems where the IE conditionals around css files for IE6 can slow down your page load time in IE8!

Note that when this technique was first used, the classes were added on the body tag not the html tag, but best practice suggests the body tag for more dynamic classes (after the page is loaded), although (for example) WordPress does use classes specific to the page being loaded on the body tag.

Extra bonus : If you are using HAML and Rails/Padrino, then Toronto’s Gianni Chiappetta (aka gf3) created a Conditional HTML tag with HAM helper (now working at his new site, with new urls 🙁 ) which can also be found in his github repo:


def conditional_html( lang = "en", &block )
haml_concat Haml::Util::html_safe <




HTML
haml_concat capture( &block ) < < Haml::Util::html_safe( "\n" ) if block_given?
end


To see the usage for this in HAML go to Gianni Conditional HTML tag with HAM helper.