There are many ways to adjust your CSS code to a browser’s support for a specific CSS feature. If you want to check if a certain property is supported, you can write a feature query using the @supports at-rule, for example:
@supports (display: grid) {
div {
display: grid;
}
}
If the browser supports display: grid, it will apply all the styles inside of the at-rule. Otherwise, it will just ignore the whole block.
If you want to check for support of a whole selector, you can use the @supports selector() function, which has surprisingly good browser support.
@supports selector(:nth-child(1 of .class)) {
/* Do something… */
}
In case you want to learn more, Chris Coyier also wrote a nice piece about how to use @supports selector().
In a current project, however, I ran into a situation where I needed to test for support of the relatively new :where() selector. The tricky situation: both :where() and @supports selector() landed in browsers at about the same time, so if you want to check for support in an older browser, like Safari 13, you’re out of luck. Providing a sensible fallback for older browsers was one of the requirements, though, so I had to look for an alternative. And in the end, I decided to use JavaScript.
I found the solution in a post by Lea Verou. In 2011, she wrote about how to test for CSS selector support by creating a new
