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 do SVG (wiele masek oraz mask-mode, mask-composite, mask-position i mask-repeat). Dodatkowo obsługiwane są teraz maski SVG z dalszych miejsc (np. mask: url(masks.svg#star)).

Poprawka: w poprzedniej wersji tego artykułu wspominaliśmy o dodaniu obsługi warunków supports() do reguł @import, ale tak naprawdę tak się nie stało. 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 dotyczące dokumentów mogą określać, które z tych 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ł spekulacji 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 na zasób tekstowy o typie MIME "application/speculationrules+json". Reguły zasobu zostaną dodane do zbioru reguł dokumentu.

Ponadto podpowiedź No-Vary-Search umożliwia dopasowanie domyślnego pobierania w przyszłości nawet wtedy, gdy parametry zapytania w adresie URL ulegną zmianie. Nagłówek odpowiedzi HTTP No-Vary-Search określa, że niektóre lub wszystkie części zapytania w adresie URL mogą być ignorowane na potrzeby dopasowywania. Możesz w nim 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 wideokonferencji 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 z wyświetloną listą rozwijaną
Lista rozwijana Elada pojawia się nad treściami otrzymanymi przez Françoisa.

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 widocznej listy rozwijanej
François nie widzi listy z Elad.

Aby uzyskać przykłady kodu i zarejestrować się w programie testów wersji źródłowej 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.

  • Za pomocą metody HTMLSelectElement showPicker() możesz otworzyć selektor opcji elementu <select>.

  • 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

Ta lista zawiera 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.