[OpenLayers-Dev] Util methods for vendor prefixes

Gregers Gram Rygg gregersrygg at gmail.com
Thu Jun 28 04:27:13 PDT 2012


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,
// => "webkitRequestAnimationFrame"

// 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


More information about the Dev mailing list