Poznaj niektóre z ciekawych funkcji, które trafiły do przeglądarek w stabilnej i wersji beta we wrześniu 2024 r.
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
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ć.
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
.
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.
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.
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.
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.
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.