Nowości w Chrome 121

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

Nazywam się Adriana Jara. Przyjrzyjmy się nowościom dla deweloperów w Chrome 121.

Aktualizacje CSS.

Zacznijmy od aktualizacji CSS:

Usługi scrollbar-color i scrollbar-width są już dostępne. Możesz za ich pomocą dostosować paski przewijania i zmieniać ich kolor i szerokość (jak łatwo się domyślić).

Właściwość font-palette pozwala wybrać konkretną paletę do renderowania czcionki kolorów. Ta właściwość obsługuje teraz animację, więc przełączanie się między paletami staje się płynnym przejściem między 2 wybranymi paletami.

Pseudoelementy ::spelling-error i ::grammar-error pozwalają dostosowywać kolory pod kątem błędów ortograficznych i gramatycznych, wyróżniać błędnie napisane słowa za pomocą kolorów tła lub innych elementów dekoracyjnych, a także wprowadzać niestandardowe sprawdzanie pisowni dzięki bardziej zintegrowanemu wyglądowi.

Ulepszyliśmy maskowanie CSS w przypadku SVG. Jest to uzupełnienie udoskonalonej obsługi masek CSS w Chrome 120, które obejmuje dodanie obsługi masek do SVG (wielu masek, a także mask-mode, mask-composite, mask-position i mask-repeat). Dodatkowo obsługiwane są też zdalne maski SVG (np. maska: url(masks.svg#star)).

Poprawka: w poprzedniej wersji tego artykułu wspominaliśmy o dodaniu do zasady @import obsługi warunków supports(), co nie było prawdą. Ta zmiana jest dostępna w Chrome 122.

Aktualizacje interfejsu spekulacyjnego interfejsu API

Witryny mogą używać interfejsu API reguł spekulacyjnych, aby automatycznie informować Chrome o tym, które strony mają być wyrenderowane wstępnie. Dzięki temu przeglądanie stron jest bardziej komfortowe dla użytkowników.

Teraz interfejs API obsługuje reguły dokumentów – stanowią one rozszerzenie składni reguł spekulacyjnych, które umożliwia przeglądarce pobieranie listy adresów URL z elementów strony na potrzeby ładowania spekulacyjnego. Reguły dokumentu mogą zawierać kryteria określające, które z tych linków mogą być używane. Razem z nowym polem „zainteresowanie” umożliwia automatyczne pobieranie lub wstępne renderowanie linków ze stron bezpośrednio po najechaniu kursorem myszy 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ślanie reguł spekulacyjnych za pomocą nagłówka odpowiedzi HTTP Speculation-Rules. Nagłówek jest alternatywą dla wbudowanych elementów <script>. Wartość tego nagłówka musi być adresem URL wskazującym zasób tekstowy o typie MIME "application/speculationrules+json". Reguły zasobu zostaną dodane do zestawu reguł dokumentu.

Wskazówka No-Vary-Search umożliwia też dopasowywanie spekulacyjnych żądań z wyprzedzeniem nawet wtedy, gdy ulegną zmianie parametrów zapytania w adresie URL. Nagłówek odpowiedzi HTTP No-Vary-Search deklaruje, że niektóre lub wszystkie części zapytania adresu URL mogą być ignorowane w celu dopasowania. Może zadeklarować, że kolejność kluczy parametrów zapytania nie powinna uniemożliwiać dopasowań, że określone 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 przechwycenie i zarejestrowanie określonego elementu HTML. Przekształca przechwycony całą kartę w przechwycone określonego poddrzewa DOM, rejestrując tylko bezpośrednie elementy podrzędne elementu docelowego. Inaczej mówiąc, narzędzie to przycina i usuwa zarówno treści zasłaniające, jak i zasłonięte.

Interfejs Element Capture API jest przydatny na przykład w aplikacji do rozmów wideo, która umożliwia umieszczanie aplikacji innych firm w elemencie iframe. W takiej sytuacji możesz przechwycić ten element iframe jako film i przesłać go do zdalnych uczestników.

Zrzut ekranu przedstawiający rozmowę wideo w Chrome.
Elad używa aplikacji innej firmy podczas rozmowy wideo z Franciszkiem.

Możesz to zrobić za pomocą funkcji Przechwytywanie regionu. Jeśli jednak pewne treści, na przykład menu, są wyświetlane na wybranej zawartości, to menu zostanie umieszczone w nagraniu.

Zrzut ekranu z wykonaną listą.
Lista Elada wyświetla się u góry treści otrzymanych przez François.

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

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

Kup Przechwytywanie strumienia wideo z dowolnego elementu, aby zobaczyć przykłady kodu i zarejestruj się, aby wziąć udział w testowaniu źródła ElementCapture

…i wiele innych.

Oczywiście, jest ich jeszcze więcej.

  • 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 otworzyć automatycznie za pomocą metody showPicker() o wartości HTMLSelectElement.

  • scope_extensions, jest w okresie testowania origin, umożliwia rozszerzenie działania aplikacji internetowej o inne źródła, jeśli jest zgodne między ich głównym źródłem a powiązanymi źródłami.

Więcej informacji

Ta analiza obejmuje tylko niektóre najważniejsze kwestie. Poniżej znajdziesz informacje o dodatkowych zmianach w Chrome 121.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers w YouTube. Będziesz otrzymywać e-maile z powiadomieniami o każdym nowym filmie.

Cześć Adriana Jara, a gdy tylko pojawi się Chrome 122, będę informować Cię o nowościach w Chrome.