"State of CSS 2024"
summary
Overview of concrete, usable CSS changes in 2024: coverage of text-wrap: balance (Chromium 6-line / Firefox 10-line limits), nesting gotcha where older iOS needs the ampersand, and the new baseline states for feature rollout. Demonstrations show color mix and relative color syntax (beware OKLCH hue shifts and a light/dark bug with relative colors), declarative popover API (buttons-only trigger, top-layer promotion), starting-style + transition-behavior allow-discrete to animate from display:none, and scroll-driven animations — demos and migration caveats included.
AI-written summary · about
chapters (19)
- 0:00Introduction and speaker intro
- 1:28Web DNA and Interop history
- 3:56Baseline and feature availability
- 7:10Interop 2024 goals
- 8:33Live demos and setup
- 11:03Text wrap balance feature
- 13:12CSS :has selector explained
- 14:14Focus-visible for accessibility
- 16:04CSS nesting updates
- 19:40Light dark color function
- 25:00Color spaces and mixing
- 29:56Relative color syntax
- 34:10Popover API introduction
- 39:46Starting style and animations
- 43:52Discrete animation types
- 45:23Scroll-driven animations
- 50:21Feature limitations and future
- 51:03Summary of new CSS features
- 52:07Q&A and closing
