I recently decided to redesign my site and the main CSS3 effect I want to use works great in Webkit browsers but not so much in Firefox, at least not yet. I know you’re thinking, wait, what about Opera or IE? Well, over 80% of my visitors are Chrome or Firefox users, so I figure I’ll make sure it works in there first and I’m pretty sure it will work in IE10 whenever that’s released. And I’ll get around to Opera, I swear!
el.style.webkitTransform = ‘translateZ(-400px)’;
The Firefox version does not. You’d think it would be this:
el.style.mozTransform = ‘translateZ(-400px)’;
But it’s not. That won’t work, you have to capitalize the m:
el.style.MozTransform = ‘translateZ(-400px)’;
I’m still going to redesign my site because even though the 3D effect will only work in Chrome, at least right now, I’ll still get a fade in and out effect in the other browsers. The main traffic going to my site is web designers and developers and since over 40% of them use Chrome, a decent amount of visitors will site the site the way I intend them to. I’m sure Firefox will add the missing functionality sooner than later, so I’m not too worried about them missing out.
Cutting edge effects are pretty sweet, but you better have the patience to deal with the differences between browsers. Nothing can be more frustrating than when something isn’t working because the browsers use different syntax.