Nowości na platformie internetowej w sierpniu

Poznaj kilka ciekawych funkcji, które w sierpniu 2024 r. trafiły do stabilnych i beta-wersji przeglądarek internetowych.

Rachel Andrew

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.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 38.
  • Safari: 18.2.

Source

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.

Browser Support

  • Chrome: 128.
  • Edge: 128.
  • Firefox: 134.
  • Safari: 18.2.

Source

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.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.5.

Source

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.

Browser Support

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 17.4.

Source

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

Browser Support

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

Source

responseStatus

Browser Support

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

Source

Geolokalizacja toJSON() metody

W Firefox 129 dostępne są też GeolocationCoordinates.toJSON() i GeolocationPosition.toJSON().

Browser Support

  • Chrome: 126.
  • Edge: 126.
  • Firefox: 129.
  • Safari: 18.

Source

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.