Video summary

What's new in Web UI

Main summary

Key takeaways

Technology

Summary — “What’s new in Web UI” (2026 edition)

The talk highlights recent web-platform updates and organizes them around five UX principles for a modern, higher-quality web experience:

  1. Respect user preferences
  2. Implement natural interactions
  3. Provide guided navigation
  4. Maximize content (reduce noise/clutter)
  5. Adapt to the form factor

It also introduces a major paradigm shift: HTML inside Canvas.

1) Respect user preferences (personalization & accessibility)

Key new/updated CSS capabilities focus on automatically adapting UI to user/system settings and accessibility needs:

  • contrast-color() (Chrome via Interop 2026; baseline newly available) A CSS function that chooses black or white based on the WCAG 2.0 contrast algorithm against a provided background color.

  • light-dark() (extension arriving soon; image support mentioned) A CSS utility to specify separate values for light vs dark mode in a single declaration. The spec is extending it to support images (targeting Chrome 150).

  • Emulating image-capable light-dark() today using:

    • CSS custom functions
    • style queries (reading current color scheme)
    • conditional logic using custom properties (e.g., a scheme variable) + conditional selection

  • Conditional CSS via if() (new language capability) Enables inline conditional logic for property values (e.g., choose dark vs light output based on a reported scheme).

  • Feature-detection for @ rules via @supports-like at-rule querying Mentioned as resolving adding an “at supports query” for checking support for @container, @property, @function, etc.

  • Respecting OS font-size scaling

    • New text scale meta tag available in Chrome 146
    • Lets the browser compute the HTML base font size based on the user’s OS accessibility font-size settings
    • Includes DevTools emulation and guidance that relative units (rem, em) follow that base.

2) Implement natural interactions (tactile motion & UI primitives)

The session emphasizes motion that feels intuitive and “physical,” plus declarative UI improvements:

  • Natural physics-like easing

    • Uses linear() easing with configurable numeric curves to approximate bounce/spring behavior (spring not fully available yet).

  • Entry/exit animation patterns

    • Uses @starting-style, element state attributes (e.g., open), and CSS transitions.

  • Staggered animations

    • Uses sibling-index() to compute per-element stagger delays based on position in the DOM subtree.

  • <dialog> improvements

    • Better modal behavior: page inertness and focus management
    • Declarative light dismiss mentioned as adopted from popover concepts (Chrome 134)
    • Close on outside click, Escape key, or back gesture without extra scripting.

  • New corner/shape styling

    • corner-shape replaces/expands beyond pure rounded corners (supports bevel/scoop/notch “squirrel” etc.)
    • Values are animatable, enabling richer progressive enhancement.

3) Provide guided navigation (context-preserving transitions & scroll-driven UX)

This section focuses on reducing disorientation from page reloads and enabling in-page guidance.

View Transitions (seamless morphing)

  • Same-document view transitions baseline since 2025
  • Expected cross-document view transitions via Interop 2026 (mentioned as “this year”)
  • Mentions Google Search using view transitions as progressive enhancement
    • Example: animations tied to bottom sheet drag gestures
    • Optimizations for hardware acceleration

View Transitions Toolkit (developer utility)

  • A library providing helper functions for interactions:
    • Hardware-acceleration optimization for view transition groups (avoid jank)
    • play/pause/scrub to sync transitions with scroll or pointer gestures
    • Supports creative use cases: drag-driven transitions, video sync, etc.

Element-scoped view transitions (major update)

  • Chrome 147 shipped
  • Enables starting a view transition on a subtree, while the rest of the page remains interactive.
  • Allows “micro interactions” and in-page morphing without blocking the whole document.
  • API change highlighted:
    • Instead of document.startViewTransition(...), use a scoped start call on a specific element.
  • Mechanism described:
    • Isolation prevents “bleeding” of view-transition names outside the scope
    • Supports multiple simultaneous transitions and nesting.

Two-phase view transitions (prototype)

  • Being prototyped in Chrome:
    • Start cross-document transition without waiting for the new DOM
    • First transitions into an intermediary UI (skeleton/loading), then proceeds.

Scroll-driven & scroll-triggered animations (CSS-based)

  • Scroll-driven animations landed in Chrome 2023; becoming interoperable via Interop 2026

    • Animation progress maps directly to scroll position (parallax, reading indicators).
    • Example performance impact: scroll event handling cost reduced by 73% for a partner (Cyosu).

  • Scroll-triggered animations (Chrome 145)

    • Time-based animations that activate based on entering/exiting a scroll range
    • Uses timeline triggers and “activation/active ranges”
    • Reduces need for IntersectionObserver for scrollytelling.

