Smart Layouts
summary
Claims that modern CSS features let components adapt to content and surroundings and shows a working news layout, a header that swaps search for a go to file button, and anchor‑positioned overlays that stay put while resizing. Uses container queries, CSS :has() plus style queries, CQW units, clamp, grid areas, minmax and auto-fit; notes :has() support ~94% and container queries land August 2022, style queries lacking Firefox, anchor in Chrome/Safari. Demos run and reshape live.
AI-written summary · about
chapters (31)
- 0:00Introduction
- 1:26Talk overview
- 2:06Responsive design evolution
- 3:56Responsive design limits
- 6:04Smart layouts
- 10:42Layout zones
- 14:37CSS has connection
- 17:02Container queries
- 18:49Featured styles
- 20:15Style queries limits
- 21:48Fluid layouts
- 23:16Font sizing
- 24:01Outer vs inner containers
- 25:04Anchor positioning
- 27:10Grid areas
- 28:56Logical properties
- 29:57Header example
- 31:20Clamp sizing
- 32:46Advanced anchor
- 36:18Sibling index
- 37:46Summary
- 40:14Q&A
- 41:20CSS has performance
- 43:31Grid with queries
- 45:55Style queries vs classes
- 46:59Figma mockups
- 49:27Exponential conditionals
- 50:29Layout complexity cost
- 51:12Supporting right-to-left languages in CSS
- 53:20CSS debugging book
- 54:23Closing
