Using Different CSS Stylesheets For Different Browsers

Sep 1st, 2008
Maruf scribbled this post.

I’ve been crunching through a lot of CSS this week, and on occasion I’ve had to overcome the classic CSS battle between Firefox and I.E. It’s no secret that Internet Explorer and Firefox tend to disagree on certain elements in which they render CSS properties. So while everything may line up perfectly using one browser, it can look ill-aligned in another. That’s when developers tend to rely on CSS browser hacks.

In general, you should try to avoid using CSS browser hacks and/or loading different stylesheets for specific browsers as fluently as possible, because it’s not good practice. In fact, most good CSS developers should be able to avoid CSS browser hacks/alternative CSS loading. However, on rare occasions, it’s required to achieve a perfect result.

CSS for specific browsers

IE-Only stylesheet

1
2
3

<!--[if IE]>
	<link rel="stylesheet" type="text/css" href="ie-only.css" />
<![endif]-->

NON-IE stylesheet

1
2
3

<![if !IE]>
       <link rel="stylesheet" type="text/css" href="not-ie.css" />
<![endif]>

IE 7 only

1
2
3

<!--[if IE 7]>
	<link href="IE-7-SPECIFIC.css" rel="stylesheet" type="text/css">
<![endif]-->

IE 6 only

1
2
3

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="IE-6-SPECIFIC.css" />
<![endif]-->

IE 5 only

1
2
3

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

IE 5.5 only

1
2
3

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

IE 6 or lower

1
2
3

<!--[if lt IE 7]>
	<link rel="stylesheet" type="text/css" href="IE-6-OR-LOWER-SPECIFIC.css" />
<![endif]-->

Internal CSS Browser hacks

It’s not often that you’ll ever need to create an entirely separate stylesheet for a specific browser. Because as mentioned, in general, most competent CSS developers can create picture-perfect CSS without loading alternative stylesheets.

However, I must admit, I some times require 1 or 2 hacks to get things looking perfect. So, creating an entirely seperate stylesheet to fix 1 or 2 properties seems pointless to me. There are ways of creating “browser hacks” inside one stylesheet. While this method isn’t desirable, I find it useful and often more convenient if I’m only having one or two browser discrepancies.

IE-7 only

1
2
3

*+html #div {
    height: 100px;
}

None IE-7 only

1
2
3

#div {
   _height: 100px;
}

Hide from IE 6 and lower

1
2
3

html > body #div {
      height: 100px;
}

IE 6 and lower

1
2
3

* html #div {
      height: 100px;
}

Does anyone else use any other CSS browser hacks?