CSS @suports - everything you need to know

Ever want to add a cool new feature to your website, but you’re worried about the lack of support? There’s a cool feature in CSS when you can apply certain styles only when they’re supported! The feature is called @supports, and it works just like a @media or @keyframes query. Here’s an overview of how the feature works:

Basic implementation

Here’s an example of the @supports basic implementation:

/* start with @supports followed by the feature you want to check */

@supports (color: red){

   /* this css will only be applied if "color: red" is supported in this browser */

   a{

      color:red;

   }

}

In the example above, all browsers will apply the style, because color:red is supported by all browsers. But if you use a property that doesn’t have as much support, this feature becomes way more useful. For example, if you want to change the mix-blend-mode on a section you have, only display the background if the mix-blend-mode is supported, you could do something like this:

@supports (mix-blend-mode: darken){

   section{

      background-image:url('path/to/image.jpg');

      background-blend-mode: darken;

   }

}

Checking for multiple properties

You can also use logical operators to combine multiple checks and apply styling based on the result. For example, if you want to use display:flex or display:box, you could design a query like this:

@supports (display:flex) or (display:box){

   /* add your css here */

}

Best Practices

If you’re trying to support older browsers, you should make sure you design your CSS to automatically support older browsers and add a @supports query to include the new styles. Why? If you use @supports with the fallback inside, a browser that doesn’t support @supports won’t display the fallback option, leaving you right where you started. Some browsers, including IE, don’t support the @supports query.

You can also nest @supports queries inside @media queries, for example, the following code is valid:

@supports (background:blue) and (background:red){

   div{

      background:blue;

   }

   @media (min-width:900px){

      div{

         background:red;

      }

   }

}