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

Was ist neu im Web? 2026 Edition

Avatar for Christian Liebel Christian Liebel PRO
June 30, 2026
3

Was ist neu im Web? 2026 Edition

Als Mitglied des Web-Architekturboards – der Technical Architecture Group (TAG) des W3C – hat Christian einen guten Überblick über alles, was sich gerade im Web bewegt. In seinem Talk erhalten Sie Einblicke in die neuesten Entwicklungen und Diskussionen zwischen Standardisierungsgremien, Browserherstellern und Webentwicklern von Built-in AI bis WebAssembly. Verpassen Sie nicht diese Gelegenheit, sich über die neuesten Entwicklungen im Bereich der Webtechnologien auf dem Laufenden zu halten und nutzen Sie die Chance, Ihr Feedback an die W3C-Gremien zu bringen.

Avatar for Christian Liebel

Christian Liebel PRO

June 30, 2026

More Decks by Christian Liebel

Transcript

  1. Hello, it’s me. What’s New in Web? Christian Liebel W3C

    WebApps, WebML & TAG christian.liebel @thinktecture.com Angular, PWA & Generative AI Microsoft MVP & Google GDE 2026 Edition
  2. 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
  3. 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
  4. Method Safe Idempotent Body GET ✅ ✅ ❌ POST ❌

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

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

    ✅ ✅ POST ❌ ❌ ✅ PUT ❌ ✅ ✅ DELETE ❌ ✅ ❌ What’s New in Web? 2026 Edition HTTP Methods
  7. What’s New in Web? 2026 Edition Device Bound Session Credentials

    https://developer.chrome.com/docs/web-platform/device-bound-session-credentials
  8. 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/
  9. <span popover="hint" id="my-hovercard"> This is the hovercard </span> <a interestfor="my-hovercard"

    href="..."> Hover to show the hovercard </a> What’s New in Web? 2026 Edition Interest Invokers https://open-ui.org/components/interest-invokers.explainer/
  10. <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
  11. 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; }
  12. .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
  13. Baseline Newly available October 2025 (single-document) What’s New in Web?

    2026 Edition View Transitions https://view-transitions.chrome.dev/ DEMO
  14. – Grants web apps access to the device’s CPU, GPU

    and Neural Processing Unit (NPU) – In specification by the WebML Working Group at W3C – Implementation in progress in Chromium (behind a flag) – Even better performance compared to WebGPU What’s New in Web? 2026 Edition WebNN https://webnn.io
  15. – Initiative by Google Chrome – Exploratory APIs for local

    experiments and use case determination – Downloads AI models into Google Chrome (offline capable) – Models are shared across origins – Uses native APIs directly (full performance) What’s New in Web? Built-in AI https://developer.chrome.com/docs/ai/built-in 2026 Edition
  16. What’s New in Web? 2026 Edition WebMCP – Allows websites

    to expose tools to the browser or external agents – Joint effort by Microsoft and Google https://github.com/webmachinelearning/webmcp
  17. 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