Data publikacji: 13 lutego 2025 r.
Po ogromnym sukcesie konferencji Interop 2024 projekt powraca z nowymi obszarami zainteresowania na rok 2025. Nie udało nam się uwzględnić wszystkich sugestii przesłanych w tym roku, ale ostateczna lista obejmuje całą platformę internetową – od usług porównywania cen po funkcje związane z wydajnością.
Obszary specjalizacji na rok 2025
- Umieszczenie kotwicy
backdrop-filter
- Core Web Vitals
- Element
<details>
- Układ
- Moduły
- Navigation API
- Zdarzenia związane ze wskaźnikiem i myszą
- Usuwanie zdarzeń mutacji
@scope
scrollend
zdarzenie- Interfejs Storage Access API
text-decoration
URLPattern
- Wyświetlanie interfejsu Transition API
- WebAssembly
- Zgodność z internetem
- WebRTC
- Tryby pisania
Dodatkowo, podobnie jak w poprzednich latach, jest zestaw obszarów do zbadania. Są to obszary, w których nie mamy wystarczającej ilości informacji ani testów, aby uwzględnić je jako obszar zainteresowania, ale grupa uważa, że należy wykonać pewną pracę, aby doprowadzić je do etapu, w którym możemy je uwzględnić.
- Testowanie ułatwień dostępu
- Testowanie interfejsu Gamepad API
- Testy urządzeń mobilnych
- Testowanie prywatności
- WebVTT
Cieszymy się, że w ramach tegorocznego projektu udało nam się wprowadzić na platformie te funkcje i ulepszenia. I tak jak w zeszłym roku, projekt obejmie cały zestaw elementów: Baseline (wartości domyślne) i Nowo dostępne. W tym poście znajdziesz więcej informacji o niektórych funkcjach z listy oraz linki do artykułów, w których znajdziesz więcej szczegółów.
Możesz śledzić postępy na pulpicie Interop 2025 pod adresem wpt.fyi/interop-2025. Gdy funkcje staną się dostępne w wersji podstawowej, pojawią się też na liście Baseline 2025 na stronie webstatus.dev.

