Syntax - Tasty Web Development Treats

996: 10 New CSS and HTML APIs

42 snips
Apr 15, 2026
They explore Grid Lanes for true masonry layouts and directional filling. They demo putting real HTML into canvas and next-gen visual effects. Name-only container queries and element-scoped view transitions for cleaner animations get attention. They cover CSS random() for dynamic values, ::search-text styling, sticky positioning in both axes, multi-column wrapping fixes, and new border-shape options.
Ask episode
AI Snips
Chapters
Transcript
Episode notes
INSIGHT

Native Masonry With CSS Grid Lanes

  • CSS Grid Lanes brings native masonry layouts to CSS with a simple display:grid-lanes declaration.
  • It fills items in a Pinterest-style flow (left-to-right or configurable axes) using familiar grid properties like grid-template-columns and gap.
INSIGHT

Render Real HTML Inside Canvas For Next‑Gen Effects

  • HTML in Canvas lets you place real DOM elements inside a canvas and paint them, enabling advanced pixel effects while preserving accessibility.
  • Demos show pixelation, magnifiers, frosted-wipe effects, and live inputs that remain inspectable and interactive behind canvas shaders.
ADVICE

Scope Styles With Name Only Container Queries

  • Use name-only container queries to scope styles by container name instead of writing unique selectors everywhere.
  • Assign container-name on a wrapper then write @container <name> to apply scoped CSS inside that region.
Get the Snipd Podcast app to discover more snips from this episode
Get the app