Poznaj kilka ciekawych funkcji, które w sierpniu 2024 r. trafiły do stabilnych i beta-wersji przeglądarek internetowych.
stabilne wersje przeglądarek,
W sierpniu 2024 r. stały się one stabilnymi wersjami: Firefox 129 i Chrome 128. W tym poście omawiamy nowe funkcje dodane do platformy internetowej.
Zmiany w formatowaniu znaków ruby
Element HTML <ruby>
to przydatne narzędzie do ulepszania wyświetlania tekstu, zwłaszcza w przypadku języków azjatyckich. Ten element umożliwia wyświetlanie adnotacji fonetycznych lub innych informacji uzupełniających nad lub obok tekstu podstawowego. Od wersji 128 Chrome adnotacje w Ruby są dzielone na linie, a tekst w nich możesz stylizować za pomocą właściwości CSS ruby-align
.
Więcej informacji znajdziesz w właściwościach z możliwością przełamania na linii <ruby>
i w usłudze porównywania cen ruby-align
.
PointerEvent.deviceProperties
dla funkcji rysowania wieloma piórami
Ta zmiana, która jest dostępna w Chrome 128, zapewnia bezpieczny i niezawodny sposób identyfikacji poszczególnych piór (wskaźników) wchodzących w interakcję z ekranem, aby ustawić określone kolory lub kształty pióra dla każdego urządzenia współpracującego z digitalizerem. Rozszerza interfejs PointerEvent
o nowy atrybut deviceProperties
. Zawiera on atrybut uniqueId
, który jest trwałym identyfikatorem sesji, izolowanym dokumentem i unikalnym identyfikatorem, którego można używać do niezawodnego identyfikowania poszczególnych piór wchodzących w interakcję ze stroną.
Promise.try
W Chrome 128 funkcja Promise.try
ułatwia też obsługę błędów w obietnicach. Mamy tu funkcję f
. Ta funkcja może być asynchroniczna i zwracać obietnicę lub nie. Aby w obu przypadkach używać semantyki obietnic do obsługi błędów, owiń funkcję w obietnicy. Zwykle jest to osiągane za pomocą new Promise(resolve => resolve(f()))
.
Promise.try
to prostszy sposób na osiągnięcie tego samego efektu. Umożliwia ono uruchomienie ciągu obiekcji, który przechwytuje wszystkie błędy w obsługach .catch
zamiast obsługiwać zarówno synchroniczne, jak i asynkroniczną ścieżkę wyjątku.
Animowanie efektów wejścia
Firefox 129 zawiera 2 funkcje CSS używane do animowania efektów wejścia. Te funkcje są teraz dostępne jako nowe wartości domyślne.
Reguła @starting-style
definiuje początkowe style elementu, zanim zostanie on wyrenderowany na stronie. Jest to wymagane w przypadku elementów, które animują się z display: none, ponieważ potrzebują stanu, z którego będą animowane.
Efekty wejściowe wymagają też animacji właściwości dyskretnych, czyli takich, które nie mogą interpolować wartości.
Możesz to teraz osiągnąć, używając wartości transition-behavior: allow-discrete
lub allow-discrete
w skrótach przejścia.
Ta funkcja jest teraz obsługiwana również w Firefoksie 129.
Więcej informacji znajdziesz w artykule Nowe funkcje w wersji podstawowej: animacja efektów wejścia.
Dodatki do PerformanceResourceTiming
Firefox 129 dodaje właściwości contentType
i responseStatus
interfejsu PerformanceResourceTiming
.
Wskazują one odpowiednio typ treści zaciągniętego zasobu i kod stanu odpowiedzi HTTP zwrócony podczas pobierania zasobu.
contentType
responseStatus
Geolokalizacja toJSON()
metody
W Firefox 129 dostępne są też GeolocationCoordinates.toJSON()
i GeolocationPosition.toJSON()
.
WebDriver BiDi
Firefox 129 obsługuje teraz WebDriver BiDi. Oznacza to, że możesz używać Puppeteer w Chrome lub Firefox do automatyzacji. Więcej informacji znajdziesz w artykułach WebDriver BiDi gotowy do wdrożenia w Firefox, Chrome i Puppeteer oraz Oficjalna obsługa Puppeteer w Firefox.
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 130 i Chrome 129. Wersja beta Safari 18 jest nadal dostępna. Te wersje wprowadzają na platformę wiele przydatnych funkcji. Szczegóły znajdziesz w notatkach do wersji. Oto kilka najważniejszych informacji.
Firefox 130 obsługuje atrybut name elementu <details>
, który grupuje elementy <details>
. W danym momencie można otworzyć tylko jeden element w grupie. Dzięki temu możesz utworzyć ekskluzywny harmonijkowy układ bez użycia JavaScriptu.
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 kluczowych słów dotyczących rozmiaru domyślnego w usłudze porównywania cen, 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 kluczu kierowania na rozmiar. Obecnie obsługiwane słowa kluczowe dotyczące rozmiarów to auto
, min-content
, max-content
i fit-content
.
W Chrome 129 jest też funkcja Intl.DurationFormat
, która umożliwia formatowanie czasu trwania, np. „1 godz. 40 min 30 sek.”, w wielu lokalizacjach.