Last Updated: February 26, 2016
·
3.626K
· Alex Kneller

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.

3 Responses
Add your response

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();
});

over 1 year ago ·

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.

over 1 year ago ·

This was awesome! And exactly what i needed. Thanks!

over 1 year ago ·

Have a fresh tip? Share with Coderwall community!

Post
Post a tip