Nowości na platformie internetowej w lutym

Poznaj kilka ciekawych funkcji, które w lutym 2025 r. pojawiły się w stabilnych i beta-wersjach przeglądarek internetowych.

Rachel Andrew

Data publikacji: 28 lutego 2025 r.

stabilne wersje przeglądarek,

W lutym 2025 r. stały się one stabilnymi wersjami: Firefox 135 i Chrome 133. W tym poście omawiamy nowe funkcje dodane do platformy internetowej.

Sprawdzanie możliwości WebAuthn

Firefox 135 i Chrome 133 dodają obsługę metody statycznej PublicKeyCredential.getClientCapabilities(). Dzięki temu możesz sprawdzić, czy przeglądarka obsługuje funkcje interfejsu Web Authentication API, bez konieczności uciekania się do skanowania przeglądarki.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: 135.
  • Safari: 17.4.

Source

Firefox 135 zawiera też funkcje z przetwarzania JSON z propozycją źródła: argument context parametru reviver JSON.parse reviver,JSON.isRawJSON() i JSON.rawJSON().

Browser Support

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

Source

Wartość podpowiedzi atrybutu wyskakującego okienka

Chrome 133 dodaje trzecią wartość atrybutu popover: popover="hint". Wskazówki, które są najczęściej kojarzone z funkcją „wyświetlania opisu”, działają nieco inaczej. Teraz można otworzyć niepasujące wyskakujące okienko z podpowiedzią, gdy otwarty jest już stos automatycznych wyskakujących okienek.

Przykładem kanonicznego jest otwarty selektor <select> (popover="auto") i wyświetlane okienko informacji (popover="hint"), które pojawia się po najechaniu kursorem. To działanie nie powoduje zamknięcia selektora <select>.

Browser Support

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

Więcej informacji znajdziesz w artykule Wyskakujące okienko = podpowiedź.

Zaawansowana funkcja attr() CSS

W Chrome 133 znajdziesz sporą kolekcję dodatków do CSS. Ta wersja Chrome zawiera rozszerzenie attr() określone w CSS w wersji 5, które umożliwia używanie typów innych niż <string> we wszystkich właściwościach CSS (oprócz dotychczasowego obsługiwania zawartości pseudoelementu).

Browser Support

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

Więcej informacji znajdziesz w artykule Usługa porównywania cen attr() przechodzi na wyższy poziom.

Zapytania do kontenera stanu przewijania w CSS

W Chrome 133 możesz też używać zapytań dotyczących kontenera, aby nadawać styl potomkom kontenera na podstawie ich stanu przewijania.

Kontenery zapytań to albo kontenery z paskiem przewijania, albo elementy, na które wpływa pozycja kursora w kontenerze z paskiem przewijania. Możesz wysyłać zapytania o stany:

  • stuck: przyklejony kontener jest przytwierdzony do jednej z krawędzi pola przewijania.
  • snapped: kontener wyrównany do przyciągania jest obecnie przyciągnięty w poziomie lub w pionie.
  • scrollable: określa, czy kontener z paskiem przewijania można przewijać w kierunku zapytanym.

Pojawiła się też nowa wartość parametru container-type: scroll-state, która umożliwia wysyłanie zapytań do kontenerów.

Browser Support

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

Aby dowiedzieć się więcej, przeczytaj artykuł CSS scroll-state().

CSS text-box, text-box-trim i text-box-edge

W CSS w Chrome 133 dostępne są też właściwości text-box-trim i text-box-edge oraz skrót właściwości text-box, które umożliwiają większą kontrolę nad wyrównaniem pionowym tekstu.

Browser Support

  • Chrome: 133.
  • Edge: 133.
  • Firefox: not supported.
  • Safari: 18.2.

Dowiedz się więcej o tym przydatnym parametrze w usłudze porównywania centext-box-trim.

Przenoszenie z zachowaniem stanu DOM

Chrome 133 dodaje element DOM (Node.prototype.moveBefore), który umożliwia przenoszenie elementów w drzewie DOM bez resetowania ich stanu.

Podczas przenoszenia zamiast usuwania i wstawiania zachowane zostaną takie właściwości:

  • Elementy <iframe> pozostają załadowane.
  • Aktywny element pozostaje w centrum uwagi.
  • Wyskakujące okienka, okna pełnoekranowe i okna modalne pozostają otwarte.
  • Przejścia i animacja CSS będą nadal działać.

Browser Support

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

Interfejs FileSystemObserver

Interfejs FileSystemObserver dodany w Chrome 133 informuje witryny o zmianach w systemie plików. Witryny obserwują zmiany w plikach i katalogach, do których użytkownik wcześniej przyznał uprawnienia na urządzeniu lokalnym lub w systemie plików puli (znanym też jako system plików Origin Private File System) i są powiadamiane o podstawowych informacjach o zmianach, takich jak typ zmiany.

Browser Support

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

Wersje beta przeglądarek

Wersje beta przeglądarki umożliwiają przeglądanie funkcji, które pojawią się w następnej wersji stabilnej przeglądarki. To świetny czas na przetestowanie nowych funkcji lub zmian, które mogą mieć wpływ na Twoją witrynę, zanim zostaną udostępnione publicznie. Nowe wersje beta to: Firefox 136, Safari 18.4 i Chrome 134. Te wersje wprowadzają na platformę wiele przydatnych funkcji. Szczegóły znajdziesz w notatkach do wersji. Oto kilka najważniejszych informacji.

Najnowsza wersja beta przeglądarki Safari zawiera ogromną listę dodatków i ulepszeń, w tym kilka funkcji, które naszym zdaniem powinny stać się nowo dostępnymi funkcjami podstawowymi, gdy przeglądarka stanie się stabilna. Na przykład writing-mode: sideways-rl i writing-mode: sideways-lr, metoda statyczna supports() dla ClipboardItem oraz cała lista elementów z propozycji pomocy dla iteratorów.

Zarówno Safari 18.4 w wersji beta, jak i Firefox 136 zawierają interfejs Cookie Store API, który powinien być dostępny jako nowa wartość domyślna, gdy obie przeglądarki zostaną udostępnione.

Firefox 136 zawiera pseudoklasy :open i :has-slotted, a ta druga jest też dostępna w Chrome 134. Obejmuje ona też Intl.DurationFormat, która powinna być dostępna jako nowa wersja domyślna.

Chrome 134 zawiera elementy <select>, które można dostosować, właściwość CSS dynamic-range-limit oraz funkcję szybkiego zamykania elementów <dialog>.