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 ?
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 ?
Share Improve this question edited Jan 22, 2015 at 11:44 user247702 24.2k18 gold badges115 silver badges160 bronze badges asked Jan 22, 2015 at 11:38 l2aelbal2aelba 22.2k23 gold badges107 silver badges144 bronze badges 02 Answers
Reset to default 15Got 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
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/