According to the CSS specification, the @supports at-rule must be placed at the top level or nested inside another conditional group at-rule. However, browsers also allow code like this (which, at least in theory, is not valid):

.my-class { @supports ( property : value ) { ... } }

Enter fullscreen mode

Exit fullscreen mode

And that's confusing.

Either browsers should ignore the nested @supports entirely (or always execute it, since browsers are often forgiving with HTML and CSS), or they should apply it relative to the nested-in rule. Applying it as if it were at the root level while visually nesting it inside a selector can be misleading.

Take this example:

li ::marker { @supports ( content : " - " ) { content : " - " ; color : red ; } }

Enter fullscreen mode

Exit fullscreen mode

This works in most browsers. Chrome, Safari, and Firefox support ::marker , and they all support content: " - " .…