Nowości na platformie internetowej we wrześniu

Poznaj kilka ciekawych funkcji, które we wrześniu 2024 r. trafiły do stabilnych i beta wersji przeglądarek internetowych.

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>. Ta grupa zawiera elementy <details>, z których w danym momencie można otworzyć tylko jeden. Dzięki temu możesz utworzyć ekskluzywny harmonijkowy układ bez użycia JavaScriptu.

Browser Support

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

Animowanie do pozycji automatycznej (i inne funkcje)

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ść z kluczowymi słowami dotyczącymi rozmiarów wbudowanych w CSS, takimi jak auto, min-content i fit-content, w przypadkach, gdy można je animować.

Browser Support

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

Source

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 słowa kluczowe dotyczące rozmiaru to auto, min-content, max-content i fit-content.

Browser Support

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

Source

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 dostępna jest też funkcja Intl.DurationFormat, która umożliwia formatowanie czasu trwania, np. „1 godz. 40 min 30 sek.”, w wielu lokalizacjach.

Browser Support

  • Chrome: 129.
  • Edge: 129.
  • Firefox Technology Preview: supported.
  • Safari: 16.4.

Source

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, VideoFrameVideoColorSpace. 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 tej usługi w Firefoksie Nightly na Androida.

Browser Support

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

Source

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 stylu CSS. Zapytania o style umożliwiają tworzenie stylów do wielokrotnego użytku i ich stosowanie jako grupy. Może to być na przykład komponent wielokrotnego użytku z wieloma wariantami.

Browser Support

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

Source

Dowiedz się więcej o zapytaniach dotyczących stylu w usłudze porównywania cen.

Przechodzenie do tego samego widoku dokumentu

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

Browser Support

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

Source

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

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 131, Chrome 130 i Safari 18.1. Te wersje wprowadzają na platformę wiele przydatnych funkcji. Wszystkie szczegóły znajdziesz w informacjach o wersji. Oto kilka najważniejszych informacji.

Firefox 131 zawiera nowe pomoce iteratora JavaScriptu, 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.