测试CSS“混合混合模式”

Question

我想使用CSS的属性：

mix-blend-mode: soft-light;

我将通过Modernizr进行后备测试...

经过测试：

Modernizr.mixblendmode //undefined
Modernizr.testProp('mixblendmode'); //false
Modernizr.addTest('mixblendmode'); // no-mixblendmode

我错过了什么？

测试了Firefox，CSS的工作，但如何用Modernizr进行测试？

Answer 1

得到它了 ：

Modernizr.addTest('mix-blend-mode', function(){
    return Modernizr.testProp('mixBlendMode');
});

（或没有Modernizr）

if('CSS' in window && 'supports' in window.CSS) {

    var support = window.CSS.supports('mix-blend-mode','multiply');

    /* Add class like Modernizr */
    /* -- jQuery -- */
    $('html').addClass(support?'mix-blend-mode':'no-mix-blend-mode'); // jQuery
    /* -- Pure JS -- */
    document.getElementsByTagName('html')[0].className += support ? ' mix-blend-mode' : ' no-mix-blend-mode';
    /* -- Pure JS (IE9+) -- */
    document.querySelector('html').classList.add(support ? 'mix-blend-mode' : 'no-mix-blend-mode');
}

（或CSS）

@supports(mix-blend-mode:multiply) {

}

参考 ： https ： //dev.opera.com/articles/getting-to-know-css-blend-modes/

我可以使用 ： http ： //caniuse.com/#feat=css-mixblendmode

Answer 2

Modernizr目前不支持这一点。 来自Modernizr / issues / 1388 ：

不幸的是，“[...]在某些浏览器中，混合混合模式已实现;属性有效，自动化测试通过，但实际上没有进行混合” - http://blogs.adobe.com/webplatform/ 2013/09/12 /浏览器的支持矩阵换CSS-共混/