CSS background-blend-mode in IE (Edge)

Question

I’m making a website, and to avoid hovers with other images, I used the blend-mode in CSS. But according to Can I Use? IE 11 and new Edge browsers do not support.

Here comes my question, in cases like this, what could I do? Try some alternative with opacity only for these browsers? Or just abandon these?

Thanks for the answers! But I’m still in doubt...

My code is like this

figure.effect {
    background: #D68F27;
}

figure.effect img {
    opacity: 0.8;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
}

figure.effect:hover img {
    mix-blend-mode: soft-light;
    transition: background-color 1s ease-in-out;
}

It is an image with a background "#D68F27", and it already has opacity 0.8. When the Hover is activated the blend-mode enters. In IE and Edge just wanted it to be 0.3 opacity, it would be easier with @supports? or with JS?

Answer 1

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 the @supports. Through it you check whether certain property or value are 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 "linear-gradient(0deg,red,red)" value is not supported.

And if the browser doesn’t recognize @Upports (case of previous versions of IE), the @Upports block is ignored, keeping the default values you set earlier.

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

And for more details about this and also about using CSS in Edge, access the link http://talkitbr.com/2015/08/19/prefixos-css-no-microsoft-edge/

Answer 2

As the implementation of blend-mode is still being broadcast in the case of browsers like IE 11 and others that do not support it would be nice if you already let the code work if they ever saw to enable this function (in the case of microsoft in 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 value returned is normal the browser has compatibility but return 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, checking these variables above and applying a differentiated style should he return undefined, or also, you can use the famous "hack" for CSS.

Here is a list of some for IE for example:

http://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/

I believe that to do something really cool maybe with zoom images or control opacity as you said yourself, there goes the imagination and what combines best with the layout!

I hope I helped, and please, whether it has been useful to assess opinion and attempt to resolve the problem, hug!

references: - http://dev.modern.ie/platform/status/mixblendmode/ - http://css-tricks.com/basics-css-blend-modes/

You can for example do the check 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>