Nowości na platformie internetowej w październiku

Poznaj kilka ciekawych funkcji, które w październiku 2022 r. trafiły do stabilnych i beta wersji przeglądarek internetowych.

W październiku stałymi wersjami stały się Firefox 106, Chrome 107 i Safari 16.1. Zobaczmy, co to oznacza dla platformy internetowej.

Dzięki pracy naszych współpracowników z Microsoftu Chrome może teraz interpolować wartości grid-template-columnsgrid-template-rows. Oznacza to, że układy siatki mogą płynnie przechodzić między stanami, zamiast przyciągać się w połowie animacji lub przejścia.

Najedź kursorem na awatary, aby wyświetlić animację. Ten przykład pochodzi z artykułu Animowane układy siatki w CSS, w którym znajdziesz więcej informacji.

Obsługa przeglądarek

  • Chrome: 107.
  • Edge: 107.
  • Firefox: 66.
  • Safari: 16.

Dodatki do getDisplayMedia()

W Chrome znajdziesz też kilka dodatków do getDisplayMedia(), które mają zapobiegać przypadkowemu udostępnianiu zbyt wielu informacji podczas udostępniania ekranu.

  • Opcja displaySurface może wskazywać, że aplikacja internetowa preferuje określony typ wyświetlacza (karty, okna lub ekrany).
  • Opcja surfaceSwitching wskazuje, czy Chrome ma zezwalać użytkownikowi na dynamiczne przełączanie się między udostępnionymi kartami.
  • Opcja selfBrowserSurface może uniemożliwić użytkownikowi udostępnianie bieżącej karty. Dzięki temu unikniesz efektu „galerii luster”.
  • Opcja systemAudio zapewnia, że Chrome oferuje użytkownikowi tylko odpowiednie przechwytywanie dźwięku.

Safari 16.1 obsługuje też getDisplayMedia, co umożliwia przechwytywanie określonego okna Safari.

Testowanie obsługi technologii i funkcji czcionek z CSS

Firefox dodał funkcje font-tech()font-format() do zapytań z użyciem @supports. W tym przykładzie testujemy obsługę czcionek COLRv1.

@supports font-tech(color-COLRv1) {

}

Więcej przykładów znajdziesz na stronie MDN.

Przewijanie do fragmentu tekstu

Safari 16.1 obsługuje przewijanie do fragmentu tekstu, co umożliwia nawigowanie do adresu URL z określonym fragmentem tekstu.

Obsługa formatu AVIF

Safari w wersji 16 obsługuje obrazy AVIF, a Safari w wersji 16.1 obsługuje animowane obrazy AVIF w systemach macOS Ventura, iOS 16 i iPadOS 16.

Web Push w Safari

Safari w wersji 16.1 obsługuje web push w systemie macOS Ventura. Do tego celu służą interfejsy Push API i Notifications API. Więcej informacji znajdziesz w artykule Web Push API – wprowadzenie. Strona docelowa powiadomień web push w Safari oznacza, że jest ona teraz dostępna we wszystkich 3 głównych wyszukiwarkach.

Wersje beta przeglądarek

Wersje beta przeglądarki umożliwiają wgląd w funkcje, które pojawią się w następnej wersji stabilnej. To świetny czas na przetestowanie nowych funkcji lub usunięcia, które mogą wpłynąć na Twoją witrynę, zanim zostaną wprowadzone na całym świecie. W tym miesiącu nowe wersje beta to Chrome 108, Firefox 107 i Safari 16.2.

Wersja Chrome 108 obsługuje wartość avoid właściwości fragmentacji CSS break-before, break-afterbreak-inside podczas drukowania. Ta wartość informuje przeglądarkę, aby unikała dzielenia tekstu przed, po lub wewnątrz elementu, do którego jest zastosowana. Na przykład poniższy kod CSS zapobiega dzieleniu się rysunku na części w miejscu podziału strony.

figure {
    break-inside: avoid;
}

W Chrome 108 rozpoczynamy wdrażanie zmiany sposobu obsługi przepełnienia w przypadku zastąpionych elementów, co w niektórych okolicznościach może spowodować zmiany wizualne. Aby dowiedzieć się więcej i poznać sposób rozwiązania problemu, przeczytaj artykuł Zmiany dotyczące wartości overflow w zastąpionych elementach w CSS.

W Chrome na Androidzie zmieniliśmy sposób działania układu Viewport, gdy wyświetlana jest klawiatura ekranowa. Aby dowiedzieć się więcej i poznać sposób przygotowania się do wdrożenia tej zmiany w przyszłej stabilnej wersji, przeczytaj artykuł Przygotowanie się na zmiany zachowania w przypadku zmiany rozmiaru widoku w Chrome na Androidzie.

W Chrome dostępne są też nowe jednostki Viewport w CSS. Obejmuje to małe (svw, svh, svi, svb, svmin, svmax), duże (lvw, lvh, lvi, lvb, lvmin, lvmax), dynamiczne (dvw, dvh, dvi, dvb, dvmin, dvmax) i logiczne (vi, vb) jednostki. Te jednostki są już wdrażane w Firefox i Safari.

Firefox 107 umożliwia obsługę czcionek COLRv1, dołączając się do Chrome w obsługiwaniu tej technologii czcionek. W przypadku czcionek Chrome 108 dodaje obsługę funkcji font-tech()font-format(), aby wyświetlać zapytania z użyciem @supports.

Firefox również obsługuje contain-intrinsic-size, co oznacza, że Chrome i Firefox to już 2 przeglądarki z tą funkcją.

Wersja beta Safari 16.2 zawiera wiele poprawek CSS, w tym dotyczących rozmiarów i przyciągania do krawędzi.

Fragment cyklu Nowości w internecie