CSS i UI
Niektóre funkcje zawarte w Interop 2025 to funkcje, które zostały przez Ciebie oznaczone jako ważne w ankiecie „Stan CSS 2024”. Pozwolą Ci one tworzyć ładniejsze i szybsze aplikacje.
Umieszczenie kotwicy
Ta funkcja umożliwia zakotwiczenie elementu do pozycji kotwicy. Jest ona szczególnie przydatna podczas wyświetlania wyskakujących okienek.
Umieszczenie tej funkcji w Baseline znacznie ułatwi tworzenie interfejsów użytkownika bez konieczności korzystania z bibliotek innych firm. Więcej informacji znajdziesz w naszej dokumentacji dotyczącej pozycjonowania kotwic, a także na stronie MDN poświęconej pozycjonowaniu kotwic CSS.
Przejścia w tym samym dokumencie
W tym roku uwzględniliśmy też przejścia między widokami, zwłaszcza przejścia między widokami tego samego dokumentu, oraz właściwość CSS view-transition-class
.
Więcej informacji o przechodach między widokami znajdziesz w dokumentacji MDN na temat przejść między widokami w aplikacjach jednostronicowych oraz w dokumentacji MDN na temat przejść między widokami.
Właściwość backdrop-filter
Usługa backdrop-filter
jest dostępna w wersji podstawowej od września 2024 r. Umożliwia tworzenie efektów tła. Na przykład do rozmycia lub tworzenia efektów, które mogą wydawać się dostępne tylko w aplikacji graficznej.
Mimo że interoperacyjność jest w większości przypadków zadowalająca, nieudane testy w przypadku backdrop-filter
wskazują, że w tych implementacjach występują błędy i problemy. Chociaż te problemy mogą nie dotyczyć wszystkich, wiemy, że wielu z Was się z nimi spotyka. Bardzo zależy nam na tym, aby ta funkcja działała naprawdę dobrze.
Element <details>
Element <details>
to widżet, który można rozwinąć, aby wyświetlić dodatkowe treści. Sam element <details>
jest dostępny w wersji podstawowej.
Istnieje jednak kilka powiązanych funkcji, które zostały dodane niedawno i ułatwiają korzystanie z <details>
.
- Pseudoelementy CSS
::marker
i::details-content
. - Używanie atrybutu
content-visibility
zamiast atrybutudisplay
do przełączania treści. - automatyczne rozwijanie elementu
<details>
w przypadku dopasowań znalezionych na stronie; - Atrybut
hidden="until-found"
, który ukrywa element, dopóki nie zostanie znaleziony za pomocą wyszukiwania na stronie w przeglądarce lub dopóki nie nastąpi przejście do niego bezpośrednio za pomocą fragmentu adresu URL.
Reguła CSS @scope
Reguła @scope
at-rule pozwala ograniczyć zakres działania selektorów do poddrzewa DOM lub nawet wybrać górną i dolną granicę w drzewie. Na przykład ten kod CSS wybiera tylko elementy <img>
wewnątrz elementu o klasie .card
.
@scope (.card) {
img {
border-color: green;
}
}
W następnym przykładzie użyto górnej i dolnej granicy. Element <img>
jest wybrany tylko wtedy, gdy znajduje się między elementem o klasie .card
i poza elementem o klasie .card__content
.
@scope (.card) to (.card__content) {
img {
border-color: green;
}
}
Więcej przykładów użycia @scope
znajdziesz w artykule Ograniczanie zasięgu selektora za pomocą atrybutu CSS @scope
oraz w dokumentacji @scope
na stronie MDN.
Zdarzenie scrollend
Bez zdarzenia scrollend
nie ma niezawodnego sposobu wykrywania, że przewijanie zostało zakończone. Najlepiej użyć setTimeout()
, aby sprawdzić, czy przewijanie zostało wstrzymane na jakiś czas. Dzięki temu zdarzenie scroll has paused będzie bardziej przypominać zdarzenie scroll has ended.
document.onscroll = event => {
clearTimeout(window.scrollEndTimer)
window.scrollEndTimer = setTimeout(callback, 100)
}
Dzięki zdarzeniu scrollend
przeglądarka wykonuje za Ciebie całą tę trudną ocenę.
document.onscrollend = event => {
// ...
}
Więcej przykładów znajdziesz w Scrollend, nowym zdarzeniu JavaScript, a także w dokumentacji MDN (scrollend
).
Właściwość text-decoration
Właściwość text-decoration
to skrót dla właściwości text-decoration-line
, text-decoration-color
, text-decoration-style
i text-decoration-thickness
. Uważa się, że jest to domyślna wartość szeroko dostępna, ale w Safari działa tylko niezdefiniowana usługa text-decoration-line
. W 2025 r. zajmiemy się tą kwestią.
Tryby pisania
Właściwość CSS writing-mode
ma wiele możliwych wartości, z których wiele służy do rozmieszczania skryptów wyświetlanych w poziomie. Czasami jednak chcesz umieścić tekst w orientacji pionowej ze względu na projekt, a nie ze względu na obsługę języka. Wartości sideways-lr
i sideways-rl
zostały zaprojektowane z myślą o tym, ale mają niską zgodność z przeglądarkami. Problem powinien zostać rozwiązany w 2025 r.
Dodatkowo uwzględnione są logiczne właściwości CSS overflow-inline
i overflow-block
. Umożliwiają one kontrolowanie tego, co się dzieje, gdy treści przepełniają pola, niezależnie od trybu pisania.
Core Web Vitals
Wskaźniki internetowe pomogą Ci ocenić wygodę korzystania z Twojej witryny i ustalić, co jeszcze możesz w niej poprawić. Celem inicjatywy dotyczącej podstawowych wskaźników internetowych jest uproszczenie sytuacji i pomaganie witrynom w skupieniu się na najważniejszych danych, czyli podstawowych wskaźnikach internetowych.
Interfejs Interop 2025 obejmuje wskaźniki największego wyrenderowania treści (LCP) i interakcji do kolejnego wyrenderowania (INP), które są realizowane przez implementację interfejsów LargestContentfulPaint API i Event Timing API w różnych przeglądarkach. Dane skumulowane przesunięcie układu (CLS) nie są uwzględniane.
LCP API
Interfejs Event Timing API (do INP)
WebAssembly (Wasm)
Interfejs WebAssembly API umożliwia wczytywanie kodu WebAssembly, który jest przenośnym formatem binarnych instrukcji. Możesz dzięki temu m.in. uruchamiać w przeglądarce całą aplikację bloga, w tym wszystkie wymagania dotyczące serwera.
W tym roku skupimy się na tych funkcjach:
- Wbudowane funkcje na ciągi znaków w JavaScript: aby wbudowane funkcje na ciągi znaków w WebAssembly odzwierciedlały podzbiór interfejsu JavaScript String API, dzięki czemu można je wywoływać bez kodu łączącego JavaScript.
- Integracja buforów o zmiennym rozmiarze: umożliwia zintegrowanie WebAssembly z kodem JavaScript, który używa buforów o zmiennym rozmiarze.
Usuwanie funkcji
W tym roku projekt obejmuje usunięcie z platformy. Zdarzenia dotyczące mutacji zostały wycofane i zastąpione przez znacznie wydajniejsze Mutation Observer API, które jest dostępne w ramach punktu odniesienia. Chrome usunął te zdarzenia w wersji 126, a obecnie pracuje nad usunięciem ich ze wszystkich przeglądarek.
Aby dowiedzieć się więcej o historii i przyczynach usuwania tych zdarzeń, przeczytaj artykuł Zdarzenia związane z mutacjami zostaną usunięte z Chrome.
Więcej informacji
Opis pełnej listy funkcji znajdziesz w README projektu. Przeczytaj też wpisy innych firm, które pracują nad Interop 2025.