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
Tenkes
Tenkes8mo ago
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:
.class1 {
color: red;
}

.class2:has(p) {
color: green;
}

.class3 {
color: blue;
}
.class1 {
color: red;
}

.class2:has(p) {
color: green;
}

.class3 {
color: blue;
}
And browser doesn't support :has(), only class2 won't be executed. class1 and class3 will remain unaffected.
t_var_s
t_var_s8mo ago
Cool 👍
Tenkes
Tenkes8mo ago
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:
@supports (.class2:has(p)) {
.class2:has(p) {
colot: green;
}
}
@supports (.class2:has(p)) {
.class2:has(p) {
colot: green;
}
}
And then class2 will only get its properties if :has() is supported
t_var_s
t_var_s8mo ago
I saw supports selector in the MDN docs
t_var_s
t_var_s8mo ago
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.
Jochem
Jochem8mo ago
it's not technically a selector, it's an at-rule just like @media
Kevin Powell
Kevin Powell8mo ago
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:
@supports selector(:has(p)) { ... }
@supports selector(:has(p)) { ... }
t_var_s
t_var_s8mo ago
Thank you, Kevin This looks like the overall best approach
Kevin Powell
Kevin Powell8mo ago
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:
.example-layout {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}

@supports (grid-template-rows: masonry) {
.example-layout {
display: grid;
grid-template-rows: masonry;
}
}
.example-layout {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}

@supports (grid-template-rows: masonry) {
.example-layout {
display: grid;
grid-template-rows: masonry;
}
}
There's no harm in using @supports more, of course
t_var_s
t_var_s8mo ago
I like having a whole block that can assume something works.
Want results from more Discord servers?
Add your server