• Cross Browser

Cross Browser Animations Problem And Solution – Vendor Prefixes!

Hi everyone,

For the last couple of weeks I’ve been really messing around with CSS3 animations. Unfortunately I found it really frustrating to write an animation for both Firefox and Chrome (I’m not even checking on IE). The problem is that each browser uses its own (and different from each other) prefixes for the same things which is really really annoying. I found myself copying pasting the same code and only changing one word in it (webkit to moz and vice versa). I’ll give you some examples:

-moz-animation-name and -webkit-animation-name

For more examples you can check out a really nice list i found here: http://peter.sh/experiments/vendor-prefixed-css-property-overview/.

I will not get into a discussion about why vendor prefixes are just completely stupid but I will say that I was thinking about making a javascript to read all the CSS codes on a website and according to the rendering engine it will choose the prefix and will automatically fix the prefixes to the correct ones. This will save people a lot of pain when making animations to work cross browsers. You will only need to create one animation and the script will fix it for the different browsers.

Follow me on twitter or come back here to get updates on this.

Update #1

I’ve came up with the following code:


$(document).ready(function() {
$.get(document.styleSheets[0].href, function(data){
handleData(data);
});
function handleData(data) {
if ($.browser.webkit) {
var replaceit = data.replace(/moz/g,'webkit');
} else {
var replaceit = data.replace(/webkit/g,'moz');
}
var cssAnimation = document.createElement('style');
cssAnimation.type = 'text/css';
var rules = document.createTextNode(replaceit);
cssAnimation.appendChild(rules);
document.getElementsByTagName("head")[0].appendChild(cssAnimation);
}
});

This code will check if the browser is webkit or mozilla and will create a new stylesheet accordingly. I’ve tested this with my own sample code and it works pretty good.. I’ve created some animations only for Mozilla and they worked on Chrome :)

This is only a first version and need some more work but its a good start. One of the thins i don’t like about this is the fact that I have to make a request to fetch the CSS files. I’ve found out that when accessing the stylesheet from the DOM Chrome ignore the tags with the -moz prefix so its impossible to read them without requesting the file.

I will be happy to hear comments and improvements… I will put this on a public git soon.

kod.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>