Nowości na platformie internetowej we wrześniu

Poznaj niektóre z ciekawych funkcji, które trafiły do przeglądarek w stabilnej i wersji beta we wrześniu 2024 r.

Rachel Andrew

Wersje stabilne przeglądarki

We wrześniu 2024 r. stałymi wersjami stały się Firefox 130, Safari 18 i Chrome 129. W tym poście omawiamy nowe funkcje dodane do platformy internetowej.

Ekskluzywne harmonijki z atrybutem name dla <details>

Firefox 130 obsługuje atrybut name elementu <details>. Grupuje elementy <details>, gdzie tylko 1 element w grupie może być otwarty jednocześnie. Dzięki temu możesz utworzyć ekskluzywny harmonijkowy układ bez użycia JavaScriptu.

Obsługa przeglądarek

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 130.
  • Safari: 17.2.

Animuj automatycznie (i nie tylko)

Chrome 129 dodaje właściwość CSS interpolate-size i funkcję calc-size().

Właściwość CSS interpolate-size umożliwia stronie korzystanie z animacji i przejść słów kluczowych z własnym rozmiarem w CSS, takich jak auto, min-content i fit-content, w przypadkach, gdy można je animować.

Obsługa przeglądarek

  • Chrome: 129.
  • Edge: nieobsługiwane.
  • Firefox: nieobsługiwane.
  • Safari: nieobsługiwane.

Źródło

Funkcja CSS calc-size() to funkcja CSS podobna do funkcji calc(), ale obsługująca też operacje na dokładnie 1 obsługiwanym słowie kluczowym rozmiaru. Obsługiwane rozmiary słów kluczowych to auto, min-content, max-content i fit-content.

Obsługa przeglądarek

  • Chrome: 129.
  • Edge: 129.
  • Firefox: nieobsługiwane.
  • Safari: nieobsługiwane.

Źródło

Więcej informacji znajdziesz w artykule Animowanie do wysokości: auto; (i inne kluczowe słowa dotyczące rozmiaru) w CSS.

Formatowanie czasu w JavaScript

W Chrome 129 jest też dostępna funkcja Intl.DurationFormat, która umożliwia formatowanie czasu trwania, np. „1 godz. 40 min 30 sek.”, w różnych lokalizacjach.

Obsługa przeglądarek

  • Chrome: 129.
  • Edge: 129.
  • Firefox: nieobsługiwane.
  • Safari: 16.4.

Źródło

WebCodecs API

Interfejs Web Codecs API jest teraz obsługiwany na komputerach w Firefox 130, co daje deweloperom dostęp do poszczególnych klatek strumienia wideo i fragmentów dźwięku. Nowe interfejsy: VideoEncoder, VideoDecoder, EncodedVideoChunk, VideoFrame i VideoColorSpace. Ten interfejs API nie umożliwia jeszcze udostępniania danych w ramach usługi Baseline Newly, ponieważ nie jest jeszcze obsługiwany w Firefoksie na Androida. Można jednak korzystać z interfejsu API w Firefoksie Nightly na Androida.

Obsługa przeglądarek

  • Chrome: 94.
  • Edge: 94.
  • Firefox: 130.
  • Safari: 16.4.

Źródło

Zapytania dotyczące stylów CSS w przypadku właściwości niestandardowych

Safari 18 obsługuje kilka nowych funkcji, w tym zapytania dotyczące stylów CSS. Zapytania o style umożliwiają tworzenie stylów do wielokrotnego użytku i ich stosowanie jako grupy. Na przykład, gdy masz komponent wielokrotnego użytku z wieloma odmianami.

Obsługa przeglądarek

  • Chrome: 111.
  • Edge: 111.
  • Firefox: nieobsługiwane.
  • Safari: 18.

Źródło

Dowiedz się więcej o zapytaniach dotyczących stylu CSS.

Przechodzenie między widokami tego samego dokumentu

Safari 18 obsługuje też przejścia między widokami tego samego dokumentu w przypadku aplikacji SPA, co pozwala tworzyć wizualne przejścia między różnymi stanami aplikacji.

Obsługa przeglądarek

  • Chrome: 111.
  • Edge: 111.
  • Firefox: nieobsługiwane.
  • Safari: 18.

Źródło

Dowiedz się więcej o przejściach między widokami tego samego dokumentu.

Wersje beta przeglądarek

Przeglądarki w wersji beta dają podgląd funkcji, które zostaną wprowadzone w następnej stabilnej wersji 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 131, Chrome 130 i Safari 18.1. Te wersje wprowadzają na platformie wiele świetnych funkcji. Wszystkie szczegóły znajdziesz w informacjach o wersji. Oto kilka najważniejszych informacji.

Firefox 131 zawiera nowe pomoce iteratora JavaScript, a pliki cookie z niezależnym stanem partycji (CHIPS) są teraz włączone.

Chrome 130 zawiera obsługę box-decoration-break: clone zarówno w przypadku podziału na fragmenty w tekście (układ wierszowy), jak i w przypadku podziału na bloki (fragmenty utworzone na potrzeby drukowania i wielu kolumn). Poprawiliśmy też raportowanie błędów w IndexedDB oraz dodaliśmy nowy atrybut connected do interfejsu Web Serial SerialPort.

Safari 18.1 to wersja z poprawkami błędów w dotychczasowych funkcjach.