Nowe jednostki widocznego obszaru CSS, interfejs Federated Credential Management API, czcionki zmiennych COLRv1 i nie tylko.
O ile nie zaznaczono inaczej, zmiany opisane poniżej dotyczą najnowszych wersji beta Chrome na Androida, ChromeOS, Linux, macOS i Windows. Dowiedz się więcej o funkcjach wymienionych na tej liście, korzystając z podanych linków lub z listy na ChromeStatus.com. Od 27 października 2022 r. Chrome 108 jest w wersji beta. Najnowsze aktualizacje możesz pobrać z Google.com na komputer lub ze Sklepu Google Play na Androida.
CSS
Chrome 108 zawiera kilka nowych funkcji CSS.
CSS Overflow dla zastąpionych elementów
W Chrome zaczniemy wprowadzać zmianę, która pozwoli deweloperom używać dotychczasowej właściwości overflow z zastąpionymi elementami, które są wyświetlane poza polem treści. W połączeniu z atrybutem object-view-box można utworzyć obraz z niestandardową poświatą lub cieniem, zachowując jednocześnie przepełnienie atramentu w taki sam sposób jak w przypadku cienia CSS.
Jest to potencjalna zmiana niekorzystna. Więcej informacji znajdziesz w artykule Zmiana dotycząca nadmiaru elementów w zastąpionych elementach.
Małe, duże, dynamiczne i logiczne jednostki widocznego obszaru.
Pozwala dodać obsługę małych (svw, svh, svi, svb, svmin, svmax), dużych (lvw, lvh, lvi, lvb, lvmin, lvmax), dynamicznych (dvw, dvh, dvi, dvb, dvmin, dvmax) i jednostek logicznych (vi, vb).
Obsługa usług porównywania cen: break-after, break-before i break-inside
Obsługa wartości unikania właściwości fragmentacji CSS break-before, break-after i break-inside podczas drukowania. Ta wartość informuje przeglądarkę, aby nie doszło do uszkodzenia elementu przed jego zastosowaniem, po nim lub wewnątrz niego. Poniższy kod CSS zapobiega na przykład podziałowi strony.
figure {
break-inside: avoid;
}
Ta funkcja została dodana w związku z dodaniem w Chrome 108 obsługi drukowania w formacie LayoutNG.
Ostatnie wyrównanie elementu bazowego
Ta funkcja umożliwia programistom wyrównywanie elementów w układzie elastycznym lub siatki według ostatniego punktu odniesienia, a nie według pierwszego. Możesz to zrobić za pomocą tych właściwości:
align-items: last baseline;justify-items: last baseline;align-self: last baseline;justify-self: last baseline;
ContentVisibilityAutoStateChanged zdarzenie
Zdarzenie wywoływane w przypadku elementu z atrybutem content-visibility: auto, gdy stan renderowania tego elementu zmieni się z powodu dowolnego z atrybutów, które sprawiają, że ten element jest odpowiedni dla użytkownika.
W tym przypadku deweloperzy mają większą kontrolę nad tym, kiedy zatrzymać lub rozpocząć renderowanie w odpowiedzi na zatrzymanie lub rozpoczęcie renderowania poddrzewa widoczności treści przez klienta użytkownika. Deweloper może na przykład chcieć zatrzymać aktualizacje reakcji w drzewie podrzędnym, które nie jest renderowane przez klienta użytkownika. Podobnie programista może chcieć zatrzymać wszystkie inne aktualizacje skryptu (na przykład aktualizacje obiektu canvas), gdy klient użytkownika nie renderuje elementu.
Internetowe interfejsy API
Zarządzanie sfederowanymi danymi logowania (wcześniej WebID)
Interfejs Federated Credential Management API umożliwia użytkownikom logowanie się w witrynach za pomocą sfederowanej tożsamości w sposób zgodny z ulepszeniami ochrony prywatności w przeglądarkach.
Rozszerzenia źródła multimediów w instancjach roboczych
Włącza używanie interfejsu Media Source Extensions (MSE) API na podstawie kontekstów DedicatedWorker w celu zwiększenia wydajności buforowania multimediów do odtwarzania przez element HTMLMediaElement w głównym kontekście okna. Gdy utworzysz obiekt MediaSource w kontekście DedicatedWorker, aplikacja może następnie uzyskać z niej obiekt MediaSourceHandle i przenieść ten uchwyt do wątku głównego, aby użyć go w dołączaniu do elementu HTMLMediaElement. Kontekst, który utworzył obiekt MediaSource, może następnie użyć go do buforowania multimediów.
Sec-CH-Prefers-Reduced-Motion nagłówek wskazówek dotyczących obsługi klienta w funkcjach multimedialnych preferencji użytkownika
Nagłówki podpowiedzi klienta dotyczących preferencji użytkownika definiują zestaw nagłówków HTTP wskazówek dotyczących funkcji multimedialnych związanych z preferencjami użytkownika, zgodnie z definicją w dokumencie Zapytania o multimedia na poziomie 5. Te nagłówki, jeśli są używane jako kluczowe wskazówki klienta, pozwalają serwerom dokonywać mądrych wyborów dotyczących na przykład wbudowywania CSS. Wartość Sec-CH-Prefers-Reduced-Motion odzwierciedla ustawienia prefers-reduced-motion użytkownika.
Czytniki WebTransport BYOB
Obsługuje czytniki BYOB(używanie własnego bufora) na potrzeby WebTransport, co umożliwia odczyt do bufora dostarczonego przez programistę. Czytniki BYOB mogą zminimalizować ilość kopii bufora i zmniejszyć przydział pamięci.
Symbole wieloznaczne w źródłach zasad dotyczących uprawnień
Specyfikacja zasad dotyczących uprawnień definiuje mechanizm, który pozwala programistom na selektywne włączanie i wyłączanie różnych funkcji przeglądarek i interfejsów API. Jedna z możliwości tego mechanizmu pozwala na włączanie funkcji tylko w przypadku wyraźnie wymienionych źródeł (np. https://foo.com/). Ten mechanizm nie jest wystarczająco elastyczny, aby projektować niektóre sieci CDN, które dostarczają treści za pomocą źródła, które może być hostowane w jednej z kilkuset możliwych subdomen.
Dlatego w ramach zasad uprawnień takich jak SCHEME://*.HOST:PORT (na przykład https://*.foo.com/) można dodać obsługę symboli wieloznacznych. Ta funkcja wymaga, aby na podstawie SCHEME://HOST:PORT można było utworzyć prawidłowe źródło (na przykład https://foo.com/). W związku z tym HOST musi być domeną, którą można zarejestrować. Oznacza to, że funkcja https://*.bar.foo.com/ działa, ale https://*.com/ nie. Jeśli chcesz zezwolić na korzystanie z niej we wszystkich domenach, przekaż je domenie *.
Metody synchronizacji dla AccessHandles w interfejsie File System Access API
Aktualizuje metody asynchroniczne flush(), getSize() i truncate() w FileSystemSyncAccessHandle w interfejsie File System Access API na metody synchroniczne.
FileSystemSyncAccessHandle oferuje obecnie połączenie metod synchronizacji i asynchronicznych, co zmniejsza wydajność i łatwość obsługi, zwłaszcza w przypadku aplikacji przenoszonych do Wasm z C/C++. Ta aktualizacja zapewni spójność w korzystaniu z interfejsu API i poprawi wydajność bibliotek opartych na Wasm.
Jest to potencjalna zmiana powodująca niezgodność. Więcej informacji znajdziesz w artykule Niezbędna zmiana: metody synchronizacji dla AccessHandles.
Interfejs warunkowego WebAuthn
Interfejs warunkowy WebAuthn jest obsługiwany w systemie Windows 22H2 lub nowszym, macOS oraz Android P lub nowszym. Odświeżyliśmy też interfejs WebAuthn na platformach stacjonarnych.
Zmienne czcionki COLRv1 i wykrywanie ich funkcji
Obsługa zmiennych czcionek COLRv1
Czcionki wektorowych kolorów COLRv1 są obsługiwane od Chrome 98, ale ta pierwsza wersja obsługiwała tylko statyczną funkcjonalność tabeli COLRv1. Specyfikacja COLRv1 definiuje integrację z odmianami OpenType, co umożliwia modyfikowanie właściwości czcionki gradientów i przekształcanie za pomocą modyfikacji parametrów osi zmiennych. Ten drugi etap zapewnia obsługę takich odmian w COLRv1.
Rozszerzenia warunków font-tech() i font-format() w CSS @supports
Używanie atrybutów font-tech() i font-format() w połączeniu z elementami @supports CSS umożliwia wykrywanie technologii czcionek i obsługi formatów, a także progresywne ulepszanie treści. Poniżej znajdziesz przykładowe testy obsługi czcionek COLRv1.
@supports font-tech(color-COLRv1) {
}
Obsługa funkcji tech() w deskryptorze @font-face src:
CSS Fonts Level 4 udostępnia dodatkowe sposoby wyboru i filtrowania zasobów czcionek. Wprowadziliśmy funkcję tech(), która umożliwia przekazywanie listy technologii czcionek, których wymaga do działania odpowiedni obiekt blob czcionki. Na podstawie tej informacji klient użytkownika wybierze pierwszy odpowiedni zasób.
Chrome na Androida
OSK Androida domyślnie zmienia rozmiar widocznego obszaru
Klawiatura ekranowa Androida domyślnie zmienia rozmiar widocznego obszaru, a nie początkowy blok. Autorzy mogą zrezygnować z tej funkcji, używając nowego klucza meta widocznego obszaru interactive-widget.
Testowanie origin
Ta wersja Chrome ma 2 nowe wersje próbne źródła.
Tożsamość sprzedawcy w zdarzeniu canmakepayment
Zdarzenie service worker canmakepayment informuje sprzedawcę, czy użytkownik ma kartę zapisaną w zainstalowanej aplikacji płatniczej. Przekazuje ono mechanizmowi service workerowi dyskretne dane pochodzenia i dowolne dane ze źródła aplikacji płatniczej. Ta komunikacja między domenami odbywa się w ramach konstrukcji PaymentRequest w JavaScript, nie wymaga gestu użytkownika i nie wyświetla interfejsu. Okres próbny usuwania pól tożsamości ze zdarzenia „canmakepayment” można włączyć dla programistów na stronie chrome://flags/#clear-identity-in-can-make-payment. Włączenie tej flagi spowoduje opróżnienie pól tożsamości w zdarzeniu „canmakepayment” (i intencji IS_READY_TO_PAY w Androidzie).
Więcej informacji znajdziesz w sekcji Aktualizacja działania zdarzenia CanMakePayment w interfejsie Payment Handler API.
Interfejs API NotRestoredReason w pamięci podręcznej stanu strony internetowej
Interfejs API NotRestoredReason wyświetli listę powodów, dla których strona nie jest wyświetlana z pamięci podręcznej BFcache, w strukturze drzewa ramek za pomocą interfejsu PerformanceTrackingTiming API.
Strony mogą zostać zablokowane w pamięci podręcznej stanu strony internetowej z różnych powodów, takich jak konieczność jest to specyfikacja czy implementacja przeglądarki. Programiści mogą zbierać dane na temat częstotliwości trafień BFCache w swojej witrynie, korzystając z trwałego parametru modułu obsługi pageshow i metody PerformanceNavigationTiming.type(back-forward). Umożliwia on witrynom gromadzenie informacji o tym, dlaczego dane BFCache nie są używane w przypadku nawigacji w historii. Dzięki temu można podjąć działania na podstawie każdej przyczyny i zapewnić zgodność strony z BFCache.
Wycofania i usunięcia
W tej wersji Chrome wprowadziliśmy wymienione poniżej funkcje wycofywania i usuwania. Na stronie ChromeStatus.com znajdziesz listę planowanych wycofań, bieżących wycofań oraz poprzednich usunięć.
Elementy wycofane
W tej wersji Chrome wycofujemy jedną funkcję.
Wycofaj i usuń window.defaultStatus oraz window.defaultstatus
To niestandardowe interfejsy API, które nie są zaimplementowane przez wszystkie przeglądarki i nie mają wpływu na ich działanie. Dzięki temu zostaną wyczyszczone i nie będzie pozostawiony sygnał odcisków palców.
Pierwotnie służyły one do modyfikowania i sterowania tekstem „paska stanu” u dołu okna przeglądarki. Nigdy nie miały one jednak żadnego rzeczywistego wpływu na pasek stanu Chrome i nie są to atrybuty standaryzowane. Gekon nie obsługuje tych atrybutów od wersji 23 (WebKit nadal je obsługuje). Powiązany atrybut window.status jest ustandaryzowany, ale nie może mieć wpływu na pasek stanu okna.
Usunięcia
W tej wersji Chrome usunęliśmy 4 funkcje.
Usuń: ImageDecoderInit.premultiplyAlpha
Funkcja nie ma dostrzegalnych efektów w głównych przypadkach użycia, ale może ograniczać implementacje w nieoptymalny sposób. Aby uzyskać bardziej szczegółowy opis, zapoznaj się z tym problemem. Zgodnie z opiniami edytorów specyfikacji WebCodecs i brakiem użycia (0,000000339% - 0,00000687% wczytań stron na użycie w wersji M106).
Usuń: navigateEvent.restoreScroll()
Pole restoreScroll() jest zastępowane przez navigateEvent.scroll(). Funkcja scroll() działa identycznie, z tym że pozwala deweloperowi kontrolować czas przewijania w przypadku nawigacji bez przesuwania (scroll() działa, gdy przewijanie nie jest przywracane, więc nazwa zmienia się wraz ze zmianą sposobu działania).
Usuń: navigateEvent.transitionWhile()
Element transitionWhile() został zastępowany przez parametr navigateEvent.intercept() z powodu błędów projektowych zgłoszonych przez deweloperów. Funkcja intercept() działa prawie identycznie jak metoda transferDuration(), ale zamiast obowiązkowego parametru Promise używa opcjonalnej funkcji obsługi, która zwraca obietnicę. Pozwala to przeglądarce kontrolować moment uruchomienia modułu, co jest później i bardziej intuicyjne niż w przypadku transitionWhile().
Usunięto zasadę googIPv6 mediaConstraint związaną z WebRTC
"googIPv6: false" umożliwia wyłączenie obsługi IPv6 w WebRTC, jak w poniższym przykładzie.
new RTCPeerConnection({}, {mandatory:{googIPv6:false}});
Protokół IPv6 jest domyślnie włączony od wielu lat i nie możemy go wyłączyć. To starsza wersja interfejsu API, której nie ma w specyfikacji.