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.

Rachel Andrew

stabilne wersje przeglądarek,

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

Animacja ścieżek w siatce

Dzięki pracy naszych współpracowników z Microsoftu Chrome może teraz interpolować wartości grid-template-columns i grid-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

• 107
• 107
• 66
• 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() i font-format() do zapytań z funkcją @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 przechodzenie 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 Safari na macOS Ventura. Wykorzystywane są interfejsy Push API i Powiadomienia API. Więcej informacji na ten temat znajdziesz w artykule Meet Web Push. 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ą przeglądanie funkcji, które pojawią się w następnej wersji stabilnej. To świetna okazja, by przetestować nowe funkcje lub usunięcia, które mogą mieć wpływ na Twoją witrynę jeszcze przed udostępnieniem ich wszystkim użytkownikom. W tym miesiącu udostępniliśmy nowe wersje beta przeglądarek Chrome 108, Firefox 107 i Safari 16.2.

Chrome 108 obsługuje wartość avoid właściwości fragmentacji CSS break-before, break-after i break-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 zaczynamy wprowadzać zmianę sposobu działania przepełnienia w zastąpionych elementach, 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 CSS w przypadku zastąpionych elementów.

W Chrome na Androidzie zmieniliśmy sposób działania układu w trybie przeglądania, gdy wyświetla się klawiatura ekranowa. Więcej informacji o tym, jak przygotować się do wprowadzenia tej zmiany w stabilnej wersji w przyszłym miesiącu, znajdziesz w artykule Przygotowanie do zmian w zachowaniu 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ż stosowane w Firefox i Safari.

Firefox 107 umożliwia obsługę czcionek COLRv1, dołączając się do Chrome w obsługiwaniu tej technologii. W przypadku czcionek Chrome 108 dodaje obsługę funkcji font-tech() i font-format() w zapytaniach z funkcją @supports.

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

Safari w wersji beta 16.2 zawiera kilka poprawek CSS, w tym zmianę rozmiaru i przyciąganie przewijania.

Część serialu „Nowości w internecie”