Check CSS Support in CSS Using @supports Rules
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
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK