Neuigkeiten für die Webversion

Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Rachel Andrew

Veröffentlicht: 20. Mai 2025

Bei der Google I/O 2025 wurden in der Keynote „Neuerungen im Web“ alle Baseline-Ankündigungen vorgestellt. Außerdem wurden einige der Funktionen gezeigt, die in diesem Jahr Teil von Baseline geworden sind. Es war ein fantastisches Jahr für das Web und für Baseline. In diesem Beitrag finden Sie eine Zusammenfassung aller erwähnten Themen mit allen Links, über die Sie mehr erfahren können.

Web-Dashboard und Web-Funktionen

2024 haben wir die erste Version des Dashboards für die Webplattform angekündigt. Darin wird der Datensatz zu Web-Funktionen verwendet, sodass Sie alle Funktionen kennenlernen können, die Teil von Baseline sind.

Die Daten zu Webelementen sind jetzt vollständig und alle Funktionen der Plattform sind kartiert. Wenn jeden Monat neue Funktionen zu Baseline hinzukommen, werden die Daten aktualisiert und im Dashboard angezeigt.

Tools zur Ermittlung Ihres eigenen Ziels für den Vergleich

Sie können Ihre Browserunterstützungsrichtlinie auf das bewegliche Ziel „Baseline Widely available“ (Weitgehend verfügbarer Baseline) stützen, wie es die britische Agentur Clearleft tut. Sie können aber auch ein festes Ziel basierend auf einem Baseline-Jahr festlegen. Sie können jetzt Ihre eigenen Nutzerdaten zusammen mit den Daten zu Web-Funktionen verwenden, um das beste Targeting für Sie zu ermitteln.

Letztes Jahr auf der I/O haben wir angekündigt, dass RUMvision Baseline in sein Produkt einbinden wird. Diese Integration ist jetzt verfügbar.

Da Ihre RUM-Daten verwendet werden, können Sie anhand dieser Daten und nicht eines globalen Durchschnittswerts ermitteln, welches Referenzjahr Sie verwenden sollten. Außerdem können Sie so herausfinden, ob „Baseline – Weit verbreitet“ für Sie sinnvoll ist.

Mit dem neuen Google Analytics-Tool zum Überprüfen von Baselines können Sie anhand Ihrer Google Analytics-Daten genau sehen, welcher Prozentsatz Ihrer Nutzer jedes Baseline-Ziel unterstützt.

Das sind nur zwei von vielen Tools, mit denen Sie Ihre echten Nutzerdaten auf Baseline abbilden können.

Die Web DX Community Group hat vor Kurzem eine Erweiterung für Netlify veröffentlicht, die Unterstützung für verschiedene Baseline-Jahre und eine breite Verfügbarkeit auf Ihren Websites bietet. So können Sie leichter entscheiden, auf was Sie Ihre Build-Tools ausrichten möchten. Bald verfügbar sind Integrationen mit dem RUM-Produkt Observatory von Cloudflare und Contentsquare.

Daten in Ihre eigenen Tools einbinden

Die Daten zu Web-Funktionen sind offen und für Ihre eigenen Integrationen verfügbar. Wir möchten das vereinfachen.

Verwenden Sie die Web Platform Dashboard API oder rufen Sie die Webfeature-Daten direkt aus dem npm-Paket ab.

Mit dem Modul baseline-browser-mapping der W3C WebDX Community Group können Sie Browserversionen jetzt einem Baseline-Ziel zuordnen. Dieses Modul kann entweder in einer serverseitigen JavaScript-Umgebung oder durch Herunterladen von JSON- oder CSV-Dateien verwendet werden, die täglich aus dem Repository aktualisiert werden.

Diese Daten enthalten Zuordnungen nicht nur für die wichtigsten Browser der Baseline, sondern auch für Downstream-Browser wie Samsung Internet, Opera, UC Browser und Android Webview.

Informationen dazu, ob Funktionen von Ihrem Baseline-Ziel unterstützt werden

Diese Informationen finden Sie jetzt auf den meisten MDN- und Can I Use-Seiten, im Web Platform Dashboard sowie in Artikeln auf web.dev und CSS Tricks. Dazu müssen Sie jedoch den Support kontaktieren. Es wäre viel nützlicher, wenn Sie während des Codierens und in allen anderen verwendeten Tools Informationen zur Baseline sehen würden.

Viele wichtige Tools unterstützen jetzt Baselines – entweder standardmäßig oder mit nur wenigen Schritten.

browserslist-config-baseline

Viele Tools wie Babel und PostCSS verwenden browserslist, um zu bestimmen, welche Browser unterstützt werden sollen.

Gemeinsam mit der WebDX-CG und Mitgliedern der Community hat das Chrome-Team ein neues Tool namens browserslist-config-baseline veröffentlicht. So können Sie Ihre Browserlistenziele in Baseline-Begriffen wie „weitgehend verfügbar“ oder „Baseline-Jahre“ konfigurieren.

