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.

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
Mit dieser Funktion können Sie ein positioniertes Element an einem Anker verankern. Das ist besonders nützlich, wenn Pop-ups angezeigt werden.
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
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
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 vondisplay
, 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
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
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
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.
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.
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
Event Timing API (für INP)
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.