May 20, 2011

A Guide to CSS Hacks for Internet Explorer


Internet Explorer. That’s all you really need to say to raise a web designer’s blood pressure. And yes, we know IE is improving, but there are still plenty of users stuck on IE 8 and IE 7 (even IE 6) and you can’t just leave those browsers out in the cold.
The first method that came along to deal with IE’s rendering quirks were various CSS hacks — slip an underscore in here, add an asterisk there and you can target specific versions of IE in your stylesheets.
CSS hacks work well enough, but they’re a pain to maintain. Using conditional comments to load IE-only stylesheets is another option, but now you have extra HTTP requests and two stylesheets to maintain. You could also use conditional comments to add CSS classes to the  or  tags of your pages, but that increases the size of your pages in every browser.
The truth is there’s no perfect way to handle IE. Each method has its advantages and disadvantages and the right answer will vary from project to project.
We can’t tell you how to handle IE, but we can tell you that developer Mathias Bynens has put together a very well written and thorough rundown of all the different ways you can handle Internet Explorer’s rendering quirks — conditional stylesheets, conditional classnames and good old CSS hacks. Bynens also has a fourth option: combining conditional classnames with “safe” CSS hacks.
Bynens defines “safe” CSS hacks as hacks that “work in specific versions of a given web browser” and are “unlikely to be parsed by all other browsers, including future versions.”
Regardless of how you choose to deal with Internet Explorer, the reality is you will have to deal with it. Bynens’ post makes a great primer on the various options available and is well worth adding to your bookmarks.

No comments:

Post a Comment