Baseline Magic: The Art of Intent-Driven CSS
summary
Live demo builds a small apothecary dashboard called Sage and Sundry using modern CSS: custom properties with @property for animatable colors, cascade layers to control specificity, logical properties for RTL-safe spacing, and container queries to switch layouts as a sidebar expands. The page uses the :has selector for theme and state toggles, native popovers with anchor positioning for ingredient details, and same-document view transitions to animate card-to-detail slides — all features run in the demo and behave as described.
AI-written summary · about
chapters (11)
- 0:00Baseline magic intro
- 1:35Intentional CSS experiences
- 2:38Custom properties for clarity
- 3:42Cascade layers precedence
- 6:30Logical properties container queries
- 11:04Has selector as family selector
- 13:52New CSS features overview
- 14:35Popovers anchor positioning
- 19:11View transitions smooth changes
- 23:52Crafting with intention UX
- 25:01Closing remarks
