CSS resilience lets unsupported declarations or features be ignored while supported styling continues to apply. This enables progressive enhancement across browsers: newer browsers use enhanced rules, while older browsers retain a usable fallback. section 1.5.3
Feature queries make the browser’s support decision explicit:
- @supports (display: grid) applies rules only when the declaration is supported. section 1.5.3
- @supports selector(:user-invalid) tests whether the browser understands a selector. section 1.5.3
- Keep a broadly supported layout outside the query, then enhance it inside the query. section 1.5.3
Coffee links with a resilient layout
Style links as inline blocks by default. Inside @supports (display: grid), switch .coffees to three grid columns with gap: 10px, then remove the fallback margins and minimum width. Browsers without grid support still display usable links. section 1.5.3
@supports (display: grid) { ... }
Inspect the compact feature-query pattern used to conditionally enable grid layout. section 1.5.3
