Poznaj kilka ciekawych funkcji, które w październiku 2022 r. trafiły do stabilnych i beta wersji przeglądarek internetowych.
stabilne wersje przeglądarek,
W październiku stałymi wersjami stały się Firefox 106, Chrome 107 i Safari 16.1. Zobaczmy, 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.
Obsługa przeglądarek
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 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-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 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()
i 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