CSS3: Now, or not yet?
By Bran van der Meer on October 11th, 2010.
After having seen several CSS3 related talks and presentations at Fronteers 2010, I wanted to know whether it's ready for use right now, or not yet due to lack of browser support.
Internet Explorer starts supporting a lot of the new elements at version 9, but since it's still beta or whatever I consider it not current. (Source.) IE does support quite a few CSS3-like features via their 'filter' property however, that's what makes the subject article-worthy.
Since IE still has about 50% of usage share, it is not an option to simply ignore it. However: the web offers some ugly hacks amazing solutions to help IE render what it would normally not.
I'm going to break the situation down to the new elements, since the support is different for all of them.
I'm testing IE6+, Firefox 3+, Chrome 4+, Safari 4+ and Opera 10+. These are the browsers I consider worth developing for at this moment (October 2010).
| IE | IE w/ hacks | Firefox | Chrome | Safari | Opera | |
| @font-face | Y | Y | Y | N | Y | Y |
| 2d transforms | N | Y | Y | Y | Y | N |
| 3d transforms | N | N | N | Y | Y | N |
| animations | N | N | N | Y | Y | N |
| border-image | N | N | Y | Y | Y | N |
| border-radius | N | Y | Y | Y | Y | N |
| box-shadow | N | Y | Y | Y | Y | N |
| columns | N | N | Y | Y | Y | N |
| flexbox | N | N | Y | Y | Y | N |
| gradients | N | Y | N | Y | Y | N |
| hsla | N | N | Y | Y | Y | Y |
| multiple backgrounds | N | Y | N | Y | Y | N |
| opacity | N | Y | Y | Y | Y | Y |
| reflections | N | N | N | Y | Y | N |
| rgba | N | Y | Y | Y | Y | Y |
| text-shadow | N | Y | Y | Y | Y | Y |
| transitions | N | N | N | Y | Y | N |
The hacks
For gradients, 2d transforms and rgba() see css3please.com
for code examples.
For border-radius and box-shadow see CSS3
PIE, or here.
For opacity you can take a peek at
Smashing Magazine,
this article also has another box-shadow solution.
For text-shadow there's
a jQuery plugin.
And if you are suicidal you can use the AlphaImageLoader for multiple backgrounds, with out-of-the-box severe limitations.
There's a border-image
jQuery plugin available but it's only
usable in IE6 with a image smaller then 100px, in IE7+ its kinda supported, and you need IE8 to run in IE7 mode to see something, so its a
red 'No' in the table above.
For transitions you can just use jQuery's animate or any of the available shortcuts.
Well then, which properties are usable?
I consider usable everything that has IE /w hacks, Firefox, Chrome and Safari on Yes in my table. This gives:
- 2d transforms
border-radiusbox-shadowopacityrgba()text-shadow
However, since Chrome forces automatic updates, I consider @font-face usable at this moment as well, since it's available in
the latest stable, which has already been pushed to everyone.