Lea made many valid points in her presentation but as is for supports.property case, you never want to go too deep into a single point of your talk so ... here I come.
getCSSPropertyName Function
This function aim is to understand if the current browser supports a generic CSS property. If property is supported, the whole name included prefix will be returned.
var getCSSPropertyName = (function () {
var
prefixes = ["", "-webkit-", "-moz-", "-ms-", "-o-", "-khtml-"],
dummy = document.createElement("_"),
style = dummy.style,
cache = {},
length = prefixes.length,
i = 0,
pre
;
function testThat(name) {
for (i = 0; i < length; ++i) {
pre = prefixes[i] + name;
if (
pre in style || (
(style.cssText = pre + ":inherit") &&
style.getPropertyValue(pre)
)
) return pre;
}
return null;
}
return function getCSSPropertyName(name) {
return cache.hasOwnProperty(name) ?
cache[name] :
cache[name] = testThat(name)
;
};
}());
The function returns a string or null, if no property has been found.
// enable HW acceleration
var cssPropertyName = getCSSPropertyName("transform");
if (cssPropertyName != null) {
node.style.cssText += cssPropertyName + ":translate3d(0,0,0);";
}
Please feel free to test this function and let me know if something went wrong, thanks ;-)
5 comments:
To prevent looping everytime in testThat you can cache vendor prefix when this function find some property.
loop has length 6 and I did not think about it but that's a valid point, thanks!
thinking about it, some property may have -khtml- prefix while some other could have -webkit- one.
Since we generally use a subset of all CSS properties I would say the caching is enough and a loop of 6 prefixes cannot hurt much, considering the function is less "false positive prone" in that way and also simpler to understand. Only thing I should test is getPropertyValue in non W3C browsers since I believe IE7 will fail in that point.
How relevant is the -khtml prefix anymore?
I don't have numbers but it does not hurt much there so some edge case may be covered hopefully without problems.
Post a Comment