IE10保存-3d

Question

With IE10 not working directly with preserve-3d，我在添加测试以挫败这一点时失败了。

我已经看到有一个拉动请求与最近集成到Modernizr有关，但是.preserve3d似乎也什么也没做（从repo构建）。 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;
    });
}