This site uses third-party cookies, learn more or accept

CSS @suports - everything you need to know

Learn about the CSS @supports query, and why it's so useful
Written by Maxwell Pelic,

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 */





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){



      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){




   @media (min-width:900px){






Previous Article: Dynamic Emails with Gmail

Next Article: Links in Emails - what you should and shouldn't do