Web-Plattform-Features, die jeder Entwickler 2026 kennen sollte

Vor fünf Jahren bedeutete “die Web-Plattform” ein <div> und ein fetch. Im Jahr 2026 bedeutet es einen grafikfähigen, GPU-programmierbaren, dateisystembewussten, multiprocess-Runtime mit einer reichhaltigeren Komponentenbibliothek als die meisten Betriebssysteme 2015 lieferten. Die folgenden Features haben alle den Punkt erreicht, an dem man sie “produktionsreif ohne Polyfill einsetzen kann” — und sie verändern, was eine Web-App sein kann.

View Transitions API

Der einzelne größte UX-Gewinn der letzten Jahre. View Transitions lassen Sie zwischen DOM-Zuständen mit einem Funktionsaufruf animieren, und der Browser übernimmt die Interpolation für Sie.

// Vorher: instant, abrupt
document.body.innerHTML = newHTML;

// Nachher: sanftes Crossfade
document.startViewTransition(() => {
  document.body.innerHTML = newHTML;
});

Das war’s. Der Browser nimmt einen Schnappschuss des alten Zustands, wendet den neuen an und crossfaded. Mit ein paar Zeilen CSS können Sie einzelne Elemente animieren (die Shared Element Transition):

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

::view-transition-old(.card),
::view-transition-new(.card) {
  animation-duration: 0.4s;
}

Es funktioniert für SPAs (Routenänderungen), MPAs (Seitenläufe mit einem meta-Tag und gleicher-Quell-Navigation) und Vue/React/Svelte-Router-Übergänge. Die Browser-Unterstützung erreichte 2024 die-browserübergreifende Stabilität und ist jetzt der empfohlene Weg, um Seitenumbrüche in einer neuen App zu handhaben. Das letzte Mal, als ich eine handkodierte FLIP-Animation von Hand schrieb, war die View-Transitions-Spezifikation ein Entwurf.

Popover-API

Das Popover, Dialog und <select>-Elemente waren immer ein Durcheinander aus Focus-Traps, Escape-Key-Handling, Light-Dismiss-Verhalten und ARIA. Die Popover-API standardisiert alles.

<button popovertarget="menu">Menü öffnen</button>
<ul id="menu" popover>
  <li>Ausschneiden</li>
  <li>Kopieren</li>
  <li>Einfügen</li>
</ul>

Das ist ein voll zugängliches, auf der obersten Schicht liegendes, light-dismissing, Escape-Key-schließendes Popover-Menü. Kein JavaScript. Kein z-index-Krieg. Das popover-Attribut bringt das Element in die obere Schicht des Browsers (über allen anderen Inhalten, einschließlich modaler Dialoge anderer Komponenten), und der Browser übernimmt Focus, Escape und Klick-Außen-Verhalten automatisch.

Drei Modi:

• popover (auto) — Light Dismiss, mehrere Popover können offen sein.
• popover="manual" — nur programmatisches Öffnen/Schließen, kein Light Dismiss.
• <dialog> — modal, mit Hintergrund, fängt Focus, erfordert explizites Schließen.

Für Dropdowns, Tooltips, Aktionsmenüs und Picker: popover. Für modale Dialoge, die die Interaktion blockieren: <dialog>. Hören Sie auf, Dropdowns mit position: absolute` und einem Klick-Außen-Listener zu bauen — das ist das Muster von 2019.

WebGPU Compute-Shader

WebGPU war seit 2023 “fast bereit”, aber die Compute-Shader-Geschichte reifte erst 2025. Sie können jetzt beliebige GPU-Berechnungen im Browser ausführen, auf jedem modernen Betriebssystem, mit einer gesunden API.

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();
const shader = device.createShaderModule({ code: computeWGSL });
const pipeline = await device.createComputePipeline({ layout: 'auto', compute: { module: shader, entryPoint: 'main' } });
// ... Buffer binden, dispatchen, Ergebnisse lesen

Was Sie damit tun können:

• Dev-Tools. Ein Regex-Tester, der Millionen von Matches auf der GPU ausführt. Ein JSON-Formatter, der eine 500MB-Datei in 200ms parst. Ein Diff-Werkzeug, das zwei 100MB-Dateien in unter einer Sekunde vergleicht.
• Local-first-Apps. Bildverarbeitung, Video-Transcodierung, ML-Inferenz — alles im Browser, kein Server.
• Visualisierung. Alles, was zuvor “wäre 60fps, wenn ich es auf der GPU bekommen könnte”, kann jetzt auf der GPU sein.

WebGPU erfordert HTTPS in Produktion (die API ist hinter einem sicheren Kontext geschützt, wie crypto.subtle). Es erfordert auch einen aktuellen Browser und eine echte GPU — ein Fallback auf WebGL2 oder einen reinen JS-Pfad ist für alte Hardware immer noch notwendig.

File System Access API

Die File-API gibt Ihnen einen Schnappschuss einer Datei, die der Benutzer hereingezogen hat. Die File System Access API gibt Ihnen einen live-Handle, den Sie lesen und zurückschreiben können.

const handle = await window.showSaveFilePicker({
  suggestedName: 'config.json',
  types: [{ description: 'JSON', accept: { 'application/json': ['.json'] } }],
});
const writable = await handle.createWritable();
await writable.write(JSON.stringify(data, null, 2));
await writable.close();

Sie können auch eine Datei wieder öffnen, einen FileSystemFileHandle erhalten und ihn über Sitzungen hinweg mit IndexedDB verwenden (der Handle ist serialisierbar). Für Dev-Tools ist das der Unterschied zwischen “Datei nach jeder Änderung herunterladen” und “direkt vor Ort bearbeiten”.

Browser-Unterstützung: Chrome und Edge seit 2023, Safari und Firefox ab 2025. Für nicht unterstützte Browser: Fallback auf Blob und <a download> — das Feature lässt sich sauber erkennen.

CSS Subgrid

display: grid war die einzelne größte Layout-Verbesserung in einem Jahrzehnt. subgrid ist die zweitgrößte. Es lässt ein Grid-Element am Raster des Elternteils teilnehmen:

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
}

Jetzt hat jede Karte einen Header, Body und Footer in gleicher Höhe, ohne Flexbox-Hack oder magische Zahl. Subgrid kam 2023-2024 in alle drei Engines und ist ohne Fallback sicher einsetzbar.

Die pragmatische Zusammenfassung

Wenn Sie vor ein paar Jahren mit der Web-Entwicklung begonnen haben, haben Sie vielleicht nicht bemerkt, wie sich die Plattform verändert hat. Der Reflex “für alles eine Bibliothek verwenden” — Animationen, Dropdowns, Datei-Chooser, Modale, sogar Layout — wird zunehmend obsolet. Nativ ist schneller, kleiner, zugänglicher und bricht seltener bei einem Framework-Upgrade.

Das nächste Mal, wenn Sie npm install für ein 50KB-Paket machen wollen, das der Browser in 20 Zeilen HTML lösen kann: Prüfen Sie zuerst die Plattform. Die Antwort ist zunehmend “ja, der Browser kann das”.

Ein schneller Test: Jedes Dev-Tool auf DevSpeedTools läuft vollständig client-seitig unter Verwendung derselben Plattform-Features (Web Crypto, File System Access, die Popover-API, CSS subgrid). Wenn Sie einen JSON-Formatter mit null npm-Abhängigkeiten bauen können, können Sie die meisten Dinge bauen.