Search code examples
javascriptcssstylesheet

Assign all vendor-prefixed variants to style

Modernizr provides a testAllProps() method which conveniently tests all the vendor prefixed styles of the one given to see if the style is supported by the currently running browser.

However I have no come to a point where I need to actually assign these properties from javascript because of various reasons that boil down to it being too cumbersome to conditionally link CSS files.

So for instance I could build an array and a routine which assigns each vendor specific style to the style of my target element: 

['mozTransitionDuration', 'webkitTransitionDuration', 'oTransitionDuration', 'msTransitionDuration', 'transitionDuration'].map(function(s){ element.style.s = "style_setting"; });

Well, this will probably generate a bunch of errors because I will try to assign "style_setting" to 4 or 5 undefined values.

Does anybody know anything to make this a bit less painful?

Solution

  • Probably best to use an existing library that knows all about this stuff:

    Prefix Free will let you assign styles from CSS without vendor-prefixing. There is also a jQuery Plugin for it that will allow you to do the same from JavaScript.