Future-Proof CSS
summary
Argues that progressive enhancement is the core tactic: ship sensible HTML first, style progressively with the cascade, and put modern rules inside @supports so older browsers (eg IE) keep working. Recommends logical properties like margin-inline-start for internationalization, using media queries such as prefers-reduced-motion and prefers-color-scheme, and preserving native semantics for accessibility. Shares a failed CSS-only tooltip experiment that proves some UI needs JavaScript to be usable.
AI-written summary · about
chapters (24)
- 0:00Introduction
- 0:43What is future-proof CSS
- 2:32Web’s foundational stability
- 4:20Build future-proof CSS
- 5:22Progressive enhancement vs degradation
- 7:50Core principles of enhancement
- 9:57Start with semantic HTML
- 11:23Leveraging the cascade
- 12:24Using older CSS features
- 13:49Feature queries for modern CSS
- 15:36Diversity of web users
- 16:41CSS for internationalization
- 19:34Logical properties for layouts
- 21:41Respect user preferences
- 23:07Designing for assistive tech
- 24:31CSS shouldn’t replace HTML
- 27:20Avoid CSS-only solutions
- 29:09Preserve accessible styles
- 30:54Focus management
- 31:59Maintain interactive elements
- 32:21Validate CSS for compliance
- 34:06Future-proofing is past-proofing
- 35:11Key takeaway
- 36:15Q&A
