Last Updated: February 25, 2016
·
4.029K
· ruddog

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

4 Responses
Add your response

Very cool tip Alex!

over 1 year ago ·

Thank you for this. It helped me a lot!

over 1 year ago ·

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?

over 1 year ago ·

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.

over 1 year ago ·