Nowości w Chrome 121

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

Nazywam się Adriana Jara. Zobacz, co nowego w Chrome 121 dla deweloperów.

Aktualizacje CSS.

Zacznijmy od aktualizacji CSS:

Właściwości scrollbar-color i scrollbar-width są już dostępne. Dzięki nim możesz dostosować suwaki i zmienić, jak już pewnie się domyślasz, ich kolor i szerokość.

Właściwość font-palette pozwala wybrać konkretną paletę do renderowania czcionki kolorowej. Ta usługa obsługuje teraz animację, dzięki czemu przełączanie się między paletami staje się płynnym przejściem między 2 wybranymi paletami.

Pseudoelementy ::spelling-error i ::grammar-error umożliwiają dostosowywanie kolorów błędów ortograficznych i gramatycznych, wyróżnianie błędów pisowni za pomocą kolorów tła lub innych ozdób oraz implementowanie niestandardowej sprawdzania pisowni z bardziej zintegrowanym wyglądem.

Ulepszono maskowanie CSS w SVG. Jest to kontynuacja ulepszenia obsługi mask CSS w Chrome 120. Dodano nowe maski SVG (wielokrotnie, a także mask-mode, mask-composite, mask-position i mask-repeat). Ponadto obsługiwane są teraz maski SVG z dalszych miejsc (np. mask: url(masks.svg#star)).

Poprawka: w poprzedniej wersji tego artykułu wspomniano o obsłudze warunków supports() w tabeli @import, co nie było dobrym rozwiązaniem. Ta zmiana została uwzględniona w Chrome 122.

Aktualizacje interfejsu Speculation Rules API

Witryny mogą używać interfejsu Speculation Rules API, aby programowo informować Chrome, które strony mają być renderowane z wyprzedzeniem. Dzięki temu czas nawigacji po stronach jest krótszy, co poprawia komfort korzystania z witryny.

Interfejs API obsługuje teraz reguły dotyczące dokumentu: są one rozszerzeniem składni reguł spekulacyjnych, która umożliwia przeglądarce uzyskanie listy adresów URL do spekulacyjnego wczytywania z elementów na stronie. Reguły dokumentu mogą zawierać kryteria określające, których linków można używać. W połączeniu z nowym polem „zainteresowanie” możesz automatycznie pobierać lub renderować wstępne linki na stronach natychmiast, po najechaniu kursorem lub naciśnięciu przycisku myszy.

Oto przykład reguł dokumentu:

{
  "prerender": [
    {"where": {"and": [
       {"href_matches": "/*"},
       {"not": {"href_matches": "/logout"}},
       {"not": {"selector_matches": ".no-prerender"}}
     ]}}
  ]
}

Oddzielna zmiana umożliwia określenie reguł spekulacyjnych za pomocą nagłówka odpowiedzi HTTP Speculation-Rules. Nagłówek jest alternatywą dla elementów <script> wbudowanych. Wartością tego nagłówka musi być adres URL wskazujący zasób tekstowy z typem MIME "application/speculationrules+json". Reguły zasobu zostaną dodane do zbioru reguł dokumentu.

Dodatkowo wskazówka No-Vary-Search umożliwia spekulacyjne pobieranie z wyprzedzeniem nawet wtedy, gdy parametry zapytania w adresie URL ulegną zmianie. Nagłówek odpowiedzi HTTP No-Vary-Search deklaruje, że niektóre lub wszystkie części zapytania adresu URL mogą zostać zignorowane na potrzeby dopasowywania. Możesz określić, że kolejność kluczy parametrów zapytania nie powinna uniemożliwiać dopasowań, że określone parametry zapytania nie powinny uniemożliwiać dopasowań lub że tylko określone znane parametry zapytania powinny powodować niezgodności.

Więcej informacji o tych zmianach znajdziesz w artykule Ulepszenia interfejsu API reguł spekulacji.

Testowanie origin interfejsu Element Capture API

Interfejs Element Capture API jest dostępny w ramach testowania origin. Ten interfejs API umożliwia przechwycenie i zapisanie konkretnego elementu HTML. Przekształca ono zrzut całej karty w zrzut konkretnego poddrzewa DOM, obejmując tylko bezpośrednich potomków elementu docelowego. Inaczej mówiąc, przycina i usuwa zarówno zasłaniające, jak i zasłaniane treści.

Przykładem zastosowania interfejsu Element Capture API jest aplikacja do rozmów wideo, która umożliwia umieszczanie aplikacji innych firm w ramce iframe. W tym scenariuszu możesz użyć iframe jako filmu i przesłać go do uczestników zdalnych.

Zrzut ekranu z rozmowy wideo w Chrome
Elad używa aplikacji innej firmy podczas rozmowy wideo z François.

Pamiętaj, że możesz użyć nagrywania obszaru, ale w tym przypadku, jeśli niektóre treści, np. lista rozwijana, są nakładane na wybrane treści, lista będzie częścią nagrania.

Zrzut ekranu pokazujący listę rozwijaną.
Lista rozwijana przez Ella wyświetla się nad treściami otrzymanymi przez François.

Interfejs Element Capture API rozwiązuje ten problem, umożliwiając kierowanie na element, który chcesz udostępnić.

Zrzut ekranu pokazujący element docelowy bez listy.
François nie widzi listy z Elad.

Aby uzyskać przykłady kodu i zarejestrować się na trial wersji natywnej ElementCapture, zapoznaj się z artykułem Przechwytywanie strumienia wideo z dowolnego elementu.

I inne funkcje

Oczywiście jest ich znacznie więcej.

  • Metody resizeBy() i resizeTo(), które są częścią interfejsu Document Picture-in-Picture API, wymagają teraz wykonania przez użytkownika odpowiedniego gestu.

  • Selektor opcji elementu <select> możesz otwierać automatycznie za pomocą metody showPicker() HTMLSelectElement.

  • scope_extensions, jest w wersji próbnej, umożliwia rozszerzenie zachowania aplikacji internetowej o inne źródła, jeśli istnieje zgodność między głównym źródłem aplikacji internetowej a powiązanymi źródłami.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 121, kliknij te linki.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał w YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy tylko opublikujemy nowy film.

Witam, jestem Adriana Jara. Gdy tylko pojawi się nowa wersja Chrome 122, opowiem Ci, co nowego w tej przeglądarce.