CSS in 2023 and beyond
summary
Container queries let components respond to their parent’s inline size (now available in the three main engines), with new container units and a Chrome Labs polyfill (maintenance mode). Subgrid is usable in Firefox and Safari 16 but Chrome is pending. The relational selector :has exists but remains behind Firefox flags. Cascade layers work but unsupported browsers create an anonymous top layer that breaks ordering. View transitions use document.startViewTransition and snapshots for SPA animations (view transitions (Chrome 111, SPA-only)). Demos (donut shop examples, animations, color and anchor experiments) live on GitHub (live demos on GitHub).
AI-written summary · about
chapters (9)
- 0:00Start
- 12:25Container Style Queries
- 13:02Masonry layout
- 28:48Media Query Range Syntax
- 36:05Scroll-driven Animations
- 43:42Color mix
- 44:09Relative Color Syntax
- 44:55Color contrast
- 47:32Anchoring
