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!