A better way to deal with Internet Explorer conditional styles

May 2011

For a few years now I’ve been using one or two conditional stylesheets to help with cross browser support, or in other words ‘to help fix Internet Explorer’. But recently I’ve been trying out Paul Irish’s technique.

HTML5 Boilerplate

If you haven’t already go over to HTML5 Boilerplate and take a look at the notes. In particular look through the code for each file.

HTML5 Boilerplate is a bare bones framework for any web project, with all the best practice resets, styles, htaccess settings etc. in place.

I’ve been using bits and pieces of the HTML5 boilerplate for a while now and one of the things I like in particular is how it deals with conditional styles for Internet Explorer.

IE conditional stylesheets

Most of the sites I work on usually include something like this:

<!--[if lt IE 7]>
<link rel="stylesheet" href="ie.css" /> 
<![endif]-->

This was to fix anything that looked out of place in IE6, usually fixes for pngs, floats, widths, positioning etc.

In some cases the site might have 2 or 3 of these conditional stylesheets for IE7 and IE8 fixes also.

Adding conditional classes to the html tag

Recently I’ve started using something like this instead:

<!--[if lt IE 7]><html class="ie6" lang="en-GB"><![endif]-->
<!--[if IE 7]><html class="ie7" lang="en-GB"><![endif]-->
<!--[if IE 8]><html class="ie8" lang="en-GB"><![endif]-->
<!--[if gt IE 8]><!--><html lang="en-GB"><!--<![endif]-->

This adds classes to the HTML tag in the different versions of IE, enabling you to target them with different CSS rules.

If the user isn’t using Internet Explorer then it only recognises the html lang=”en-GB” tag.

So you can do stuff like this in your core stylesheet:

fieldset legend{background-color:#f6f6f6;}
.ie6 fieldset{position:relative;}
.ie6 fieldset legend{position: absolute;top: -.5em;left: .2em;}

This works better for a couple of reasons:

  1. Less HTTP requests (calling 1 stylesheet rather than 2 or 3)
  2. It keeps your CSS rule in one place

What do you think, nice technique?

Further reading

Receive more design content like this to your inbox

I promise not to spam you. No more than one email per week.

I blog and share links about web design, user experience, product development, HTML/CSS, email design and anything else I find interesting.

No thanks