Search code examples
csscross-browserfeature-detection

What exactly can @supports test for (or not)?

What counts as a valid "feature query" for the purposes of @supports? I've been experimenting and so far it doesn't support (incorrectly returns false) many supported features in 2018 Chrome/FF/Safari:

(div:nth-child(3))
(width:max-content)
(width:minmax(auto,50%))
// ... and so on ...

Those seem like properly formed "property:value pairs" to me. What are the parameters for it?

Solution

  • You can't test for selectors with @supports. It requires a statement, such as max-width: 10em or color: black. Since a function is part of a statement, such as width: calc(100% - 12px), this would also be accepted.

    See https://developer.mozilla.org/en-US/docs/Web/CSS/%40supports for more info