[sam-]

> NOTE: it looks like it's not ordinarily working even when switched on.

I find the :has() selector very useful in certain cases, but firefox doesn't support it yet and like you said, it doesn't work very well even when enabled. What I have done for Firefox is use the `@supports selector` query [1] and fallback to some equally functional but not as nicely styled UI with the hope that when Firefox supports it, it will automatically provide the nicer UI.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/@supports#f...

[hakre]

Yes, and thinking, that @supports selector is also suggested in one of the examples in the article:

  /* Warning message 
     about support for :has() */

  @supports selector(:has(img)) {
    body small {
      display: none;
    }
  }

And I sure love it when CSS performs according my preference, but I'd never complain about a UA not implementing or a user prefer her own style over agent or author.

[chrisweekly]

Nice approach! If you ever blog or tweet about CSS I'd be stoked to read it.

[alwillis]

This approach is called progressive enhancement [1]; it’s been a thing in web development for over a decade.

[1]: https://alistapart.com/article/understandingprogressiveenhan...