Veröffentlicht: 2. März 2026
Willkommen zur Ausgabe des Baseline-Digest vom Januar 2026. Jeden Monat stellen wir die Webplattformfunktionen vor, die in Baseline neue Meilensteine erreicht haben. So können Sie nachvollziehen, welche Tools Sie heute in Ihren Projekten verwenden können.
Der Januar war ein spannender Start ins neue Jahr. Mehrere wichtige APIs und CSS-Einheiten wurden in die Kategorie „Neu verfügbar“ verschoben und eine wichtige Layoutverbesserung ist jetzt allgemein verfügbar.
Neu verfügbare grundlegende Funktionen
Die folgenden Webfunktionen sind seit Januar 2026 als Baseline verfügbar.
Umstellung auf Active View
Die CSS-Pseudoklasse :active-view-transition ist jetzt in Baseline Newly available enthalten. Mit diesem Selektor können Entwickler das Stammelement eines Dokuments während einer Ansichtsübergang gezielt ansprechen und gestalten. Das ist besonders nützlich, um globale Stile oder Anpassungen anzuwenden, die nur während des Übergangszeitraums vorhanden sein sollen, z. B. um die Hintergrundfarbe des Übergangsoverlays zu ändern oder den Z-Index bestimmter Ebenen anzupassen, um einen reibungslosen visuellen Ablauf zu gewährleisten.
JavaScript-Module in Service Workern
Service Worker unterstützen jetzt JavaScript-Module in allen wichtigen Browser-Engines. Wenn Sie die Option type: 'module' beim Aufrufen von navigator.serviceWorker.register() festlegen, können Sie Standardanweisungen für import und export in Ihrem Service Worker-Skript verwenden. Dadurch werden Service Worker an moderne JavaScript-Entwicklungspraktiken angepasst. Das ermöglicht eine bessere Codeorganisation, ein einfacheres Abhängigkeitsmanagement und die Möglichkeit, Code zwischen dem Hauptthread und dem Hintergrund-Worker zu teilen.
Navigation API
Die Navigation API ist eine moderne, speziell für die Anforderungen von Single-Page-Anwendungen (SPAs) entwickelte Alternative zur Legacy History API. Sie bietet eine zentrale Möglichkeit, alle Arten von Navigationsaktionen zu initiieren, abzufangen und zu verwalten, einschließlich der Aktionen, die durch die Schaltflächen „Zurück“ und „Vorwärts“ des Browsers ausgelöst werden. Mit Ereignissen wie Maps können Entwickler ein reibungsloseres clientseitiges Routing mit weniger Boilerplate-Code implementieren. Weitere Informationen dazu, wie sich die Entwicklung für das Web dadurch ändert, finden Sie in unserem Blogpost Modern client-side routing: the Navigation API.
rcap CSS-Einheit
Die Einheit rcap ist eine längenbezogene Einheit, die sich auf die Schriftart des Stammelements bezieht und der „Versalhöhe“ (der nominalen Höhe von Großbuchstaben) der Schriftart des Stammelements entspricht. So lassen sich präzise typografische Layouts erstellen, die relativ zur primären Schriftart der Website skaliert werden und nicht nur zur Schriftgröße.
rch CSS-Einheit
Ähnlich wie die ch-Einheit, aber relativ zum Stammelement, stellt die rch-Einheit die Breite – oder genauer gesagt, das Vorschubmaß – des Glyphen „0“ (Null) in der Schriftart des Stammelements dar. Sie eignet sich ideal für die Erstellung von Layouts, die von der Zeichenbreite abhängen, z. B. für einen Container, der genau für eine bestimmte Anzahl von Zeichen in der Schriftart des Stammelements passen soll.
rex CSS-Einheit
Die rex-Einheit ist die root-relative Version von ex und entspricht der x-Höhe der Schriftart des Root-Elements. Diese Einheit ist besonders nützlich für die vertikale Ausrichtung und die Größenanpassung von Elementen relativ zur Höhe von Kleinbuchstaben in der primären Typografie Ihres Dokuments.
ric CSS-Einheit
Die Einheit ric ist das root-relative Gegenstück zur Einheit ic. Sie entspricht dem „ideografischen“ Vorschubmaß (in der Regel die Breite oder Höhe eines CJK-Ideogramms) der Schriftart des Stammelements. Dies ist ein wichtiges Tool für Entwickler, die internationalisierte Layouts erstellen, insbesondere für solche, die chinesische, japanische oder koreanische Schriftzeichen verwenden.
Grundlegende, weitgehend verfügbare Funktionen
Die folgenden Webfunktionen sind seit Januar 2026 als Baseline Widely Available verfügbar.
CSS-Eigenschaft display mit zwei Werten
Die Syntax mit mehreren Schlüsselwörtern für die display-Eigenschaft ist jetzt allgemein verfügbar. Mit diesem Update können Sie sowohl den „äußeren“ als auch den „inneren“ Anzeigetyp eines Felds explizit definieren. Anstelle des vorkomponierten inline-flex können Sie beispielsweise display: inline flex verwenden. Damit wird verdeutlicht, ob ein Element am Block- oder Inline-Flow (dem äußeren Typ) beteiligt ist und wie seine untergeordneten Elemente angeordnet werden (dem inneren Typ, z. B. flex oder grid). Diese Änderung macht die CSS-Layout-Engine für Entwickler logischer und konsistenter.
Die CSS-Eigenschaft animation-composition
Mit der animation-composition-Eigenschaft wird festgelegt, wie mehrere Animationen interagieren sollen, wenn sie sich gleichzeitig auf dieselbe Eigenschaft auswirken. Sie können zwischen replace, add und accumulate wählen und so genau festlegen, wie komplexe, mehrschichtige Animationen berechnet werden.
Array durch Kopieren
JavaScript enthält jetzt Methoden, mit denen Sie Arrays transformieren können, ohne die ursprünglichen Daten zu ändern. Methoden wie toReversed(), toSorted() und toSpliced() geben eine neue, geänderte Kopie des Arrays zurück, was einen funktionaleren und sichereren Programmierstil fördert.
Bei der Optimierung mitwirken
Lassen Sie uns wie immer wissen, wenn wir etwas Baseline-bezogenes übersehen haben. Wir werden dafür sorgen, dass es in einer zukünftigen Ausgabe berücksichtigt wird. Wenn Sie Fragen haben oder Feedback zu Baseline geben möchten, können Sie ein Problem in unserem Issue Tracker melden.