IE10 preserve-3d

Question

With IE10 not working directly with preserve-3d, я терпеть неудачу при добавлении теста, чтобы вернуться к этому.

Я видел, что был запрос на перенос, связанный с этим недавно интегрированным в Modernizr, однако .preserve3d также ничего не делает (построен из репо). https://github.com/Modernizr/Modernizr/commit/4c8f8905e0f6487c85c91f4bd67d51b62b40b993

• Проверка на предмет специфики IE10 кажется очень плохим. Могу ли я избежать этого?
• Применение идеи MS о перемещении трансформации к детям вызывает интересные результаты. Я полагаю, что это не ответ на то, что я пытаюсь сделать?
• Это должно работать на IE8,9,11 (?), Chrome, Firefox, Safari

То, что я надеюсь сделать ...

Modernizr.addTest('csstransformspreserve3d', function() { 
    var prop = Modernizr.prefixed('transformStyle'); 
    var val = 'preserve-3d'; 
    var computedStyle; 
    if(!prop) return false; 

    prop = prop.replace(/([A-Z])/g, function(str,m1){ return '-' + m1.toLowerCase(); }).replace(/^ms-/,'-ms-'); 

    Modernizr.testStyles('#modernizr{' + prop + ':' + val + ';}', function (el, rule) { 
     computedStyle = win.getComputedStyle ? getComputedStyle(el, null).getPropertyValue(prop) : ''; 
    }); 

    return (computedStyle === val); 
}); 

http://jsfiddle.net/LwaMY/1/

Answer 1

Я написал больше общее решение для случая, когда вам нужно проверить css значение поддержка.

Пример использования: Modernizr.addValueTest('transform-style','preserve-3d');

Демонстрация на codepen.

Реализация:

Modernizr.addValueTest = function(property,value){ 
    Modernizr.addTest(property+value , function() { 
     var element = document.createElement('link'); 
     var body = document.getElementsByTagName('HEAD')[0]; 
     var properties = []; 

     var upcaseProp = property.charAt(0).toUpperCase() + property.slice(1); 
     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; 
    }); 
}