Detect if browser supports "@supports"?

Question

I realize this may be a dumb question because I am returning to web dev after some time anyway, so please don't be shy to enlighten me! To me it seems that the art of css hacks (like back in the day to sniff out old IE browsers) could be used to fill the gap between the new-ish @supports queries and old browsers that do not support these features. Potential to save yourself and your site from alot of javascript? Even aid in dropping javascript altogether in small projects. Is anyone aware of any projects like this? It is also possible I have failed to search with proper keywords...

Not a hack per se, just use the cascade as you always have. Related questions: stackoverflow.com/questions/21257329/… stackoverflow.com/questions/16584228/… — BoltClock
– BoltClock, Commented May 1, 2018 at 12:47
Not an answer, but the good news is almost all browsers support @supports. caniuse.com/#feat=css-featurequeries. Only ~2% of users still have IE and will face issues: w3schools.com/browsers/browsers_explorer.asp — Kallmanation
– Kallmanation, Commented May 1, 2018 at 12:58
All very helpful, in my case it helps me to build/design in the old way for now, and then go about "modernizing" my CSS with a separate file when I'm ready. In the end it's just for training purposes until I get more comfortable. Pure cascade is obviously the way to go once you have all the features down. Thanks! — Tim Bilotta
– Tim Bilotta, Commented May 1, 2018 at 14:05

Sviat Kuzhelev · Accepted Answer · 2018-05-01 12:49:16Z

1

Yes, you can do this with the next commands:

The all following examples are valid:

@supports not (not (transform-origin: 2px)) - for test browser on non-support

or

@supports (display: grid) - for test browser on support

or

@supports (display: grid) and (not (display: inline-grid)). - for test both

See MDN for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

answered May 1, 2018 at 12:49

Sviat Kuzhelev

1,78813 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tim Bilotta Over a year ago

<!-- legacy cascade -->   <link rel="stylesheet" href="legacy.css">    <!-- modern cascade, overwrites legacy if argument is satisfied -->   @supports ( color: rgb(255,255,255,0.5) ) {     @import url("modern.css");     @media ...     @supports ...     ...   }

In this case I test to see if modern colors are accepted with alpha (transparency) and then safely apply more modern sugar correct? @BoltClock

Collectives™ on Stack Overflow

Detect if browser supports "@supports"?

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related