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

CSS @suports - everything you need to know

Written by Max Pelic on
Update: the Jelly URL link shortener is live, be one of the first people to check it out!
For a limited time, get an exclusive discount by using the coupon code WEBSITE5OFF when you sign up for a free trial.

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:

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

2@supports (color: red){
3 /* this css will only be applied if "color: red" is supported in this browser */
4 a{
5 color:red;
6 }

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:

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

2 section{
3 background-image:url('path/to/image.jpg');
4 background-blend-mode: darken;
5 }

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:

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

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

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

2 div{
3 background:blue;
4 }
5 @media (min-width:900px){
6 div{
7 background:red;
8 }
9 }

Share this article:

Previous Article: Dynamic Emails with Gmail

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