How to Rock Your Frontend Apps with 10 Awesome CSS Features!
summary
Demo code shows more than ten concrete CSS capabilities released since 2023 and how they actually change workflows: CSS nesting and custom properties simplify selectors and theming; container queries replace heavyweight JavaScript for component-level responsiveness; grid, subgrid and gap enable complex layouts that keep alignment across nested components; clamp and dynamic viewport units deliver fluid typography and correct mobile heights; scroll-snap and scroll-timeline drive snap paging and a reading-progress bar. Examples run in modern browsers but nested CSS breaks on frozen older Chrome.
AI-written summary · about
chapters (15)
- 0:00Welcome
- 3:37CSS nesting
- 8:24Custom properties
- 11:43CSS Grid layouts
- 20:03Hover media query
- 22:41CSS math functions
- 25:37Gap property
- 29:13Flexbox vs Grid
- 30:39Viewport units
- 33:09Container queries
- 38:45Scroll snap
- 43:46Scroll animations
- 46:20Sub grid
- 48:12Color functions
- 49:15Closing
related talks
50mStyling the Future: A Deep Dive into Modern CSS
01h 00mThe CSS You Don’t Know About
43mModern CSS Layout is Awesome!
33mNew CSS Features You Can Use Today
56mModern CSS For Dynamic Component-Based Architecture
33m"Fresh Hot CSS Features!"
10mExploring Features in Modern CSS
45mOh, you can do that in CSS now?