Modernizr css VALUE test.
There is no issue to check for css property support, but what to do if you need to check for css value?
Example: transform-style:preserve-3d value that not supported in IE10, although property transform-style is.
Another example: display:table for IE7.
So for now this is my solution for this problem:
Modernizr.addValueTest('property','value');
Modernizr.addValueTest('transform-style','preserve-3d');
And here is implementation:
Modernizr.addValueTest = function(property,value){
var testName= (property+value).replace(/-/g,'');
Modernizr.addTest(testName , function () {
var element = document.createElement('link');
var body = document.getElementsByTagName('HEAD')[0];
var properties = [];
var upcaseProp = property.replace(/(^|-)([a-z])/g, function(a, b, c){ return c.toUpperCase(); });
properties[property] = property;
properties['Webkit'+upcaseProp] ='-webkit-'+property;
properties['Moz'+upcaseProp] ='-moz-'+property;
properties['ms'+upcaseProp] ='-ms-'+property;
body.insertBefore(element, null);
for (var i in properties) {
if (element.style[i] !== undefined) {
element.style[i] = value;
}
}
//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),
currentValue = st.getPropertyValue("-webkit-"+property) ||
st.getPropertyValue("-moz-"+property) ||
st.getPropertyValue("-ms-"+property) ||
st.getPropertyValue(property);
if(currentValue!== value){
element.parentNode.removeChild(element);
return false;
}
element.parentNode.removeChild(element);
return true;
});
}
PS. Comments and feedback appreciated.
Written by Alexander Kneller
Related protips
3 Responses
You have an error in this line:
var upcaseProp = property.charAt(0).toUpperCase() + property.slice(1);
It transforms transform-style to Transform-style, but it should be TransformStyle.
It should be:
var upcaseProp = property.replace(/(^|-)([a-z])/g, function(a, b, c){
return c.toUpperCase();
});
Thanks, I updated post with your fix.
Also I find out that may be its not good idea to implement window.getComputedStyle because some libraries (like jquery.animate-enhanced) rely on that IE7 ,IE8 doesnt have it. So in my project I changed it to local function.
This was awesome! And exactly what i needed. Thanks!