Next Level CSS
summary
Tour of concrete CSS features with demos and browser notes: grid layout using minmax() and FR units to create responsive multi-column tracks, grid auto rows + grid-auto-flow: dense to tolerate variable content, and display:contents to promote indirect children into grid items (works in Firefox and Blink). Other working examples include shape-outside/clip-path, @supports feature queries, custom properties, calc(), position: sticky (landing in Chrome) and scroll snapping (works in Firefox but spec recently changed).
AI-written summary · about
chapters (13)
- 0:00Start
- 0:35Lining things up with Box Alignment level 3
- 0:59This is the vertical- centering module.
- 1:57Box Alignment defines how these properties work in other layout methods.
- 2:47A proper layout system with CSS Grid Layout
- 15:20allow indirect children to become flex or grid items
- 21:01Anything new in CSS you can use feature queries to detect support.
- 23:51Fancy introductions with Initial Letter
- 26:04Upside down and back to front with Writing modes
- 27:38Variables in CSS with Custom properties
- 30:54Staying put with position: sticky
- 32:52Snap to it with Scroll snapping
- 35:30Tell browser vendors you want these features
