IE Only Stylesheets and CSS

Targeting IE with specific CSS, is always a awful task, however I thought I’d cover the two basic ways to do it: in HTML using conditional CSS and in stylesheets using hacks.

Conditional CSS

Conditional CSS lets you include a specific IE only stylesheet on your HTML page. It is the preferred way of having targeted IE specific CSS and is guaranteed to work with future version of IE, something that cannot be said for the hacks.

You can target:

  • A specific version <!--[if IE 6]>
  • All version below a specific version <!--[if lt IE 6]>
  • All versions above a specific version <!--[if gt 6]>
  • All version below or equal to a specific version <!--[if lte IE 6]>
  • All version above or equal to a specific version <!--[if gte IE 6]>

Let’s look at including a stylesheet only for IE6 in the <head> element.

  • Option A – Using the style block
    <!--[if IE 6]>
    <style>
    	/* Magical IE 6 CSS goes here */
    	background-color: red;
    </style>
    <![endif]-->
  • Option B – Including a Stylesheet
    <!--[if IE 6]>
    	<link href="ie6.css" rel="stylesheet" type="text/css"/>
    <![endif]-->
    

In Stylesheet Hacks

In Stylesheet hacks work within a CSS file. They let you target a specific block of styling, or a specific line in your file.

Line Hacks

Line hacks allow you to target versions of IE with a single link of CSS.

  • IE 8 only
    background-color: red\0/;
  • IE 8 and below
    background-color: red\9;
  • IE 7 and below
    *background-color: red;
  • IE 6 only
    _background-color: red;

Block Hacks

Block hacks let you use the element selectors to target versions of IE. Obviously this lets you target multiple lines all at once

  • IE-7 only
    *+html #div { 
    	background-color: red;
    }
  • IE 6 only

    * html #div { 
    	background-color: red;
    }