Upgrade to Pro — share decks privately, control downloads, hide ads and more …

What’s New in Web? 2026 Edition

What’s New in Web? 2026 Edition

Christian is a member of the World Wide Web’s architecture board, the Technical Architecture Group (TAG) of W3C. As such, he has insights into what’s going on in the web platform. In his session, you'll gain insights into the latest discussions among standards bodies, browser vendors, and web developers. And you have the opportunity to report your wishes back to the Web’s architecture board. Don't miss this opportunity to stay updated on the forefront of web technologies.

Avatar for Christian Liebel

Christian Liebel PRO

May 07, 2026

More Decks by Christian Liebel

Transcript

  1. function example() { using resource = new Resource(); return resource.getValue();

    } What’s New in Web? 2026 Edition using class Resource { value = Math.random(); #isDisposed = false; getValue() { if (this.#isDisposed) { throw new Error("Already disposed"); } return this.value; } [Symbol.dispose]() { this.#isDisposed = true; console.log("Resource disposed"); } } https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/using
  2. Method Safe Idempotent Body GET ✅ ✅ ❌ POST ❌

    ❌ ✅ PUT ❌ ✅ ✅ DELETE ❌ ✅ ❌ What’s New in Web? 2026 Edition HTTP Methods
  3. Method Safe Idempotent Body GET ✅ ✅ ❌ ✅ ✅

    ✅ POST ❌ ❌ ✅ PUT ❌ ✅ ✅ DELETE ❌ ✅ ❌ What’s New in Web? 2026 Edition HTTP Methods
  4. Method Safe Idempotent Body GET ✅ ✅ ❌ QUERY ✅

    ✅ ✅ POST ❌ ❌ ✅ PUT ❌ ✅ ✅ DELETE ❌ ✅ ❌ What’s New in Web? 2026 Edition HTTP Methods
  5. const counter = new Signal.State(0); const isEven = new Signal.Computed(()

    => (counter.get() & 1) == 0); const parity = new Signal.Computed(() => isEven.get() ? "even" : "odd"); // A library or framework defines effects based on other Signal primitives declare function effect(cb: () => void): (() => void); effect(() => element.innerText = parity.get()); // Simulate external updates to counter... setInterval(() => counter.set(counter.get() + 1), 1000); What’s New in Web? 2026 Edition Signals
  6. Second Implementer navigator.serial.getPorts() .then((ports) => { // Initialize the list

    of available ports with `ports` on page load. }); What’s New in Web? 2026 Edition Web Serial API https://www.theregister.com/2026/04/14/firefox_nightly_web_serial/
  7. Dark Color Scheme { "theme_color": "blue", "background_color": "white", "color_scheme_dark": {

    "theme_color": "red", "background_color": "black" } } What’s New in Web? 2026 Edition Web App Manifest Manifest Localization { "lang": "de", "name": "Donau", "name_localized": { "sr-Latn-RS": "Dunav" } }
  8. <button fancy>Test</button> <pre src="src.js"></pre> <video start-at="0:05"> </video> What’s New in

    Web? 2026 Edition Custom Attributes https://github.com/WICG/webcomponents/issues/1029
  9. aka Masonry What’s New in Web? 2026 Edition CSS Grid

    Lanes https://developer.chrome.com/blog/masonry-update .blog { display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 2rem; }
  10. .sudoku { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr);

    gap: 6px; column-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px); column-rule-style: solid; column-rule-color: var(--secondary); row-rule-width: repeat(2, 1px) 4px repeat(2, 1px) 4px repeat(2, 1px); row-rule-style: solid; row-rule-color: var(--secondary); } What’s New in Web? 2026 Edition CSS Gap Decorations https://developer.chrome.com/blog/gap-decorations
  11. Baseline Newly available October 2025 (single-document) What’s New in Web?

    2026 Edition View Transitions https://view-transitions.chrome.dev/ DEMO
  12. User needs come before the needs of web page authors,

    which come before the needs of user agent implementors, which come before the needs of specification writers, which come before theoretical purity. What’s New in Web? 2026 Edition Priority of Constituencies https://www.w3.org/TR/design-principles/#priority-of-constituencies