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:
- Less HTTP requests (calling 1 stylesheet rather than 2 or 3)
- 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.