CSS3 and Internet Explorer Best Practices 20 Aug 2012 @ 20.08
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.
20 Aug 2012 @ 20.44
(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
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
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.
Last edited by Mike Hopley; 20 Aug 2012 at @ 22.18.
21 Aug 2012 @ 13.59
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.
21 Aug 2012 @ 14.11The 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.
At this point in time, anyone using images for basic CSS3 effects needs their head examined.