So kann jedes Tool, das ein Browserslist-Ziel verwendet, jetzt in Bezug auf die Baseline ausgedrückt werden.

Weitere Informationen finden Sie unter Baseline mit browserslist verwenden.

Baseline in Lintern – ESLint und Stylelint

Die Verwendung von Baseline mit Lintern wurde vor Kurzem durch einige neue Tools im Linter-Bereich ermöglicht, angefangen mit ESLint für CSS.

Die Baseline-ESLint-Version hat eine use-baseline-Regel. Sie können dies als bevorzugtes Baseline-Ziel festlegen. Sie werden dann gewarnt, wenn Sie Funktionen verwenden, die neuer als Ihr Ziel sind. Sie können festlegen, wie diese Warnungen behoben werden sollen: Entweder durch Ersetzen der Funktion durch Primitive oder durch Unterdrücken der Linter-Warnung. Letzteres ist eine völlig legitime Lösung, wenn Sie wissen, dass Sie eine innovative Funktion sicher verwenden, z. B. wenn es sich um eine progressive Verbesserung handelt.

Standardmäßig warnt ESLint nicht, wenn neuere Funktionen in @supports-Blöcken verwendet werden, da sie von nicht unterstützten Browsern ohnehin nicht ausgewertet werden.

Für das Linieren von HTML gibt es auch ein Community-Plug-in namens html-eslint.

Stylelint unterstützt offiziell ein Plug-in namens stylelint-plugin-use-baseline. Diese Regel verhält sich genau wie die ESLint-Regel für CSS, wird aber stattdessen mit Stylelint ausgeführt.

Viele Linter haben auch IDE-Plug-ins, sodass Sie beim Codieren sofort Feedback zum Baseline-Status erhalten, indem Sie z. B. gestrichelte Unterstreichungen sehen.

Baseline in VS Code und JetBrains WebStorm

Viele IDEs bieten schon lange die Möglichkeit, den Mauszeiger auf eine Funktion im Editor zu bewegen und eine Liste der unterstützten Browserversionen aufzurufen.

Es kann jedoch ziemlich schwierig sein, zu verstehen, ob diese Funktion tatsächlich sicher zu verwenden ist. Sie müssen sich überlegen, ob wichtige Browser in dieser Liste fehlen und wie neu diese Browserversion ist.

Um dieses Problem zu beheben, haben wir mit der beliebtesten IDE zusammengearbeitet, die von Millionen von Webentwicklern verwendet wird: VS Code. So können wir Baseline-Daten direkt in diese Hovercards einbinden.

Wenn Sie den Mauszeiger auf eine Funktion bewegen, sehen Sie jetzt nur noch, ob sie als Baseline gilt und wie lange, oder ob es wichtige Browser gibt, die sie noch nicht vollständig implementiert haben.

Zu den unterstützten Funktionen gehören CSS-Eigenschaften, HTML-Elemente und HTML-Attribute. Weitere Informationen finden Sie unter Visual Studio Code unterstützt jetzt Baseline.

Durch diese Integration profitieren auch alle auf VS Code basierenden IDEs von diesen Kurzinfos.

Außerdem können wir bekannt geben, dass JetBrains Hovercards in seiner WebStorm-JavaScript- und TypeScript-IDE implementiert.

Das Web entwickelt sich schneller denn je

Wir hoffen, dass Baseline Ihnen dabei hilft, von der Tatsache zu profitieren, dass das interoperable Web schneller als je zuvor voranschreitet.

Im Webplattform-Dashboard sehen Sie alle Funktionen, die seit der Google I/O 2024, also in den letzten zwölf Monaten, als „Baseline Newly“ (Neu als Standard) verfügbar sind.

Es gibt auch eine Reihe von Funktionen, die sehr bald als Baseline Newly verfügbar sein werden, da sie im Interop 2025-Projekt enthalten sind. Informationen zu allen enthaltenen Funktionen finden Sie unter Interop2025: Ein weiteres Jahr mit Verbesserungen der Webplattform.

Modi für das Schreiben in Querformat

Eine Funktion wurde bereits als „Neu verfügbar“ in die Baseline aufgenommen: die Werte sideways-rl und sideways-lr für die CSS-Eigenschaft writing-mode. Wenn Sie den vertikalen Schreibmodus nur aus Layoutgründen verwenden, sind die Werte für die Querformate wahrscheinlich die richtigen.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

Ankerpositionierung

Die Ankerplatzierung wurde in Chrome 125 eingeführt. So können Sie die Position eines Elements an einen Anker binden, z. B. wenn Sie eine Kurzinfo mit einer Schaltfläche öffnen.

Es ist jetzt in Interop 2025 enthalten, sodass es dieses Jahr in Baseline aufgenommen werden sollte.

Core Web Vitals: LCP und INP

LCP API

Event Timing API (für INP)

