CSS“混合混合模式”的测试答案

【问题标题】：Testing of CSS "mix-blend-mode"CSS“混合混合模式”的测试
【发布时间】：2026-01-11 04:15:02
【问题描述】：

我想使用 CSS 的属性：

mix-blend-mode: soft-light;

我将通过 Modernizr 测试后备 bla bla...

已测试：

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

我错过了什么？

在 Firefox 上测试，CSS 可以工作，但是如何用 Modernizr 进行测试？

【问题讨论】：

请告诉为什么-1和题外话？

标签： javascript css modernizr blending

【解决方案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

【讨论】：

不错！要获取 html 元素，您可以使用 document.documentElement
对于那些遇到同样问题的人，有一个新的 Chromium 错误，当应用任何混合混合模式（普通或屏幕除外）时会导致元素被隐藏：bugs.chromium.org/p/chromium/issues/detail?id=961581
CSS.supports() API 在任何版本的 IE 中都不受支持，并且最近才在 Edge 中得到支持。相反，您可以使用if (typeof window.getComputedStyle(document.body).mixBlendMode === 'undefined') { /* not supported */ }

【解决方案2】：

Modernizr 目前不支持此功能。来自Modernizr/issues/1388：

不幸的是，“[...] 在某些浏览器中，实现了 mix-blend-mode；属性有效，自动化测试通过，但实际上没有发生混合”-http://blogs.adobe.com/webplatform/2013/09/12/browser-support-matrix-for-css-blending/

【讨论】：

@l2aelba 不是真的。你可以创建一个类似于background-blend-mode 的测试，但你仍然不能确定浏览器是否真的做了什么。
window.CSS.supports('mix-blend-mode','soft-light'); ?
@l2aelba 如果我理解正确，该测试将在某些实际上不支持它的浏览器上返回true。如果你对一些误报没问题，你可以使用它。