Nowości na platformie internetowej w październiku

Odkryj ciekawe funkcje, które zostały udostępnione w przeglądarkach stabilnych i beta w październiku 2022 r.

Rachel Andrew

Stabilne wersje przeglądarek

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

Animacja ścieżek siatki

Dzięki pracy współtwórców z firmy Microsoft 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ć je w połowie animacji lub przejścia.

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

Obsługa przeglądarek

• 107
• 107
• 66
• 16

Dodatki do listy getDisplayMedia()

W Chrome wprowadziliśmy też dodatki do getDisplayMedia(), które mają zapobiec przypadkowemu udostępnianiu ekranu.

• Opcja displaySurface może wskazywać, że aplikacja internetowa preferuje konkretny typ platformy wyświetlania (karty, okna lub ekrany).
• Opcja surfaceSwitching wskazuje, czy Chrome ma zezwalać użytkownikowi na dynamiczne przełączanie się między udostępnionymi kartami.
• Za pomocą opcji selfBrowserSurface można uniemożliwić użytkownikowi udostępnianie bieżącej karty. Pozwala to uniknąć efektu „sali luster”.
• Dzięki opcji systemAudio Chrome oferuje użytkownikowi tylko odpowiednie nagrania dźwiękowe.

Safari 16.1 zapewnia też obsługę przeglądarki getDisplayMedia z możliwością przechwytywania określonego okna Safari.

Testowanie pod kątem obsługi technologii czcionek i funkcji z CSS

W przeglądarce Firefox zostały dodane funkcje font-tech() i font-format(), aby umożliwić obsługę zapytań ze znakiem @supports. Poniżej znajdziesz przykładowe testy obsługi czcionek COLRv1.

@supports font-tech(color-COLRv1) {

}

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

Przewiń do fragmentu tekstu

Safari 16.1 obsługuje funkcję przewijania do fragmentu tekstu, która umożliwia przejście do adresu URL z określonym fragmentem tekstu.

Obsługa AVIF

Safari 16 obejmowała obsługę obrazów w formacie AVIF, a Safari w wersji 16.1 – obsługę animowanych obrazów AVIF w systemach macOS Ventura, iOS 16 i iPadOS 16.

Web Push dla Safari

Safari 16.1 zapewnia obsługę Web Push w przeglądarce Safari na urządzeniach z systemem macOS Ventura. Funkcja wykorzystuje interfejs Push API i powiadomienia o interfejsie API. Więcej informacji na ten temat znajdziesz w artykule Web Push API w Meet. Wyświetlanie danych push w przeglądarce Safari oznacza, że jest on teraz dostępny we wszystkich 3 głównych wyszukiwarkach.

Wersje przeglądarki (beta)

Wersje beta zawierają podgląd funkcji, które pojawią się w następnej stabilnej wersji przeglądarki. To doskonała okazja do przetestowania nowych funkcji lub usunięć, które mogą wpłynąć na Twoją witrynę, zanim udostępnimy je użytkownikom na całym świecie. Nowe wersje beta w tym miesiącu to Chrome 108, Firefox 107 i Safari 16.2.

Chrome 108 obsługuje podczas drukowania wartość avoid właściwości podziału CSS break-before, break-after i break-inside. Ta wartość informuje przeglądarkę, że ma ona uniknąć uszkodzenia przed elementem, do którego jest stosowana, po nim lub wewnątrz niego. Poniższy kod CSS pozwala na przykład uniknąć uszkodzenia grafiki w podziałie strony.

figure {
    break-inside: avoid;
}

W Chrome 108 zaczynamy wprowadzać zmianę w sposobie zachowania przepełnienia w przypadku zastąpionych elementów, co w niektórych przypadkach może spowodować zmiany wizualne. Aby dowiedzieć się więcej i dowiedzieć się, jak rozwiązać ewentualne problemy, przeczytaj artykuł Zmiana w kierowaniu elementów na zastąpione elementy w CSS.

Zmienił się sposób działania widocznego obszaru układu w Chrome na Androidzie, gdy włączona jest klawiatura ekranowa. Przeczytaj artykuł Przygotowanie na zmiany zmiany rozmiaru widocznego obszaru w Chrome na Androida, by dowiedzieć się więcej i dowiedzieć się, jak przygotować się na wprowadzenie zmian, które wprowadzimy w przyszłym miesiącu na wersję stabilną.

W Chrome znajdziesz też nowe jednostki widocznego obszaru CSS. Są 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). Te jednostki są już zaimplementowane w przeglądarkach Firefox i Safari.

Przeglądarka Firefox w wersji 107 obsługuje czcionkę COLRv1, a Chrome obsługuje tę technologię czcionek. Ponadto Chrome 108 obsługuje funkcje font-tech() i font-format(), umożliwiając stosowanie zapytań z zapytaniami @supports.

W przeglądarce Firefox wprowadzamy też obsługę contain-intrinsic-size, a do Chrome – 2 przeglądarki obsługujące tę funkcję.

Safari 16.2 Beta zawiera kilka poprawek CSS, w tym możliwość zmiany rozmiaru i przyciągania przewijania.

Część serii nowości w internecie