openlayers/openlayers — pull request #546 by gregersrygg (2012-06-25 12:17:34+00:00)
Title: Vendor prefix detection

There are three kinds of vendor prefixes:
* CSS: -webkit-transform
* DOM style: WebkitTransform
* JS: webkitRequestAnimationFrame

Most are used to the CSS variants, but those are not standardized from JavaScript. Webkit allows you to use the CSS variant, but the other browsers don't. The DOM style object, used to change inline styling of an element uses upper-case on the first character in the prefix. While JavaScript properties/methods use lower case prefix.

I believe setting/testing every vendor prefix and standard property inline wherever it's needed is error prone. There are already two places in OpenLayers that use vendor-prefixes, and one of them fails in non-webkit browsers.

To fix the error, and prevent future errors like this, I created a set of methods to detect vendor prefixes of all 3 kinds. First I put the methods in Util.js, but Util.js is huge and shouldn't be required only for this. So I moved it to OpenLayers.Vendor instead. Hope that's ok. Also, I wasn't sure about using upper/lower case on Vendor, since it's not a "class". Other modules in OpenLayers are upper case, so I used the same naming convention.

Any feedback welcome :)

The API is pretty straight forward:
```js

// js prefix
var requestAnimationFrame = OpenLayers.Vendor.jsPrefix(window, "requestAnimationFrame");
// => "webkitRequestAnimationFrame"
window[requestAnimationFrame](...);

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

// css prefix
var cssTransform = OpenLayers.Vendor.cssPrefix("transform");
// => "-webkit-transform";
var transition = OpenLayers.Vendor.stylePrefix("transition");
div.style[transition] = cssTransform + " 2s ease-in";
```