Mit Web Vitals können Sie die Nutzerfreundlichkeit Ihrer Website beurteilen und Möglichkeiten zur Verbesserung ermitteln. Die Web Vitals-Initiative soll die Situation vereinfachen und Webmastern helfen, sich auf die wichtigsten Messwerte zu konzentrieren: die Core Web Vitals.

Interop 2025 umfasst die Messwerte Largest Contentful Paint (LCP) und Interaction to Next Paint (INP). Dazu werden die LargestContentfulPaint API und die Event Timing API plattformübergreifend implementiert.

Verbesserungen am <details>-Element

Das <details>-Element selbst ist bereits allgemein verfügbar. Es wurde in Interop 2025 aufgenommen, da es eine Reihe von Funktionen gibt, die Offenlegungs-Widgets mit <details> nützlicher machen.

Das <details>-Element enthält ein <summary>-Element, das der Teil ist, der auf der Seite sichtbar ist, wenn das <details>-Element minimiert ist. Außerhalb des <summary>-Elements befindet sich der Inhalt des <details>-Elements. Dieser ist ausgeblendet, bis der Nutzer auf die Zusammenfassung klickt.

Unter anderem wird bei Interop 2025 die Interoperabilität durch das Ausblenden von Inhalten mit content-visibility statt display verbessert. Das bedeutet, dass die Inhalte nicht gerendert werden, wenn sie nicht maximiert werden.

Das Pseudo-Element ::marker ist ebenfalls Teil der Interop 2025-Arbeit. Mit dem Pseudo-Element ::marker können Sie das Dreieck zum Aus-/Einblenden des Elements <summary> gestalten.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

Dann folgt ein weiteres Pseudo-Element: ::details-content.

::details-content steht für den Inhalt, also den Teil des Details-Elements, der maximiert und minimiert werden kann und den Sie stylen können.

[open]::details-content {
  border: 5px dashed hotpink;
}

Außerdem gibt es einige nützliche Verbesserungen, z. B. das automatische Maximieren des <details>-Elements bei Übereinstimmungen mit „Auf der Seite suchen“ und die Umstellung des until-found-Werts des HTML-hidden-Attributs auf „Baseline – neu verfügbar“. Dadurch wird ein Element ausgeblendet, bis es über die Suchfunktion des Browsers gefunden oder direkt über ein URL-Fragment aufgerufen wird.

Preisvergleichsportal @scope

Mit der CSS-Regel @scope können Sie die Reichweite Ihrer Selectors einschränken. Wenn Sie mit @scope einen Wurzelknoten für den Geltungsbereich festlegen, werden alle Stilregeln, die in der At-rule verschachtelt sind, nur auf diesen DOM-Baum angewendet.

Wenn Sie beispielsweise nur <img>-Elemente innerhalb eines Elements mit der Klasse .card ansteuern möchten, wird .card zum Wurzelelement.

@scope (.card) {
    img {
        border-color: green;
    }
}

Weitere Informationen finden Sie unter Reichweite von Selektoren mit dem CSS-At-Rule @scope einschränken.

scrollend

Eine weitere Funktion, die die Komplexität reduziert und die Scrolloberfläche verbessert, ist scrollend. Ohne das Ereignis scrollend gibt es keine zuverlässige Möglichkeit, zu erkennen, dass ein Scrollvorgang abgeschlossen ist.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

Beim scrollend-Ereignis übernimmt der Browser diese schwierige Bewertung für Sie.

document.onscrollend = event => {…}

Weitere Beispiele finden Sie unter Scrollend, ein neues JavaScript-Ereignis.

Ansichtsübergänge im selben Dokument

Zu guter Letzt sind auch Ansichtsübergänge Teil von Interop 2025. Die Arbeit umfasst Ansichtsübergänge im selben Dokument, also für Single-Page-Apps und auch für Ansichtsübergangsklassen.

Im Dashboard für Interop 2025 können Sie verfolgen, wie sich das Projekt im Laufe des Jahres entwickelt.

Die in Interop 2025 enthaltenen Funktionen sind nicht die einzigen, die dieses Jahr Teil von Baseline werden. Ihre Aufnahme in die Projekte ist jedoch ein ziemlich gutes Zeichen dafür, dass sie priorisiert werden und bald verfügbar sind.

Der Test hat gerade erst begonnen

Es war ein aufregendes Jahr für Baseline und wir haben seit unseren Ankündigungen im letzten Jahr große Fortschritte gemacht. Das Backfilling der Daten zu Web-Funktionen ist jetzt abgeschlossen. Das hat die Tür für die Entwicklung von Entwicklertools geöffnet. Wir stehen noch ganz am Anfang. Wenn Sie ein Produkt oder Open-Source-Tool haben, das von diesen Daten profitieren würde, würden wir uns sehr über eine Nachricht von Ihnen freuen.

Behalten Sie web.dev im Auge. Wir veröffentlichen dort weiterhin Ankündigungen zu neuen Tools sowie Tutorials, mit denen Sie das Web optimal nutzen können.