@supports Lies: When CSS Says 'Yes' but Browsers Say 'LOL No'

Short summary

CSS @supports rules can be nested inside selectors despite violating the CSS specification, causing feature detection to pass even when browser implementations differ—for example, Safari doesn't support content in ::marker but the @supports check still succeeds. The article identifies this as a limitation of @supports, which validates syntax independently rather than within specific selector contexts. Proposed solutions include extending @supports to test feature combinations like @supports selector(::marker) and (content: " - ").

• •Browsers allow nested @supports rules that violate CSS specification
• •Feature detection passes for declarations unsupported in specific selector contexts (e.g., content in ::marker)
• •Proposed solutions: extend @supports syntax to validate feature combinations within rendering contexts

Generated with AI, which can make mistakes.