CSS Reborn: (Re)make Friends with Your Stylesheet
summary
Concrete CSS features are reviewed with live demos: CSS custom properties and native CSS nesting replace many Sass patterns; the :has() selector lets a parent be styled based on its children (including “count ≥ 4” patterns); and container queries allow components to respond to their parent’s width instead of the viewport. New color tools covered include space-separated color syntax, color-mix, and LCH palettes, and view transitions using document.startViewTransition plus view-transition-name animate shared elements; many demos work in Chromium today while some features require flags, polyfills, or are not yet in Firefox/Safari.
AI-written summary · about
chapters (15)
- 0:00Introduction
- 1:14CSS evolution
- 5:04Custom properties
- 7:08CSS nesting
- 8:51Selector :has
- 12:03Color notations
- 13:10Color mix and HSL
- 17:09Advanced media queries
- 18:10Container queries
- 21:41Dynamic viewports
- 23:28Aspect ratio
- 25:37View transitions
- 32:33Color contrast
- 36:03Contrast preferences
- 36:47Conclusion
related talks
47mCSS Rises from the Ashes: (Re)Make Friends with Your Stylesheet
49mCSS Rises from the Ashes: (Re)make Friends with Your Stylesheet
50mStyling the Future: A Deep Dive into Modern CSS
53mWhat's new with CSS?
47mCSS :is(.awesome)
33m"Fresh Hot CSS Features!"
32mGet Ready for the Future of CSS!
10mExploring Features in Modern CSS