Thread: CSS3 and Internet Explorer Best Practices

What is the best way of handling the incompatibility issues between CSS3 and Internet Explorer? I know there are free scripts available but they usually come with a list of conditions in order to work effectively.

(Sometimes it's best not to use the CSS feature at all, as too few browsers support it, or it's too unstable. A good example right now would be flexbox.)

There are several approaches you can use. Which is best? It will depend on the circumstances.

Start at the top of this list: the earlier approaches are simpler and less "hacky". Move down the list if you feel you need to.

Approach 1: do nothing

This is often the best approach. A good example would be rounded corners: does it really matter if IE8 gets square corners?

Sometimes this isn't acceptable, because your site depends heavily on a CSS3 feature, and will be broken in older browsers (e.g. if you used flexbox for layout).


Approach 2: use fallbacks

Occasionally you can specify a fallback style. For example: you can set a solid colour, and then override this with an RGBA colour. Newer browsers will use the RGBA value, and older browsers will get the solid colour.

This is explained here in the CSS Lint wiki.


Approach 3: detect a lack of browser support, and provide alternative styles

You can use javascript to determine whether a CSS3 feature is supported. You can then create alternative styles. For example, if drop shadows are not supported, you might want to add a border instead.

Modernizr is a popular javascript library that can do this for you.

This method is called feature detection, because it tests for the support of a feature, rather than checking for a particular browser. You can also use browser detection, particularly via conditional comments. Feature detection is generally preferred nowadays, but there are arguments for browser detection in some circumstances.


Approach 4: use polyfills to "force" browser support

There are various tricks for simulating CSS3 features in older browsers. Most of them use javascript. These are called polyfills. CSS3 PIE is a popular polyfill library for Internet Explorer.

Polyfills let you get the feature you want, but at the price of increased complexity (your styles now depend on javascript code). Sometimes they don't work exactly the same as the original CSS feature. Some polyfills are "lightweight" (a small amount of simple code), and some are "heavy" (lots of code, very complicated).

Polyfills make your code harder to maintain and have a performance penalty. Depending on the polyfill, these problems can range from trivial to severe.

Sometimes you can use proprietary CSS instead. For example, you can use Microsoft's CSS filters. A popular example used to be AlphaImageLoader. CSS filters are often very bad for performance, however.

I usually do nothing. My designs look 10/10 in Firefox / Chrome. 9/10 in IE9. IE9 usually only misses some text-shadow. In IE8 its 10. IE8 doesn't support box shadow or border radius so things get a bit square. Then down to IE7 its like 7/10.

The site always looks good in all browsers but you can see the design become simpler in older browsers which do not support newer features.

The other option is to start chopping things into images. I don't like doing this. I feel it makes page loading slightly slower because of the extra requests. I also find when I need to do a small tweak I need to make a file or ask a designer to update a graphic. Its more time consuming than tweaking some CSS.

A bigger issue is HTML5. I use html5shiv - HTML5 IE enabling script - Google Project Hosting to be able to use HTML5 elements. I then use Flash fall backs for things like audio and video. I then use jQuery to replicate functionality like HTML5 validation which is lost in IE.

The other option is to start chopping things into images. I don't like doing this. I feel it makes page loading slightly slower because of the extra requests. I also find when I need to do a small tweak I need to make a file or ask a designer to update a graphic. Its more time consuming than tweaking some CSS.

Agreed.

At this point in time, anyone using images for basic CSS3 effects needs their head examined.