Kevin Powell - Community•3mo ago

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•3mo 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•3mo ago

Cool 👍

Tenkes•3mo 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•3mo ago

I saw supports selector in the MDN docs

t_var_s•3mo ago

https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

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•3mo ago

it's not technically a selector, it's an at-rule just like @media

Kevin Powell•3mo 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•3mo ago

Thank you, Kevin This looks like the overall best approach

Kevin Powell•3mo 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•3mo ago

I like having a whole block that can assume something works.

Gaming

Programming

Can I get a confirmation on how browsers handle unsupported CSS syntax?