Neuigkeiten für die Webversion

Rachel Andrew

Veröffentlicht: 20. Mai 2025

Auf der Google I/O 2025 wurden in der Keynote „What’s new in web“ alle Baseline-Ankündigungen sowie einige der Funktionen vorgestellt, die in diesem Jahr Teil von Baseline geworden sind. Das Web hat sich dieses Jahr enorm weiterentwickelt. In diesem Beitrag finden Sie eine Zusammenfassung aller erwähnten Themen und Links zu weiteren Informationen.

Das Web Platform Dashboard und Webfunktionen

2024 haben wir die erste Version des Web Platform Dashboard angekündigt, das das Webfunktionen-Dataset verwendet. Damit können Sie alle Funktionen von Baseline erkunden.

Die Web-Features-Daten sind jetzt vollständig und alle Funktionen der Plattform sind abgebildet. Da jeden Monat neue Funktionen zu Baseline hinzukommen, werden die Daten aktualisiert und alles wird im Dashboard angezeigt.

Tools zum Ermitteln Ihres eigenen Baseline-Ziels

Sie können Ihre Browserunterstützungsrichtlinie auf dem sich ständig ändernden Ziel von „Baseline Widely available“ (Baseline weitgehend verfügbar) basieren, wie die britische Agentur Clearleft. 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 Webfunktionen verwenden, um das beste Ziel für Sie zu ermitteln.

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

Da die Funktion Ihre RUM-Daten verwendet, können Sie anhand dieser Daten und nicht anhand eines globalen Durchschnitts ermitteln, welches Baseline-Jahr Sie übernehmen sollten. Außerdem können Sie so herausfinden, ob Baseline Widely available für Sie sinnvoll ist.

Mit dem neuen Google Analytics Baseline Checker können Sie auch Ihre Google Analytics-Daten verwenden, um genau zu sehen, wie viel Prozent Ihrer Nutzer die einzelnen Baseline-Ziele unterstützen.

Das sind nur zwei von immer mehr Tools, mit denen Sie Ihre Daten von echten Nutzern der Baseline zuordnen können.

Die Web DX Community Group hat vor Kurzem eine Erweiterung für Netlify eingeführt, die verschiedene Baseline-Jahre und „Widely available“-Funktionen auf Ihren Websites unterstützt. So können Sie besser entscheiden, worauf Sie in Ihren Build-Tools abzielen sollten. Bald verfügbar sind Integrationen mit dem RUM-Produkt Observatory von Cloudflare und mit Contentsquare.

Daten in Ihre eigenen Tools einbinden

Die Daten zu Webfunktionen sind offen und für Ihre eigenen Integrationen verfügbar. Wir möchten Ihnen das erleichtern.

Verwenden Sie die Web Platform Dashboard API oder greifen Sie direkt über das npm-Paket auf die Daten zu Webfunktionen zu.

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

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

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

Die Baseline-Informationen sind jetzt auf den meisten MDN- und „Can I Use“-Seiten verfügbar. Sie finden sie auch im Web Platform Dashboard und in Artikeln auf web.dev und CSS Tricks. Dazu müssen Sie jedoch den Support kontaktieren. Es wäre viel nützlicher, wenn Baseline-Informationen in Ihrer IDE während der Programmierung und als Teil aller anderen Tools angezeigt würden, die Sie verwenden.

Wir freuen uns, Ihnen mitteilen zu können, dass viele wichtige Tools jetzt Baseline-Unterstützung bieten oder sich ganz einfach integrieren lassen.

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 Browserslist-Ziele in Baseline-Begriffen wie „weit verbreitet“ oder Baseline-Jahren konfigurieren.

Damit kann jedes Tool, das ein browserslist-Ziel verwendet, jetzt in Bezug auf Baseline ausgedrückt werden.

Weitere Informationen

Baseline in Lintern – ESLint und Stylelint

Die Verwendung von Baseline mit Lintern ist seit Kurzem mit einigen neuen Tools im Linter-Bereich möglich, beginnend mit ESLint für CSS.

Baseline ESLint hat eine use-baseline-Regel. Sie können hier Ihr bevorzugtes Baseline-Ziel festlegen. Sie werden dann gewarnt, wenn Sie Funktionen verwenden, die neuer als Ihr Ziel sind. Sie haben zwei Möglichkeiten, diese Warnungen zu beheben: Sie können das entsprechende Feature entweder durch Primitives ersetzen oder die Linter-Warnung unterdrücken. Letzteres ist eine völlig zulässige Lösung, wenn Sie wissen, dass Sie ein innovatives Feature sicher verwenden, z. B. wenn es sich um eine progressive Verbesserung handelt.

Standardmäßig gibt ESLint keine Warnung aus, wenn neuere Funktionen in @supports-Blöcken verwendet werden, da nicht unterstützte Browser sie ohnehin nicht auswerten.

Für das HTML-Linting 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 in Stylelint ausgeführt.

Viele Linter haben auch IDE-Plug-ins, sodass Sie während der Programmierung sofort Feedback zum Baseline-Status erhalten, indem die entsprechenden Stellen unterstrichen werden.

Baseline in VS Code und JetBrains WebStorm

