Today I would like to show you how to use the CSS 3 property transform in a way that it runs in every browser including IE 6 and up.
Instead of inventing my own I'll use the old school clock example by Toby Pitman
which is described here
. Basically it's using the transform property in a
clever way to create a working clock. You can see the original demo here
The example was build with webkit and gecko browsers in mind. It will run just fine using Chrome, Safari or Firefox. Our goal today is
to get this working across all major browsers. This means we need to add support for Opera and IE. Let's get to work...
Opera, IE 9 and IE 10
This is actually the easy part. If we take a look at the code we can see that it only uses the -webkit and -moz prefix to set the transform
We can simply add the Opera, IE prefix and the unprefixed version to get these browsers supported.
And just like that the example runs in the most current version of all major browsers!
Tackeling older IE versions
Many of you will argue that there is no point in supporting older IE versions because no one uses them anymore. In many cases you will be
able to get away by dropping support for IE 6 and 7. But all Windows XP users are stuck using IE 8 and are unable to update there
browser to IE 9. And there are times when you need to support these older browsers, maybe because of cooperate restrictions or your client
still uses it to test your work :-(
Luckily Internet Explorer already supports some kind of transformation known as Matrix Filters
Yes you are right, native support for all kinds of transformations was already available back in IE 6. Now we could manually add the filters inside the
solved this problem? Yes Paul Bakaus
Paul Bakaus has written a script to emulate the CSS 3 transform property for older IE versions. You can download the script at github
And it's dead simple to use. Just include the script files in the page header and you are done. Transformie will do all the heavy lifting and
hard thinking for you.
Just like that the example works in old IE versions starting with IE 7!
Conclusion and Downloads
As you can see it was really easy to add browser support to this example. If you want you can add IE 6 support yourself. The example already
works correctly but IE 6 does not support transparent png files out of the box. Again you can fix this using filters.
You can try the updated clock here
or download the example