Question

132

Testing of CSS mix-blend-mode

rated 0 times [ 137] [ 5] / answers: 1 / hits: 6518 / 10 Years ago, thu, january 22, 2015, 12:00:00

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 ?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

masonm

Add To Favorites

Follow

Total Points: 167

Total Questions: 87

Total Answers: 103

Location: Rwanda

Member since Wed, Jun 8, 2022

2 Years ago

masonm questions

1 Exceptional regex for email id validation in JavaScript

Mon, May 3, 21, 00:00, 3 Years ago

1 Bootstrap Carousel - Autoplay video on active slide

Sat, Nov 7, 20, 00:00, 4 Years ago

1 TS2322: Type 'number' is not assignable to type 'bigint

Mon, Oct 12, 20, 00:00, 4 Years ago

1 Vue Router passing props to dynamic routes, unclear documentation

Sun, Aug 9, 20, 00:00, 4 Years ago

1 Async await function not executing within an event listener

Wed, Dec 18, 19, 00:00, 5 Years ago

View All

answered 10 Years ago cierra · Accepted Answer

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