2

Check CSS Support in CSS Using @supports Rules

 2 years ago
source link: https://www.stevefenton.co.uk/2021/04/check-css-support-in-css-using-supports-rules/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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.

Posted bySteve Fenton20th April 2021Posted inProgrammingTags:css

Published by Steve Fenton

View all posts by Steve Fenton


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK