Can I get a confirmation on how browsers handle unsupported CSS syntax?
If a browser doesn't support the :has() selector, will it stop interpreting any CSS in that block of styling after the :has()? If it does, using @supports selector is then the correct solution?
10 Replies
No. If you try to use :has() on something, only css inside of that selector won't be executed. So if you do something like:
And browser doesn't support :has(), only
class2
won't be executed. class1
and class3
will remain unaffected.Cool 👍
And
@supports
isn't selector. It is used for css that should be executed only if browser supports certain things. I think syntax for @supports
goes something like this:
And then class2
will only get its properties if :has()
is supportedI saw supports selector in the MDN docs
MDN Web Docs
@supports - CSS: Cascading Style Sheets | MDN
The @supports CSS at-rule lets you specify CSS declarations that depend on a browser's support for CSS features.
Using this at-rule is commonly called a feature query.
The rule must be placed at the top level of your code or nested inside any other conditional group at-rule.
it's not technically a selector, it's an at-rule
just like
@media
If you use
@supports
like that, it has to be a property: value pair. You can use it with selectors, like you did, but it needs to have the selector()
syntax:
Thank you, Kevin
This looks like the overall best approach
Like Tenkes said though, if a browser doesn't understand a block of code, it just ignores it, but it won't break anything else.
I only use
@supports
if I'm doing something very different, for example:
There's no harm in using @supports
more, of courseI like having a whole block that can assume something works.