Add CSS 3D Transform Test for Modernizr
Update: I wrote a better and more general solution for all css value support tests.You can read about it here..
Recently I found out that IE10 support CSS transform-style BUT it doesn't recognize preserve-3d value .
So i decided to check this with Modernizr, but i realized that modernizr doesn't have such test and doesnt support css properties value test.
So my solution was to add such test :
tests['preserve3d'] = function () {
var element = document.createElement('link'),
body = document.getElementsByTagName('HEAD')[0],
propertys = {
'webkitTransformStyle':'-webkit-transform-style',
'MozTransformStyle':'-moz-transform-style',
'msTransformStyle':'-ms-transform-style',
'transformStyle':'transform-style'
};
body.insertBefore(element, null);
for (var i in propertys) {
if (element.style[i] !== undefined) {
element.style[i] = "preserve-3d";
}
}
//ie7,ie8 doesnt support getComputedStyle
//so this is the implementation
if(!window.getComputedStyle) {
window.getComputedStyle = function(el, pseudo) {
this.el = el;
this.getPropertyValue = function(prop) {
var re = /(\-([a-z]){1})/g;
if (prop == 'float') prop = 'styleFloat';
if (re.test(prop)) {
prop = prop.replace(re, function () {
return arguments[2].toUpperCase();
});
}
return el.currentStyle[prop] ? el.currentStyle[prop] : null;
};
return this;
};
}
var st = window.getComputedStyle(element, null),
transform = st.getPropertyValue("-webkit-transform-style") ||
st.getPropertyValue("-moz-transform-style") ||
st.getPropertyValue("-ms-transform-style") ||
st.getPropertyValue("transform-style");
if(transform!=='preserve-3d'){
element.parentNode.removeChild(element);
return false;
}
element.parentNode.removeChild(element);
return true;
};
Written by Alexander Kneller
Related protips
4 Responses
Very cool tip Alex!
Thank you for this. It helped me a lot!
I have a slight problem with implementing this feature. How exactly do i add it to my modernizr.js ? I've tried to just copy the function somewhere (of course outside other functions) in my modernizr. I've also tried to just add at the top of one of my custom .js-files. Either way it returns undefined, when i check for Modernizr.addValueTest('transformStyle','preserve3d'); - or any other css value for that matter. What am i doing wrong?
In this protip I just put this function inside Modernizer library near all other tests and used class that Modernizer generate for all test on html tag. And in case of addValue test you need to add implementation after Modernizer object exist and call it with Modernizr.addValueTest('transform-style','preserve-3d');
Also if you want to see live example go to this link http://mag.walla.co.il/ open in sources commmon.js and look for preserve3d also you will see same class name on html tag.