Scroll spy in pure CSS

  • Chrome 140: scroll spy with two CSS declarations
  • Uses scroll-target group auto mode
  • Applies target-current pseudo class to automatically style the active section/link.

Smooth navigation helpers

  • CSS scroll-behavior: smooth or scrollIntoView()
  • New scrollIntoView({ container: ... }) option:
    • Limits scrolling to a target scroller (prevents disorienting 2D scrolling).
  • Programmatic scroll methods now return promises:
    • Lets developers await scroll completion before applying effects (demo: scroll into view then highlight).

4) Reduce noise & clutter (layered UI, progressive enhancement)

This principle targets intrusive overlays and clutter by improving UI patterns:

  • Hidey bar pattern using scroll-state query (scrolled)

    • Detects direction of most recent relative scroll
    • Header/navigation hides when scrolling down, reappears when scrolling up
    • Implemented declaratively via scroll state container + CSS transitions.

  • Layered UI for secondary content

    • Tooltips, dialogs, offscreen menus, etc. to keep main content prioritized.

  • Anchored tooltips using anchored container queries

    • Tooltip arrow changes direction/position depending on open direction (above vs below)
    • Uses new shape and border shape APIs to render arrow visuals.

  • corner-shape and border-shape / shape APIs expand beyond clipping

    • Avoids limitations of clipping masks (preserving shadows/borders)
    • Shape outside mentioned:
      • enables organic/non-rectangular UI where content can float against shapes
      • supports animation

  • position: sticky tracking two axes

    • CSS change available for testing in Chrome 148
    • Fixes sticky issues inside 2D scrollers (needs care with overflow settings; avoid accidentally creating a 2D scroller).

5) Adapt to the form factor (touch/gesture & responsive interaction)

This part discusses differences between desktop input vs mobile gestures and the need for native-feeling behavior:

  • Over-scroll gestures (API in progress)

    • A declarative API for gesture-driven interfaces
    • Works with multiple input methods (touch/scroll) and feels native
    • Example: swipeable overlay menu that dismisses via gesture

  • Overcroll API outline

    • Mark container with overcroll-container attribute
    • Use command toggles like toggle overcroll from an invoking element (accessibility discussed)
    • Connect to a target element inside the container by ID
    • Includes JS lifecycle events for interaction start/change/end/cancel.

Paradigm shift: HTML inside Canvas

A major highlight: HTML and Canvas API enables real DOM content “inside” a canvas:

  • Real elements in canvas become:
    • searchable, accessible, selectable, translatable, inspectable
  • Enables moving accessibility and semantic UI into canvas workflows:
    • accessible text inside WebGL/WebGPU-like scenes
    • forms inside canvas
    • highlights/copy/paste, autofill support, etc.
  • Mentions community demos and library support (e.g., 3JS native support).

Basic API flow (as described)

  • Set layout subtree on the canvas element
  • On paint:
    • call something like drawElementImage(...)
    • apply returned transforms back into element styles
  • Mentions equivalent approaches for WebGL/WebGPU texture painting.

“Lightning round” additional platform features

A quick list of other notable updates:

  • moveBefore / DOM state preserving move (Chrome 133) Keeps content alive during DOM reparenting (videos keep playing, iframes don’t reload, animations don’t restart, focus remains).

  • fit-text (coming soon) Scales text so lines fit exact width of container.

  • text-box + textbox-trim / textbox-edge Trims space above/below text for better vertical centering.

  • Gap decorations (Chrome 149) Style grid/flex gaps with row-rule and column-rule (avoids borders/pseudo-elements hacks).

  • Scrollbar-aware viewport units (Chrome 145) VW/VH calculations adjust for scrollbar presence using scroll bar gutter / overflow conditions.

  • Expose pseudo-elements in JS Event pseudo-target information via JS for click etc.

Tooling / adoption support

  • Announcement of Modern Web Guidance
    • Curated, AI-ready docs and best practices injected into AI workflows
    • Internally tested/benchmarked and includes compatibility/fallback guidance.

Main speakers / sources

  • Yuna — Developer Relations Engineer (leading efforts on Web APIs for high-quality web experiences)
  • Ramus — Chrome Developer Relations (CSS-focused: scrolling interactions, animations, intersections)
  • Brahmis — Mentioned as a colleague (view transitions toolkit creator; also referenced for related view transition tooling)

Original video