The CSS You Don’t Know About
summary
Covers practical modern CSS: live demos show CSS variables for theme palettes, native rule nesting, and the tiny one-line field sizing content that auto-sizes inputs and selects. Shows responsive layouts built with container queries so components adapt to their container instead of the viewport, an accordion that animates using calc(size) instead of JS, and :has() used to style parents (e.g., required-field asterisks). Every technique is implemented in real demos and the CSS solutions work in the presented browsers.
AI-written summary · about
chapters (17)
- 0:00Introduction
- 1:29Why I love CSS
- 3:58CSS variables power
- 12:57Native CSS nesting
- 19:37Field-sizing demo
- 24:35Container vs media queries
- 33:32Animated accordion
- 39:57CSS calc hacks
- 41:00Style property for animations
- 45:16Scroll-driven animations
- 47:42CSS :has selector
- 51:10CSS :has for layout
- 53:34Text wrap balance
- 54:16CSS layers
- 55:00CSS variables like TypeScript
- 56:03Initial letter styling
- 57:28Summary
related talks
10mExploring Features in Modern CSS
43mModern CSS Layout is Awesome!
39mModern CSS Layout is Awesome!
42m3.14 Things You Didn't Know About CSS (Updated)
17mHow I Learn To CSS
06mCSS *is* awesome
50mHow to Rock Your Frontend Apps with 10 Awesome CSS Features!
50mStyling the Future: A Deep Dive into Modern CSS