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: " - " . But here's the catch: Safari does not support content inside ::marker .…