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!
Have a fresh tip? Share with Coderwall community!
JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.
Security insights from Cside