Interop 2025: Weitere Verbesserungen an der Webplattform

Veröffentlicht: 13. Februar 2025

Nach dem großen Erfolg von Interop 2024 kehrt das Projekt heute mit neuen Schwerpunktbereichen für 2025 zurück. Wir konnten nicht alle Vorschläge berücksichtigen, die in diesem Jahr eingereicht wurden. Die endgültige Liste umfasst jedoch die gesamte Webplattform – von CSS bis hin zu leistungsbezogenen Funktionen.

Die Schwerpunkte für 2025

  • Ankerpositionierung
  • backdrop-filter
  • Core Web Vitals
  • Element <details>
  • Layout
  • Module
  • Navigation API
  • Zeiger- und Mausereignisse
  • Mutationsereignisse entfernen
  • @scope
  • scrollend Ereignis
  • Storage Access API
  • text-decoration
  • URLPattern
  • View Transition API
  • WebAssembly
  • Webkompatibilität
  • WebRTC
  • Schreibmodi

Wie in den Vorjahren gibt es auch dieses Jahr eine Reihe von Bereichen, die untersucht werden. In diesen Bereichen haben wir nicht genügend Informationen oder Tests, um sie als Schwerpunktbereich aufzunehmen. Die Gruppe ist jedoch der Meinung, dass wir etwas tun sollten, um sie in eine Phase zu bringen, in der wir sie aufnehmen können.

  • Tests zur Barrierefreiheit
  • Gamepad API-Tests
  • Mobiltest
  • Datenschutztests
  • WebVTT

Wir freuen uns auf diese Funktionen und die Verbesserungen, die das Projekt in diesem Jahr auf der Plattform mit sich bringen wird. Und wie im letzten Jahr wird das Projekt eine ganze Reihe von Elementen als „Baseline Newly“ (Neuer Baseline) verfügbar machen. In diesem Beitrag finden Sie weitere Informationen zu einigen der Funktionen in der Liste sowie Links zu weiteren Informationen.

Du kannst den Fortschritt im Interop 2025-Dashboard unter wpt.fyi/interop-2025 verfolgen. Sobald neue Baseline-Versionen verfügbar sind, werden sie auch in der Baseline 2025-Liste auf webstatus.dev aufgeführt.

Die Bewertungen zu Beginn des Projekts: Interoperabilität: 33, Untersuchungen: 0, Chrome Canary: 91, Edge Dev: 88, Firefox Nightly: 52, Safari Technology Preview: 55.
Dashboard „Interop 2025“ (Stand: 13. Februar 2025)

CSS und Benutzeroberfläche

Einige der in Interop 2025 enthaltenen Funktionen haben Sie in der Umfrage zum Stand von CSS 2024 als wichtig eingestuft. Sie helfen Ihnen, eine ansprechendere und leistungsfähigere User Experience zu schaffen.

Ankerpositionierung

Browser Support

  • Chrome: 125.
  • Edge: 125.
  • Firefox: not supported.
  • Safari: not supported.

Source

Mit dieser Funktion können Sie ein positioniertes Element an einem Anker verankern. Das ist besonders nützlich, wenn Pop-ups angezeigt werden.

Ein Anker mit einem positionierten Element.

Wenn diese Funktion Teil von Baseline ist, können Nutzeroberflächen viel einfacher erstellt werden, ohne auf Bibliotheken von Drittanbietern zurückgreifen zu müssen. Weitere Informationen finden Sie in unserer Dokumentation zur Ankern-Positionierung und auf der MDN unter CSS Anchor-Positionierung.

Ansichtsübergänge im selben Dokument

Browser Support

  • Chrome: 111.
  • Edge: 111.
  • Firefox: not supported.
  • Safari: 18.

Source

Außerdem sind in diesem Jahr Ansichtsübergänge, insbesondere Ansichtsübergänge im selben Dokument, und die CSS-Eigenschaft view-transition-class enthalten.

Weitere Informationen zu Ansichtsübergängen finden Sie unter Ansichtsübergänge im selben Dokument für Single-Page-Anwendungen und in der MDN-Dokumentation zu Ansichtsübergängen.

Das backdrop-filter-Attribut

Browser Support

  • Chrome: 76.
  • Edge: 79.
  • Firefox: 103.
  • Safari: 18.

Source

Die Property backdrop-filter ist seit September 2024 als Baseline Newly verfügbar. Damit kannst du Effekte hinter deinen Inhalten erstellen. So können Sie beispielsweise Bilder unkenntlich machen oder Effekte erstellen, die Sie normalerweise nur in einer Grafikanwendung erwarten würden.

Obwohl sie größtenteils interoperabel sind, können Sie anhand der fehlerhaften Tests für backdrop-filter sehen, dass es in diesen Implementierungen Fehler und Probleme gibt. Auch wenn diese Probleme nicht für alle Nutzer ein Problem darstellen, wissen wir, dass viele von euch sie haben. Wir möchten diese Funktion so gut wie möglich machen.

Das <details>-Element

Das Element <details> ist ein Offenlegungs-Widget, das maximiert werden kann, um zusätzliche Inhalte zu sehen. Das <details>-Element selbst ist in der Baseline als „Weit verbreitet“ gekennzeichnet. Es gibt jedoch eine Reihe ähnlicher Funktionen, die vor Kurzem hinzugefügt wurden und <details> noch nützlicher machen.

  • Die CSS-Pseudoelemente ::marker und ::details-content
  • Verwenden Sie content-visibility anstelle von display, um den Inhalt ein- und auszublenden.
  • Automatisches Maximieren des Elements <details> mit Übereinstimmungen bei der Suche auf der Seite
  • Das Attribut hidden="until-found", mit dem ein Element ausgeblendet wird, bis es über die Suchfunktion des Browsers gefunden oder über ein URL-Fragment direkt aufgerufen wird.

