Check CSS Support in CSS Using @supports Rules

For many years, Can I Use? has been the go-to place to find out whether a browser supports a certain feature, like CSS aspect-ratio. However, what do you do when you need to add some additional styling if the browser doesn’t support a feature? Well, in an almost paradoxical way – you can use the @supports rule, erm, if your browser supports it.

What does this mean… let’s use a simple HTML element to show what it can do…

<div id="test">
</div>

We are going to use two flavours of the @supports rule, and there will be three outcomes.

• When the browser supports aspect-ratio you’ll see “yes”
• When the browser does not support aspect-ratio you’ll see “no”
• Where the browser doesn’t support @supports you’ll see nothing at all

@supports (aspect-ratio: auto) {
  #test:after {
    content: 'yes';
  }
}

@supports not (aspect-ratio: auto) { 
  #test:after {
    content: 'no';
  }
}

In this example you can see the positive test for @supports and the negative test for @supports not, which sounds Shakespearian! “Supports not the cause; your enemy doth thwart your plans.”

At the time of writing, 97% of all users have a working @supports rule. At this point, any browser that doesn’t support this is an abandoned browser.