[OpenLayers-Dev] Util methods for vendor prefixes

[Gregers Gram Rygg]

Hey,

Just want to inform about a new Util module that might be useful to some of you.

A lot of new browser features have vendor-prefixes. Sounds simple to
use, but from my experience they are a total mess. There are 3
variants: js, dom-style and css. Internet Explorer is different than
the others (shock), and to make the confusion complete, webkit allows
several variants of the dom-style properties.

To fix this I made a new module that can detect the presence of
features and return the prefixed property for the browser in use.

These features are prefixed for a reason, and the spec might change.
So be careful which features you use ;)

Some examples:
// js prefix
var requestAnimationFrame = OpenLayers.Util.vendorPrefix.js(window,
"requestAnimationFrame");
// => "webkitRequestAnimationFrame"
window[requestAnimationFrame](...);

// style prefix
var transform = OpenLayers.Util.vendorPrefix.style("transform");
// => "WebkitTransform"
if (transform) {
    div.style[transform] = "scale(2)";
} else {
    // fallback ?
    div.style.width = "200%";
    div.style.height = "200%";
}

// css prefix
var cssTransform = OpenLayers.Util.vendorPrefix.css("transform");
// => "-webkit-transform"
var transition = OpenLayers.Util.vendorPrefix.style("transition");
// => "WebkitTransition"
div.style[transition] = cssTransform + " 2s ease-in";

A bit more info here: https://github.com/openlayers/openlayers/pull/546

Cheers,
Gregers