996: 10 New CSS and HTML APIs

Summary of 996: 10 New CSS and HTML APIs

by Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

31m•April 15, 2026
Listen to Episode

Overview of 996: 10 New CSS and HTML APIs

This episode of Syntax (Wes Bos & Scott Tolinski) walks through a batch of recent and emerging CSS/HTML/browser platform features — a mix of immediately usable improvements and experimental APIs you can try behind flags. The hosts highlight what each feature does, why it matters, demo ideas, and current support caveats.

Key takeaways

  • Small “paper-cut” fixes (sticky in both axes, multi-column wrap, named container scoping) are landing and will simplify many layouts.
  • A few experimental, high-impact APIs (HTML-in-Canvas, element-scoped view transitions) open doors to effects that previously required complex workarounds or gave up accessibility.
  • Many features are already in modern browsers (or behind flags). Check each API’s compatibility before using in production and progressively enhance when possible.

The 10 APIs / features covered

For each: what it is, why it matters, common uses, and support notes.

1) CSS masonry / “grid lanes” (display: grid lanes)

  • What: A masonry-style layout mode using a grid API (commonly referred to as CSS masonry or “grid lanes”). Use familiar grid properties (grid-template-columns, gap) but items fill like a Pinterest masonry layout.
  • Why it matters: Native masonry layouts without hacks (CSS columns or JS) — simpler, more robust, and more flexible for non-photo use-cases (footers, card layouts).
  • Use cases: Photo/product grids, dynamic card lists, creative responsive layouts.
  • Support: Implementations appeared in recent WebKit builds and experimental flags in Chromium/Firefox. Check current browser docs for exact availability.

2) HTML in Canvas (experimental)

  • What: Allows placing real HTML elements inside a <canvas> and offers APIs to paint that live HTML to the canvas surface so you can shader, blur, pixelate, morph, etc., while keeping DOM semantics and accessibility.
  • Why it matters: Combines canvas-level pixel control (shaders, distortions) with the DOM’s accessibility and interactivity (inputs, focus). Previously required complex SVG/image conversion or full canvas UI re-implementation.
  • Demo ideas: Pixelation, magnifying glass, frosted-glass wipe, “jelly” sliders, CRT/warped effects, animated scan-line wipes that preserve form inputs and focus.
  • Support: Experimental; behind flags in Chrome and not yet widely available. Promising but may change before standardization.

3) Name-only container queries (container name scoping)

  • What: You can name containers (container-name: sidebar) and use @container name { ... } to scope styles to that container without writing an explicit size query.
  • Why it matters: Offers a built-in way to scope CSS to a particular container instance (native component scoping) — a practical alternative to class-based scoping patterns.
  • Use cases: Re-usable components that need localized styling, scoped responsive behaviors.
  • Support: Appears in recent browser versions; check current compatibility (Chrome/Firefox/Safari tracks).

4) CSS random()

  • What: A CSS function to generate random numbers within a range (e.g., random(0,100,2) to pick an even number).
  • Why it matters: Lets you create randomized CSS effects purely in CSS (rotations, offsets, subtle variation) without passing values from JS. Useful for small visual variety.
  • Caveats: Server/client consistency (hydration) and seeding considerations still apply for SSR workflows.
  • Support: Experimental/limited; check browser support before use.

5) ::-webkit-search-text / ::search-text and :current (find-in-page styling)

  • What: Pseudo-element/pseudo-class to style text highlighted by the browser’s find-in-page UI (and to style the currently focused match).
  • Why it matters: Lets you theme “find on page” highlights to match site design, including custom styling for the current match.
  • Use cases: Custom highlight colors, animations, or special styling for the current search match.
  • Support: Emerging support across browsers; check compatibility.

