Nowości w Chrome 121

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

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

Aktualizacje usługi porównywania cen.

Zacznijmy od aktualizacji CSS:

Właściwości scrollbar-color i scrollbar-width są już dostępne. Dzięki nim możesz dostosować paski przewijania i zmienić ich kolor oraz szerokość – jak się pewnie spodziewasz.

Właściwość font-palette umożliwia wybranie określonej palety kolorów do renderowania czcionki koloru. Ta właściwość obsługuje teraz animację, więc przełączanie się między paletami staje się płynnym przejściem między dwiema wybranymi paletami.

Pseudoelementy ::spelling-error i ::grammar-error pozwalają dostosowywać kolory błędów ortograficznych i gramatycznych, wyróżniać błędnie napisane słowa za pomocą kolorów tła i innych dekoracji, a także korzystać z bardziej zintegrowanego wyglądu sprawdzania pisowni.

Ulepszyliśmy maskowanie CSS dla SVG. Jest to uzupełnienie ulepszonej obsługi masek CSS w Chrome 120, polegającej na dodaniu obsługi masek do SVG (wielu masek oraz mask-mode, mask-composite, mask-position i mask-repeat). Dodatkowo obsługiwane są teraz zdalne maski SVG (np. maska: url(masks.svg#star)).

Poprawka: w poprzedniej wersji tego artykułu wspomniano o obsłudze warunków supports() w elemencie @import, co nie było dobrym rozwiązaniem. Ta zmiana jest dostępna 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ć wstępnie renderowane. Skraca to czas nawigacji, by zwiększyć wygodę użytkowników.

Teraz interfejs API obsługuje reguły dokumentów: są one rozszerzeniem składni reguł spekulacyjnych, które umożliwiają przeglądarce uzyskanie listy adresów URL na potrzeby ładowania spekulacyjnego z elementów strony. 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 natychmiast automatycznie pobierać lub wstępnie renderować linki ze stron na stronach, najeżdżając kursorem na ich elementy lub po najechaniu na nie kursorem 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 stosowania wbudowanych elementów <script>. 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 zestawu 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że zadeklarować, że kolejność kluczy parametrów zapytania nie powinna uniemożliwiać dopasowań, że konkretne parametry zapytania nie powinny uniemożliwiać dopasowań lub że tylko niektóre znane parametry zapytania powinny powodować niezgodności.

Więcej informacji o tych zmianach znajdziesz na stronie Ulepszenia interfejsu Speculation Rules API.

Testowanie origin interfejsu Element Capture API

Interfejs Element Capture API jest dostępny w ramach testowania origin. Ten interfejs API umożliwia przechwytywanie i rejestrowanie określonego elementu HTML. Przechwytuje całą kartę w formie konkretnego poddrzewa DOM, uwzględniając tylko bezpośrednie elementy potomne elementu docelowego. Inaczej mówiąc, przycina i usuwa zarówno ukryte, jak i zakryte treści.

Przykładem przydatnego interfejsu Element Capture API jest aplikacja do rozmów wideo, która umożliwia umieszczanie aplikacji innych firm w elemencie iframe. W takim przypadku można przechwycić ten element iframe jako film i przesłać go do uczestników zdalnych.

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

Możesz do tego użyć funkcji Zapis regionu. Jeśli jednak jakaś treść (np. lista rozwijana) zostanie umieszczona na zaznaczonej stronie, będzie ona częścią nagrania.

Zrzut ekranu pokazujący listę rozwijaną.
Lista Elada pojawi się nad treściami otrzymanymi przez François.

Interfejs Element Capture API rozwiązuje ten problem, umożliwiając kierowanie reklam na udostępniany element.

Zrzut ekranu pokazujący element docelowy bez listy.
François nie widzi listy rozwijanej od Elada.

Skorzystaj z opcji Przechwytuj strumień wideo z dowolnego elementu, aby zobaczyć przykłady kodu, i zarejestruj się, aby wziąć udział w testowaniu origin ElementCapture

I inne funkcje

Oczywiście istnieje też znacznie więcej możliwości.

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

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

  • scope_extensions jest w wersji próbnej origin, który pozwala rozszerzyć działania aplikacji internetowej na inne źródła, jeśli istnieje zgodność między podstawowym źródłem aplikacji internetowej a powiązanymi źródłami.

Więcej informacji

To tylko niektóre z najważniejszych informacji. Sprawdź te linki: dodatkowych zmian w Chrome 121.

Subskrybuj

Aby być na bieżąco, zasubskrybuj Kanał Chrome Developers w YouTube, a gdy będziemy mogli opublikować nowy film, otrzymasz e-maila z powiadomieniem.

Cześć Adrianę Jara. Gdy tylko Chrome 122 zostanie opublikowana, od razu opowiem, co nowego w Chrome.