Styling the Future: A Deep Dive into Modern CSS
summary
Practical rundown of what actually works now: container queries (opt-in via containment, inline-size only today, container names and cqi units let components size to parents; polyfill is maintenance-only), :has selector (relationship/parent selection but not nested parent-of-parent), subgrid (available since Chrome 117; aligns child grids to parent), and view transitions (Chrome 111+, SPA-only screenshot-based transitions). Also: CSS nesting (128-level limit), cascade layers (anonymous layer tops unless defined), color functions (LCH, color-mix), trig functions, masonry and anchoring — check browser support before shipping.
AI-written summary · about
chapters (13)
- 0:00Introduction
- 0:31About Anton
- 2:06Agenda
- 2:35W3C
- 3:30Nesting
- 6:55Cascade Layers
- 15:04Container Queries
- 20:26Subgrid
- 25:59H selector
- 30:45View transitions
- 36:30Colour spaces
- 40:25Colour Mix
- 44:22Trig
