How To Create Stylesheet only for IE

Sometimes it is better to create alternate css files for different browsers (esp. IE), than using hacks. It is important in big projects, when client requires the site to be fully cross-browser. The basic technique to attach an IE-Only stylesheet is using the HEAD section conditions:

CSS FILE LOADED FOR BROWSERS OTHER THAN Internet Explorer:

<![if !IE]>
<link rel=“stylesheet” type=“text/css” href=“NOT-IE.css” />
<![endif]>


 IE 6 ONLY CSS FILE:
<!??[if IE 6]>
<link rel=”stylesheet” type=”text/css” href=”IE-6-SPECIFIC.css” />
<![endif]??>

IE 5 ONLY:

<!??[if IE 5]>

<link rel=”stylesheet” type=”text/css” href=”IE-5-SPECIFIC.css” />
<![endif]??>

IE 5.5 ONLY:

<!??[if IE 5.5000]>

<link rel=”stylesheet” type=”text/css” href=”IE-55-SPECIFIC.css” />
<![endif]??>

VERSION OF IE VERSION 6 OR LOWER: (I find this one pretty handy)

<!??[if lt IE 7]>

<link rel=“stylesheet” type=“text/css” href=“IE-6-OR-LOWER-SPECIFIC.css” />
<![endif]??>

IE 7 ONLY:

<!??[if IE 7]>
<link rel=“stylesheet” type=”text/css” href=“ie7.css” />
<![endif]??>

The biggest advantage of using this methos is that it passess W3C validation and you don’t have a mess of different hacks in your css code.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: