Breit verfügbare API März 2026 für das Web

12 Browser-APIs ab März 2026 weit verbreitet verfügbar: Was Sie in Produktion einsetzen sollten

Im März 2026 haben 12 Browser-APIs den Status "weit verbreitet verfügbar" erreicht – das bedeutet stabile Unterstützung in allen gängigen Browsern für mindestens 2,5 Jahre. Dies vereinfacht Implementierungsentscheidungen: Eine Prüfung von Can I Use und Nutzer-Metriken bestätigt die Einsatzbereitschaft für den Produktivbetrieb. Der Fokus liegt auf CSS-Eigenschaften, HTTP-Headern und JavaScript-Events zur Optimierung von Performance, Typografie und Datenverwaltung.

Liste der wichtigsten Funktionen:

• Clear-Site-Data
• contain-intrinsic-size
• @counter-style
• Geräteorientierungs-Events
• hyphenate-character
• hyphens
• image-set()
• <link rel="modulepreload">
• Overflow-Media-Queries
• Storage-Manager
• Update-Frequency-Media-Query
• subgrid

Clear-Site-Data: Vollständige Zurücksetzung lokaler Daten

Der HTTP-Header Clear-Site-Data ermöglicht es einem Server, das Löschen von Browser-Speicher zu initiieren: Cache, Cookies, localStorage, IndexedDB, Service-Worker. Er wird bei Logout, Benutzerwechsel oder Wiederherstellung nach beschädigtem Cache verwendet.

Syntax und Direktiven

Direktiven werden in doppelten Anführungszeichen angegeben, durch Kommas getrennt:

Clear-Site-Data: "cache"
Clear-Site-Data: "cache", "cookies"
Clear-Site-Data: "*"

Wichtige Direktiven:

• "cache" – HTTP-Cache, bfcache, WebGL-Shader.
• "cookies" – Cookies und HTTP-Authentifizierung für die Domain und Subdomains.
• "storage" – localStorage, sessionStorage, IndexedDB, Service-Worker.
• "executionContexts" (experimentell) – Neuladen von Kontexten.
• "clientHints" (experimentell) – Zurücksetzen von Client-Hints.
• "prefetchCache", "prerenderCache" (experimentell) – Speculation-Rules.
• "*" – alle Datentypen.

Anwendungsbeispiele

Logout mit vollständiger Bereinigung:

HTTP/1.1 200 OK
Clear-Site-Data: "cache", "cookies", "storage", "executionContexts", "prefetchCache", "prerenderCache"
Content-Type: text/html

Nur Cookies:

Clear-Site-Data: "cookies"

Im Produktivbetrieb löst dieser Header Probleme mit verbleibenden Daten nach POST /logout, einschließlich Service-Worker-Konflikten und gecachten Bundles. Wiederherstellungsseiten mit "cache", "storage" stellen den Zustand schnell ohne DevTools wieder her.

contain-intrinsic-size: Layout-Stabilisierung mit Containment

Die Eigenschaft contain-intrinsic-size legt Fallback-Größen für Elemente mit contain: size oder content-visibility: auto fest. Sie verhindert Reflow beim Rendern außerhalb des Viewports, indem Höhe/Breite für das Scrollen fixiert werden.

Syntax

contain-intrinsic-size: none;
contain-intrinsic-size: 1000px;
contain-intrinsic-size: 300px 200px;
contain-intrinsic-size: auto 320px;
contain-intrinsic-size: auto 400px auto 250px;
contain-intrinsic-size: auto none;

Werte:

• none – keine Substitution.
• <length> – feste Größe.
• auto <length> – merkt sich die tatsächliche Größe nach dem ersten Rendering.
• auto none – fällt auf none zurück, wenn kein Speicher verfügbar ist.

Beispiele

News-Feed:

.feed-item {
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
}

Produktkarte:

.product-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 360px;
}

Diese Eigenschaft eliminiert 'springendes' Scrollen: Ohne sie haben unsichtbare Blöcke eine Höhe von null, was Neuberechnungen beim Scrollen verursacht. Der auto-Modus optimiert nach dem ersten Rendering.

@counter-style: Benutzerdefinierte Listenstile

Die @counter-style-Regel definiert benutzerdefinierte Nummerierungsstile für Listen mithilfe von Deskriptoren: system, symbols, additive-symbols. Sie erweitert integrierte Stile wie decimal, disc usw.

Syntax und Deskriptoren

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

Hauptdeskriptoren:

• system: cyclic, numeric, alphabetic, fixed, additive.
• symbols: Strings/Bilder für Markierungen.
• additive-symbols: Gewicht-Symbol-Paare für römische Ziffern.
• prefix/suffix: Rahmung.
• range: erlaubte Werte.
• pad: Mindestlänge (Nullauffüllung).
• fallback: Fallback-Stil.

Beispiele

Eingekreiste Buchstaben:

@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}

.items {
  list-style: circled-alpha;
}

Rakete für Listen:

@counter-style rocket {
  system: cyclic;
  symbols: "\1F680";
  suffix: " ";
}

ul.features {
  list-style: rocket;
}

Für Abschnitte:

@counter-style chapter {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  suffix: ". ";
}

.article h2::before {
  counter-increment: section;
  content: counter(section, chapter);
}

Im Produktivbetrieb vereinfacht @counter-style die Lokalisierung von Nummerierungen und minimiert JS/Backend-Logik. Stellen Sie Fallback und speak-as für Barrierefreiheit sicher.

Geräteorientierungs-Events und weitere Funktionen

Geräteorientierungs-Events liefern Daten zur Geräteausrichtung und Beschleunigung über DOM-Events. Die Liste wird ergänzt durch: hyphenate-character und hyphens für Silbentrennung, image-set() für responsive Bilder, <link rel="modulepreload"> für Modul-Preloading, Overflow-/Update-Frequency-Media-Queries für Performance-Anpassung, Storage-Manager für Quoten, subgrid für Grids.

Wichtige Erkenntnisse

• Weit verbreitet verfügbar – mindestens 2,5 Jahre stabile Unterstützung in allen Browsern.
• Prüfen Sie Nutzer-Metriken und Can I Use vor der Implementierung.
• Clear-Site-Data ist essenziell für Logout und Wiederherstellung.
• contain-intrinsic-size stabilisiert das Scrollen mit content-visibility.
• @counter-style für benutzerdefinierte Typografie ohne JS.

— Editorial Team