Prisma says@supports tests whether the browser understands a feature before using it (feature queries).
@supports (display: grid) { … } applies rules only if the browser supports that declaration. It's progressive enhancement in CSS: ship a baseline everyone gets, then layer modern features for capable browsers. Test the negative with @supports not (...).
Power-ups you unlock
@supports (property: value){ … } feature query
Progressive enhancement for new CSS
@supports not (...) for fallbacks
Combine conditions with and / or
Jank the Janitor attacks — common mistakes
Testing support but writing the value wrong
Assuming @supports itself is unsupported (it’s widely)
Over-nesting until rules are unreadable
Boss battleProvide a flex fallback, then enhance to grid inside @supports (display:grid).