6) Sticky positioning in both axes

  • What: Sticky positioning now works independently per axis — elements can stick while scrolling in both horizontal and vertical axes.
  • Why it matters: Enables more robust sticky UIs for two-dimensional scroll layouts (e.g., schedule/tournament grids, horizontally & vertically scrollable tables).
  • Use cases: Conference schedules, complex table headers, multi-directional UIs on mobile/desktop.
  • Support: Newer Chrome builds implemented this; check current browser versions.

7) Multi-column fixes (column-wrap, column-height, improved behavior)

  • What: Improvements to CSS multi-column behavior, including new properties that better handle wrapping/height so content can wrap to the next set of columns when needed.
  • Why it matters: Better control for flowing long paragraphs across columns — useful for publishing use-cases where you want native text flow rather than splitting content into separate elements.
  • Use cases: Articles, magazine-style layouts, print-like flows in responsive web.
  • Support: Rolling into modern browsers; test in target environments.

8) border-shape (insets/outsets + shapes: squircle / super-ellipse / notch / bevel / round)

  • What: A richer way to define border shapes that supports both inset and outset behavior and several built-in shapes (squircle/super-ellipse/notch/bevel/etc.).
  • Why it matters: Makes it easier to create complex borders (breadcrumb chevrons, ticket cutouts, etc.) without masks or extra SVGs. The border will follow the defined shape, including focus outlines.
  • Use cases: UI components with non-rectangular borders (buttons, badges, tickets, creative cards).
  • Support: Implementations exist in WebKit and Chromium experiments; check MDN/WebKit for examples.

9) Element-scoped view transitions (view transition groups)

  • What: Ability to scope view transitions to element groups using view-transition-name/group/contain so animations are more tightly scoped and simpler to manage than giving unique names to every element.
  • Why it matters: Simplifies animating adds/removes/reorders for lists/cards with automatic, predictable transitions without heavy JS orchestration.
  • Use cases: Reordering lists, adding/removing cards, component-level animated state transitions.
  • Support: Landed in Chrome builds first; verify cross-browser support for production use.

10) Vibration / haptic feedback behavior changes (iOS/Safari)

  • What: Safari previously allowed creative workarounds to trigger haptic feedback; stricter rules now restrict vibration/haptic outputs to user-initiated interactions.
  • Why it matters: Prevents abuse but also limits some creative haptic effects on the web; you’ll need explicit user gestures for vibration.
  • Takeaway: Expect tighter permission/user-gesture requirements for haptic/vibration APIs (and similar platform features).

Notable insights & quotes

  • HTML-in-Canvas is described as “a powerhouse of an API” because it preserves DOM accessibility while giving pixel-level control for effects that previously required complex hacks.
  • Many changes are about removing “paper cuts” — small, critical quality-of-life improvements that make everyday layouts and UI patterns much easier to implement.
  • Don’t discount features just because you don’t see immediate use — web devs have diverse needs (publishing, complex UIs, games, etc.) where these will matter.

Actionable recommendations

  • Experiment behind flags: Try HTML-in-Canvas and new grid/masonry features in browser canaries or flagged builds to prototype ideas.
  • Progressive enhancement: Add fallbacks for users on older browsers (e.g., use JS masonry or CSS columns fallback).
  • Use element-scoped view transitions for list animations to reduce JS complexity.
  • Avoid shipping experimental APIs in production without feature-detection and fallback strategies.
  • Follow MDN, WebKit, and Chrome platform status pages for up-to-date compatibility.

Resources & demos to check

  • WebKit blog / WebKit GitHub (masonry, HTML-in-Canvas demos)
  • Demos by Matt Rothenberg, Jake Archibald (HTML-in-Canvas effects)
  • MDN for syntax and compatibility notes (border-shape, container queries, view transitions)
  • Browser release notes / flags (Chrome Canary / Firefox Nightly / Safari Technology Preview) to test experimental features

Which API to try first?

  • If you want immediate layout wins: test the grid-lanes/masonry and named container queries.
  • If you want creative visual UIs and don’t want to lose accessibility: experiment with HTML-in-Canvas behind a flag.

Peace — and happy experimenting with the new web platform features.