CSS background-blend-mode in IE (Edge)

As the implementation of blend-mode is still widespread in the case of browsers such as IE 11 and others that do not support it would be nice to leave the code working if those days were to enable this function (in the case of microsoft at the edge now).

You can check the compatibility of browsers with blend mode by running this script:

var supportsMixBlendMode =
    window.getComputedStyle(document.body).mixBlendMode,
    supportsBackgroundBlendMode =
    window.getComputedStyle(document.body).backgroundBlendMode;

console.log(supportsMixBlendMode);
console.log(supportsBackgroundBlendMode);

If the return value is normal, the browser has compatibility, but if it returns undefined , there is no way, nor vendor prefixes resolves!

However, I believe you can do some other legal effect for these browsers, or through JS, verifying these variables up and applying a different style if you return undefined , or you can also use the famous "hack" for CSS.

Here is a list of some for IE eg:

link

I believe that to do something really cool maybe with zoomed images or control of opacity as you said it yourself, there goes of the imagination and that combines better with the layout!

I hope I have helped, and please, if it was useful to evaluate the opinion and attempt to solve the problem, hug!

references: - link - link

You can for example do the verification as follows:

<script>
    var t = window.getComputedStyle(document.body).mixBlendMode,
        s = window.getComputedStyle(document.body).backgroundBlendMode;

        if (undefined == (t&&s)) {
            //Aqui vai seu codigo ex.:
            //document.body.classList.add('n-blendMode');
            //document.body.style.color = "#000";
        }
</script>

Just by complementing the previous answer with the JS solution, there is also a feature in CSS that can make your work easier. It is @supports . Through it you check whether a given property or value is supported. If supported, you simply override the default properties using the supported property or value. For example:

b {
  background-color: red;
}

@supports ( background: linear-gradient(0deg,red,red) ) {
  b {
    background: linear-gradient( 0deg, rgb(65, 150, 44), rgb(26, 219, 73) );
  }
}

In this case, the background-color value will be "red" only if the value "linear-gradient (0deg, red, red)" is not supported.

And if the browser does not recognize @supports (in case of previous versions of IE), the @supports block is ignored, keeping the default values you defined earlier.

Now, between using JS or @supports, there is a lot of the feature that you want to use. In my opinion, resolving only in CSS would be ideal. But unfortunately not all browsers implement @supports . Hence you may fall into the browser problem implementing the CSS feature you want but not implementing the @supports. In this case JS would be the solution for you.

And for more details on this and also about using CSS in Edge, go to the