Die CSS-@scope-At-Rule

Browser Support

  • Chrome: 118.
  • Edge: 118.
  • Firefox: behind a flag.
  • Safari: 17.4.

Source

Mit dem Attribut @scope können Sie Ihre Selectors auf einen Teilbaum des DOM beschränken oder sogar zwischen einer oberen und einer unteren Grenze im Baum auswählen. Mit dem folgenden CSS-Code werden beispielsweise nur <img>-Elemente innerhalb eines Elements mit der Klasse .card ausgewählt.

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

Im nächsten Beispiel werden eine Ober- und eine Untergrenze verwendet. Das <img>-Element wird nur ausgewählt, wenn es sich zwischen dem Element mit der Klasse .card und außerhalb des Elements mit der Klasse .card__content befindet.

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

Weitere Beispiele für die Verwendung von @scope finden Sie unter Reichweite von Auswahlen mit der CSS-@scope-At-Rule einschränken und in der @scope-Dokumentation auf MDN.

Das scrollend-Ereignis

Browser Support

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 109.
  • Safari: not supported.

Source

Ohne das Ereignis scrollend gibt es keine zuverlässige Möglichkeit, zu erkennen, dass ein Scrollvorgang abgeschlossen ist. Sie können mit setTimeout() prüfen, ob das Scrollen für eine gewisse Zeit angehalten wurde. Das Ereignis ähnelt eher dem Ereignis „scroll has paused“ (Scrollen wurde pausiert) als dem Ereignis „scroll has ended“ (Scrollen wurde beendet).

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 und in der MDN-Dokumentation für scrollend.

Das text-decoration-Attribut

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Das Attribut text-decoration ist eine Kurzschreibweise für text-decoration-line, text-decoration-color, text-decoration-style und text-decoration-thickness. Es gilt als Baseline (weitgehend verfügbar). In Safari ist jedoch nur text-decoration-line die einzige Kurzform ohne Präfix, die funktioniert. Das wird im Laufe des Jahres 2025 behoben.

Schreibmodi

Das CSS-Attribut writing-mode hat eine Reihe möglicher Werte, von denen viele für die Layoutgestaltung von vertikal angezeigten Scripts vorgesehen sind. Manchmal möchten Sie Text jedoch nicht aus Gründen der Sprachunterstützung, sondern als Teil eines Designs vertikal ausrichten. Die Werte sideways-lr und sideways-rl sind dafür vorgesehen, leiden aber unter einer schlechten Browserkompatibilität. Dies sollte im Laufe des Jahres 2025 behoben werden.

Browser Support

  • Chrome: 48.
  • Edge: 12.
  • Firefox: 41.
  • Safari: 10.1.

Source

Außerdem sind die logischen CSS-Eigenschaften overflow-inline und overflow-block enthalten. Damit lässt sich unabhängig vom Schreibmodus steuern, was passiert, wenn Text aus einem Feld herausragt.

Browser Support

  • Chrome: not supported.
  • Edge: not supported.
  • Firefox: 69.
  • Safari: not supported.

Source

Core Web Vitals

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 Website-Betreibern 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. Der Messwert „Cumulative Layout Shift“ (CLS) ist nicht Teil des Tests.

LCP API

Browser Support

  • Chrome: 77.
  • Edge: 79.
  • Firefox: 122.
  • Safari: not supported.

Source

Event Timing API (für INP)

Browser Support

  • Chrome: 96.
  • Edge: 96.
  • Firefox: not supported.
  • Safari: not supported.

Source

WebAssembly (Wasm)

Mit der WebAssembly API können Sie WebAssembly-Code laden, ein portables Binärbefehlsformat. Sie können damit beispielsweise eine vollständige Bloganwendung, einschließlich aller Serveranforderungen, im Browser ausführen.

In diesem Jahr liegt der Schwerpunkt auf den folgenden Funktionen:

  • JavaScript-String-Builtins: Damit die WebAssembly-Stringspeziellen Funktionen einen Teil der JavaScript String API widerspiegeln, sodass sie ohne JavaScript-Bindungscode aufrufbar sind.
  • Integration von skalierbaren Puffern: WebAssembly kann in JavaScript-Code eingebunden werden, der skalierbare Puffer verwendet.

Entfernen von Funktionen

In diesem Jahr wird das Projekt von der Plattform entfernt. Mutationsereignisse werden eingestellt und durch die deutlich leistungsstärkere und weithin verfügbare Mutation Observer API ersetzt. Diese Ereignisse wurden in Chrome 126 entfernt. Unser Ziel ist es, sie aus allen Browsern zu entfernen.

Weitere Informationen zur bisherigen Funktionsweise und zu den Gründen für die Entfernung dieser Ereignisse finden Sie im Hilfeartikel Mutationsereignisse werden aus Chrome entfernt.

Weitere Informationen

Beschreibungen der gesamten Liste der Funktionen finden Sie in der README des Projekts. Lesen Sie auch die Beiträge der anderen Unternehmen, die an Interop 2025 arbeiten.