A tidier Internet Explorer stylesheet

31 January 2009, in CSS, HTML | 6 comments »

Until recently, I used to separate my IE only stylesheets as ie6.css and ie7.css (and sometimes even ie.css), but lately I’ve been thinking a lot about how inefficient and long winded this process really is. It has made me realize that I could just as easily use IE CSS filters to my advantage, and merge these separate .css files into a singular Internet Explorer specific CSS file, which would be much more efficient in the long run.

CSS Filters

There is a list of CSS filters you can use in your stylesheets, but be aware that most of them will make your files invalid, which is why it’s better to use them only within separate IE only stylesheets.

In my case, I use two different filters: one to target IE6 and another for IE7. When I want a rule to affect both, I use no filter, since the HTML conditional comment (see bellow) will target all IE versions from 7 and bellow.

IE6 and bellow

Add * html before the CSS rule you want to work on IE6 only (like, for example PNG filters).

* html { property:value; }

IE7

Both IE6 and IE7 can understand a property with an * before it, but IE6 will not interpret it if it’s preceded with html>body. For example:

html>body { *property:value; }

Conditional Comments

You should use these conditional comments within your HTML files to make sure that only one or more specific versions of IE can read a particular stylesheet. For example:

<!--[if IE]>
Internet Explorer
<![endif]-->

<!--[if IE 5]>
Internet Explorer 5
<![endif]-->

<!--[if IE 5.0]>
Internet Explorer 5.0
<![endif]-->

<!--[if IE 5.5]>
Internet Explorer 5.5
<![endif]-->

<!--[if IE 6]>
Internet Explorer 6

<![endif]-->

<!--[if IE 7]>
Internet Explorer 7
<![endif]-->

<!--[if gte IE 5]>
Internet Explorer 5 or greater
<![endif]-->

<!--[if lt IE 6]>
Internet Explorer versions less than 6
<![endif]-->

<!--[if lte IE 5.5]>
Internet Explorer version 5.5 or less
<![endif]-->

<!--[if gt IE 6]>
Internet Explorer greater than version 6
<![endif]-->

gt stands for greater than, while lt stands for less than. gte stands for greater than or equal, while lte stands for less than or equal to.

How I do it

As I mentioned previously, I tend to only use IE6 and 7 specific stylesheets on my websites. This means that If I were implementing a singular IE stylesheet with IE CSS filters, it would have to use a conditional comment that would allow me to target both these browsers.

Therefore, the most appropriate HTML comment for this kind of sheet would be <!--[if lte IE 7]>. This is acceptable because it targets all versions of IE equal to or below IE7, which is suitable for the most part as I’m not really worried of how the site will look like on any version below IE 6.

So, the final HTML code would look something like this:

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

Conclusion

Although, truthfully most web designers would like to ignore older versions of Internet Explorer, clients don’t like that idea, and most of the time it’s for a very good reason: there’s still a big percentage of users browsing the web with Internet Explorer, and IE6 in particular: to name but one.

So, as we have discussed, we can make everybody happy, and to have some peace of mind by creating a separate stylesheet and add a couple of properties that will make things a bit prettier for IE users.

If in the future, you don’t need these CSS files anymore (and let’s all hope for it!), you’ll simply have to remove the conditional comments and you’re all set: There’s no need to go through your main stylesheets, that you’ve created for proper browsers and as an extra plus everything will look a bunch cleaner to boot!

Resources

Further reading

There are 6 comments:

  1. Nils Holmström says:

    I’m all for separating special IE-stylesheets from the “real” stylesheet.
    I usually try to make the design work in all descent browsers whith validated, sensible markup and css and then just use ie.css, ie6.css, ie7.css etc and fill them with more or less ugly fixes… It keeps main css-files clean and offers a way to target even very small differnces by nudging stuff around with position: relative and negative margins, thus making the page looking ALMOST the same in all browsers…

    • Tarun Sharma says:

      In my opinion there is not need to separate style sheets for any specific browser or use hacks for that. Because we have limited case where we want to target any particular browser (IE6, IE7 etc.).

      We can apply CSS for IE6, IE7, etc. without any hacks and different CSS by using small tricks.

      for example:




      Now if you want to add a css for ie6 you can use
      .ie6 element { property: value;}

      for ie6 and ie7 use
      .ielt8 element { property: value;}

      it’s very faster then to use different style sheet and CSS hacks

      Last line is not valid according to w3c to resolve that i create a plugin for that, if anyone need then send me email id I’ll send you :)

      If you use plugin, you also not need to define all comment i mention in top and it will help you to define classes for ie, firefox, safari, opera and chrome separately

  2. Tarun says:

    Guys it’s simple just add csshelper.js in head of your HTML and it’s done!!

    Now you can use a single css with prefix like .ie, .ie6, .ie_gt7, .ie_lt8, iPhone etc.

    https://github.com/tarunsharma20/css-helper

Leave a comment: