Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.

How do you target Internet Explorer in your CSS? Do you use CSS hacks, conditional stylesheets or something else?

It’s the perfect trollbait. There have been plenty of discussions about this, and I don’t mean to start a new one. Everyone’s entitled to their own opinion, but the thing is that it’s not purely a philosophical matter. I am writing this article because I noticed there’s a lot of misunderstanding on the subject of CSS hacks.

People have been advocating three different approaches: conditional stylesheets, CSS hacks, or conditional classnames. All these techniques have their pros and cons. Let’s take a look.

In doing research for this post I discovered that DevCheatSheet.com has an awesome collection of 22 HTML5 Cheat Sheets. I didn’t want to needlessly repost what they already have so I cross-checked my collection with theirs and I’ve only shared below the ones you won’t find there.

What is it?

IE-CSS3 is a script to provide Internet Explorer support for some new styles available in the upcoming CSS3 standard.
How it works

If you're viewing this page in Internet Explorer, some of the elements have been rebuilt by the script in Vector Markup Language (VML), an IE-specific vector drawing language. VML supports things that are missing from IE's CSS implementation like rounded corners and blur effects.

As much as we don’t like to deal with the IE bugs, we still have to face it because your boss and visitors are still using Explorer. It gets frustrating when different versions of Explorer displays web pages differently due to the inconsistent rendering engine. We typically use IE conditional comments to fix the IE issues. But there are more ways than the conditional comments…

Whether you are an experienced Web programmer or just starting out, you know that there are many browsers currently in use and have probably had experience with the cross-compatibility issues. The frustration of building a beautifully functioning website using Firefox, then discovering it doesn’t render properly in IE6 is a definite learning experience. Testing your creations in as many browsers as possible is crucial to turning out a professional product.

There are a multitude of tools available to allow cross-browser testing with only one computer and your favorite browser. Many of them will let you do online testing of multiple versions of the most commonly used browsers and some will include applications you may never have heard about. A few require downloading and installation on your machine.

This script adds near-native PNG support with alpha opacity to IE 5.5 and 6. Now you can have full translucency and no more ugly grey borders! Full CSS background positioning and repeat are supporting (including CSS sprites). It requires only one line in your CSS file, and no changes to your website HTML. <IMG> tags and background images are both supported.