@supports makes me happy

Alright, obviously I won’t be changing all the photos on my website whenever I change my color scheme, so giving the photos a little color in CSS would be so much nicer. And in the night I thought: just use ::before and ::after with blend modes, then you won’t need to add any HTML (so no child theme needed) and you can make the photos look however you want with CSS.

Since I still don’t like how the layered-blend-mode-way makes the duotone effect look (see this example on Codepen), I decided to go for a slightly different effect: one layer with a linear gradient background and a mix-blend-mode set to color. Either way though, when I checked caniuse.com for the support of mix-blend-mode, it turns out not to be supported by IE, Edge and in Safari and on iOS it doesn’t support the color value¹. Worse, since it’s a layer covering the photo, if mix-blend-mode isn’t working visitors just see a gradient and no photo: it doesn’t degrade nicely. So…

What: @supports is a CSS query to check for feature support. It works similar to @media in that you wrap it around the block of styles you’re wishing to apply only if the feature is present (if the CSS rule you like can be applied).

Where: I found it as a comment by nothrem on an IE CSS Hacks repo @ github

Example:

@support(mix-blend-mode){
  div::before{
    background: linear-gradient(#ebca41,#6f1683);
    mix-blend-mode: color;
  }
}

And another option, which I used because of Safari and iOS, which does support mix-blend-mode but not the color value:

@support(mix-blend-mode: color){
  div::before{
    background: linear-gradient(#ebca41,#6f1683);
    mix-blend-mode: color;
  }
}

Thoughts: IE does not support the @supports query however… in IE11 at least, it also doesn’t apply the style and it doesn’t break the site, so the end result is, in this case, the same. If IE did support a feature, you couldn’t check for it this way and expect the style to be applied.

[Edit: ¹Oddly the effect is actually showing in Safari 11.1.2 and iOS 12.3.1 (which is what I have at hand here). – 20190731]

Read more: @ CSS-TRICKS by Chris Coyier

Also, …

To get the most support on the gradient –although linear-gradients have better support than mix-blend-mode– I use a sweet tool called the Autoprefixer that automatically adds prefixes were appropriate 💕