9

I want to use CSS's property :

mix-blend-mode: soft-light;

And I will test by Modernizr for fallback bla bla...

Tested :

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

What am I missing ?

Tested on Firefox, CSS its work, but how to test with Modernizr ?

user247702
  • 23,641
  • 15
  • 110
  • 157
l2aelba
  • 21,591
  • 22
  • 102
  • 138

2 Answers2

14

Got it :

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

(or without 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');
}

(or CSS)

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

}

Ref : https://dev.opera.com/articles/getting-to-know-css-blend-modes/

Can I use : http://caniuse.com/#feat=css-mixblendmode

l2aelba
  • 21,591
  • 22
  • 102
  • 138
  • Nice! To get the `html` element you could use `document.documentElement` – Drenai Jun 10 '19 at 06:55
  • For those who stuck with the same issue I did, there is a fresh Chromium bug that will cause elements to be hidden when any mix-blend-mode applied (except normal or screen): https://bugs.chromium.org/p/chromium/issues/detail?id=961581 – Valera Tumash Sep 13 '19 at 02:53
  • 1
    The `CSS.supports()` API is not supported in any version of IE and was only recently supported in Edge. Instead you can use `if (typeof window.getComputedStyle(document.body).mixBlendMode === 'undefined') { /* not supported */ }` – Gavin Dec 04 '19 at 13:11
4

Modernizr doesn't support this currently. From Modernizr/issues/1388:

Unfortunatly, "[...] in some browsers, mix-blend-mode is implemented; the property is valid, the automated tests pass, but no blending actually takes place" - http://blogs.adobe.com/webplatform/2013/09/12/browser-support-matrix-for-css-blending/

user247702
  • 23,641
  • 15
  • 110
  • 157
  • @l2aelba not really. You could create a test similar to [background-blend-mode](https://github.com/Modernizr/Modernizr/pull/1392/files) but you still would not know for sure if the browser actually does something. – user247702 Jan 22 '15 at 11:50
  • `window.CSS.supports('mix-blend-mode','soft-light');` ? – l2aelba Jan 22 '15 at 11:50
  • 5
    @l2aelba If I understand correctly, that test will return `true` on certain browsers that don't actually support it. If you're OK with some false positives, you can use it. – user247702 Jan 22 '15 at 11:53