Viele IDEs unterstützen schon lange die Möglichkeit, mit dem Mauszeiger auf ein Feature im Editor zu zeigen und die Liste der unterstützten Browserversionen aufzurufen.

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

Um dieses Problem zu beheben, haben wir uns mit der beliebtesten IDE, die von Millionen von Webentwicklern verwendet wird, VS Code, zusammengetan, um Baseline-Daten direkt in diese Hovercards zu integrieren.

Wenn Sie jetzt den Mauszeiger auf ein Feature bewegen, wird angezeigt, ob es als Baseline gilt und wie lange, oder ob es Browser gibt, die es 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 now supports Baseline.

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

Außerdem freuen wir uns, Ihnen mitteilen zu können, dass JetBrains Hovercards in seine WebStorm JavaScript- und TypeScript-IDE implementiert.

Das Web entwickelt sich schneller als je zuvor

Wir hoffen, dass Baseline Ihnen dabei hilft, die Vorteile des interoperablen Webs zu nutzen, das sich schneller als je zuvor weiterentwickelt.

Im Web Platform Dashboard finden Sie alle Funktionen, die in den letzten zwölf Monaten seit der Google I/O 2024 neu als Baseline verfügbar sind.

Eine Reihe von Funktionen, die im Interop 2025-Projekt enthalten sind, werden in Kürze als Baseline Newly verfügbar sein. Informationen zu allen enthaltenen Funktionen finden Sie unter Interop2025: another year of web platform improvements.

Schreibmodi für Querformat

Eine Funktion ist bereits als „Baseline Newly available“ gekennzeichnet: die Werte sideways-rl und sideways-lr für die CSS-Eigenschaft writing-mode. Wenn Sie einen vertikalen Schreibmodus nur für das Layout verwenden, sind die seitlichen Werte wahrscheinlich die richtigen.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

Ankerpositionierung

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

Sie ist jetzt in Interop 2025 enthalten, daher sollte sie dieses Jahr in Baseline aufgenommen werden.

Core Web Vitals: LCP und INP

LCP API

Event Timing API (für INP)

Mit Web Vitals können Sie die Nutzerfreundlichkeit Ihrer Website quantifizieren und Möglichkeiten zur Verbesserung ermitteln. Die Web Vitals-Initiative soll die Situation vereinfachen und Websites 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 in allen Browsern implementiert.

Verbesserungen am <details>-Element

Das <details>-Element selbst ist bereits allgemein verfügbar. Sie 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 den Teil darstellt, 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.

Im Rahmen von Interop 2025 wird unter anderem die Interoperabilität von content-visibility und display verbessert. Das bedeutet, dass Inhalte, die mit content-visibility ausgeblendet werden, nicht gerendert werden, wenn sie nicht maximiert sind.

Das Pseudoelement ::marker ist ebenfalls Teil der Interop 2025-Initiative. Mit dem Pseudoelement ::marker können Sie das Offenlegungsdreieck des Elements <summary> gestalten.

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

Dann folgt ein weiteres Pseudoelement: ::details-content.

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

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

Außerdem gibt es einige schöne Verbesserungen, z. B. das automatische Maximieren des <details>-Elements bei Übereinstimmungen auf der Seite und die Übernahme des until-found-Werts des HTML-Attributs hidden in Baseline Newly Available. Dadurch wird ein Element ausgeblendet, bis es über die Suchfunktion „Auf Seite suchen“ des Browsers gefunden wird oder direkt über ein URL-Fragment aufgerufen wird.

Preisvergleichsportal @scope

Mit der CSS-Regel @scope können Sie die Reichweite Ihrer Selektoren einschränken. Wenn Sie mit @scope einen Bereichsstamm festlegen, werden alle in der At-Regel verschachtelten Stilregeln nur auf diesen DOM-Baum angewendet.

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

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

Weitere Informationen

scrollend

Eine weitere Funktion, die die Komplexität reduziert und die Scroll-Oberflächen verbessert, ist scrollend. Ohne das scrollend-Ereignis gibt es keine zuverlässige Möglichkeit, festzustellen, wann ein Scrollvorgang abgeschlossen ist.

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

Beim scrollend-Ereignis übernimmt der Browser die schwierige Auswertung für Sie.

document.onscrollend = event => {…}

Weitere Beispiele finden Sie unter Scrollend, a new JavaScript event.

Ansichtsübergänge im selben Dokument

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

Im Interop 2025-Dashboard können Sie den Fortschritt des Projekts im Laufe des Jahres verfolgen.

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

Der Test hat gerade erst begonnen

Es war ein spannendes Jahr für Baseline und wir haben uns seit unseren Ankündigungen im letzten Jahr weiterentwickelt. Das Backfilling von Daten zu Webfunktionen ist jetzt abgeschlossen. Dadurch wurden die Schleusen geöffnet und die Entwicklung von Entwicklertools ermöglicht. Wir stehen noch ganz am Anfang. Wenn Sie ein Produkt oder Open-Source-Tool haben, das von der Einbeziehung dieser Daten profitieren würde, würden wir uns freuen, von Ihnen zu hören.

Behalten Sie web.dev im Blick. Wir werden dort weiterhin Ankündigungen zu neuen Tools sowie Tutorials veröffentlichen, damit Sie alle Möglichkeiten des Webs nutzen können.