Last Updated: February 26, 2016
· ruddog

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:



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 ([i] !== undefined) {
      [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) ||

        if(currentValue!== value){
            return false;
        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 ·