Detect CSS Selector Support with Feature Queries

CSS Feature Queries have been a thing for a couple of years already. But a relatively recent addition to it is the possibility to test whether a browser supports a certain selector. For example, you can test whether a browser supports the :-moz-ui-invalid pseudo-class as follows.

@supports selector(:-moz-ui-invalid) {
  /* apply conditional styling */
}

Feature Queries for selectors are supported by all important browsers.

• [CSSWG] Draft: Extensions to the @supports rule
• [caniuse] @supports selector()

If you are interested in the discussions from the idea to browser implementations, have a look at these links:

• https://github.com/w3c/csswg-drafts/issues/3207
• https://bugzilla.mozilla.org/show_bug.cgi?id=1513643