Nowe jednostki widocznego obszaru CSS, interfejs Federated Credential Management API, czcionki zmiennej COLRv1 i inne ulepszenia.
O ile nie zaznaczono inaczej, zmiany opisane poniżej dotyczą najnowszej wersji kanału beta Chrome na systemy Android, ChromeOS, Linux, macOS i Windows. Więcej informacji o funkcjach znajdziesz, klikając odpowiednie linki lub korzystając z listy na ChromeStatus.com. Chrome 108 jest w wersji beta od 27 października 2022 r. Najnowsze wersje możesz pobrać ze strony Google.com na komputer lub ze Sklepu Google Play na urządzeniu z Androidem.
CSS
Chrome 108 zawiera wiele nowych funkcji CSS.
CSS Overflow dla zastąpionych elementów
Zaczniemy wprowadzać w Chrome zmianę, która umożliwi deweloperom korzystanie z dotychczasowej właściwości overflow z zastąpionymi elementami, które malują się poza polem treści. W połączeniu z zasadą object-view-box można jej użyć do utworzenia obrazu z niestandardową poświatą lub cieniem, z prawidłowym działaniem nadmiaru atramentu jak w przypadku cienia CSS.
Może to być zmiana, która może spowodować niezgodność. Więcej informacji znajdziesz w artykule Zmiana rozmiaru elementów, które zostały zastąpione.
Małe, duże, dynamiczne i logiczne jednostki widocznego obszaru
Zwiększa to obsługę małych (svw, svh, svi, svb, svmin, svmax), dużych (lvw, lvh, lvi, lvb, lvmin, lvmax), jednostek dynamicznych (dvw, dvh, dvi, dvb, dvmin, dvmax) i logicznych (vi, vb).
Obsługa CSS 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 uszkodziła elementu przed, po ani wewnątrz elementu, do którego została zastosowana. Na przykład poniższy kod CSS pozwala uniknąć uszkodzenia postaci w podziałie strony.
figure {
break-inside: avoid;
}
Ta funkcja została dodana, ponieważ Chrome 108 obsługuje drukowanie w formacie LayoutNG.
Ostatnie wyrównanie elementu podstawowego
Ta funkcja umożliwia programistom wyrównanie elementów w układzie elastycznym lub siatki według ostatniego punktu odniesienia, a nie 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, które jest uruchamiane w elemencie z atrybutem content-visibility: auto, gdy stan renderowania elementu zmieni się zgodnie z którymkolwiek z atrybutów, które sprawiają, że element jest odpowiedni dla użytkownika.
Dzięki temu programiści mają większą kontrolę nad momentem zatrzymania lub rozpoczęcia renderowania w odpowiedzi na zatrzymanie lub rozpoczęcie renderowania poddrzewa widoczności treści. Deweloper może na przykład zatrzymać aktualizacje React w drzewie podrzędnym, które nie jest renderowane przez klienta użytkownika. Programista może też chcieć zatrzymać wszelkie inne aktualizacje skryptu (np. aktualizacje canvas), jeśli klient użytkownika nie renderuje elementu.
Internetowe interfejsy API
Zarządzanie sfederowanymi danymi logowania (dawniej WebID)
Interfejs Federated Credential Management API umożliwia użytkownikom korzystanie ze sfederowanej tożsamości podczas logowania się w witrynach w sposób zgodny z ulepszeniami ochrony prywatności w przeglądarkach.
Rozszerzenia źródeł multimediów w instancjach roboczych
Włącza korzystanie z interfejsu API rozszerzeń źródła (MSE) z kontekstów DedicatedWorker, co pozwala poprawić wydajność buforowania multimediów na potrzeby odtwarzania przez element HTMLMediaElement w kontekście głównego okna. Po utworzeniu obiektu MediaSource w kontekście DedicatedWorker aplikacja może uzyskać z niego identyfikator MediaSourceHandle i przenieść ten uchwyt do wątku głównego, by móc go dołączyć do elementu HTMLMediaElement. Kontekst, który utworzył obiekt MediaSource, może potem używać go do buforowania multimediów.
Sec-CH-Prefers-Reduced-Motion – nagłówek wskazówek dla klienta dotyczących funkcji medialnych dotyczących ustawień użytkownika
User Preference Media Functions Client Hints Headers (Nagłówki wskazówek klienta dotyczących funkcji multimedialnych w preferencjach użytkownika) definiuje zestaw nagłówków wskazówek dotyczących klienta HTTP związanych z funkcjami multimedialnymi ustawionymi przez użytkownika zgodnie z definicją w sekcji Zapytania o multimedia na poziomie 5. Nagłówki te, używane jako kluczowe wskazówki dla klienta, pozwalają serwerom podejmować trafne decyzje dotyczące na przykład wstawiania CSS. Sec-CH-Prefers-Reduced-Motion odpowiada preferencjom użytkownika w zakresie prefers-reduced-motion.
Czytniki BYOB w WebTransport
Obsługuje czytniki BYOB(własny bufor) dla WebTransport, umożliwiając odczyt w buforze utworzonym przez programistę. Czytniki BYOB mogą minimalizować kopie buforowane i ograniczać przydziały pamięci.
Symbole wieloznaczne w źródłach zasad dotyczących uprawnień
Specyfikacja zasad dotyczących uprawnień definiuje mechanizm, który umożliwia programistom selektywne włączanie i wyłączanie różnych funkcji przeglądarki i interfejsów API. Jedna z funkcji tego mechanizmu umożliwia włączanie funkcji tylko w przypadku wyraźnie wskazanych źródeł (np. https://foo.com/). Ten mechanizm nie jest wystarczająco elastyczny przy projektowaniu niektórych sieci CDN, które dostarczają treści za pośrednictwem punktu początkowego, który może być hostowany w jednej z kilkuset możliwych subdomen.
Dlatego ta funkcja dodaje obsługę symboli wieloznacznych w zasadach dotyczących uprawnień o strukturze takiej jak SCHEME://*.HOST:PORT (np. https://*.foo.com/), gdzie prawidłowe źródło może być utworzone na podstawie SCHEME://HOST:PORT (na przykład https://foo.com/). Wymaga to, aby HOST był domeną, którą można zarejestrować. Oznacza to, że usługa https://*.bar.foo.com/ działa, ale https://*.com/ nie będzie działać (jeśli chcesz zezwolić na korzystanie z tej funkcji wszystkim domenom, przekaż dostęp do *).
Metody synchronizacji obiektów 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 ogranicza wydajność i łatwość obsługi, zwłaszcza w przypadku aplikacji przenoszących C/C++ do Wasm. Ta aktualizacja przyniesie spójność w korzystaniu z interfejsu API i zwiększy wydajność bibliotek opartych na Wasm.
Jest to potencjalna zmiana, która może powodować niezgodność. Więcej informacji na ten temat znajdziesz w artykule Zmiana powodująca zmiany: metody synchronizacji elementów AccessHandles.
Warunkowy interfejs WebAuthn
Interfejs warunkowy WebAuthn jest obsługiwany w systemie Windows 22H2 lub nowszym, macOS oraz na Androidzie P i nowszych. Odświeżyliśmy też interfejs WebAuthn na platformach stacjonarnych.
Zmienne COLRv1 i wykrywanie ich cech
Obsługa czcionek zmiennych COLRv1
COLRv1 – wektorowe czcionki kolorów są obsługiwane od Chrome 98, ale w tej pierwszej wersji obsługiwały tylko funkcje statyczne tabeli COLRv1. Specyfikacja COLRv1 definiuje integrację z odmianami OpenType, które umożliwiają modyfikowanie właściwości czcionki gradientów i przekształceń przez zmianę parametrów osi zmiennych. Ten drugi etap obsługuje takie odmiany w modelu 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 adresem CSS @supports umożliwia wykrywanie technologii czcionek i obsługi formatów oraz stopniowego ulepszania treści. Poniżej znajduje się przykład sprawdzania obsługi czcionek COLRv1.
@supports font-tech(color-COLRv1) {
}
Obsługa funkcji tech() w deskryptorze @font-face src:
Czcionki CSS na poziomie 4 zapewniają dodatkowe sposoby wyboru i filtrowania zasobów czcionek. Wprowadzono funkcję tech(), która umożliwia przekazanie listy technologii czcionek wymaganych do działania danego obiektu blob czcionki. Na tej podstawie klient użytkownika wybierze pierwszy odpowiedni zasób.
Chrome na Androida
Android OSK domyślnie zmienia rozmiar widocznego obszaru
Klawiatura ekranowa Androida domyślnie zmienia rozmiar widocznego obszaru zamiast początkowego zawierającego blok. Autorzy mogą zrezygnować z tej zmiany za pomocą nowego klucza meta-viewport interactive-widget.
Wersje próbne origin
Ta wersja Chrome ma 2 nowe wersje próbne źródła.
Tożsamość sprzedawcy w canmakepayment zdarzeniu
Zdarzenie service worker canmakepayment informuje sprzedawcę, czy użytkownik ma kartę zapisaną w zainstalowanej aplikacji płatniczej. Dyskretnie przekazuje do mechanizmu Service Worker dane dotyczące pochodzenia sprzedawcy i dowolne dane ze źródła aplikacji płatniczej. Ta komunikacja między domenami odbywa się w konstrukcji PaymentRequest w języku JavaScript, nie wymaga gestu użytkownika i nie pokazuje interfejsu użytkownika. Okres próbny w zakresie usuwania pól tożsamości z polecenia „canmakepayment” zdarzenie można włączyć w: chrome://flags/#clear-identity-in-can-make-payment. Włączenie tej flagi spowoduje opróżnienie pól tożsamości w kolumnie „canmakepayment” (i intencję IS_READY_TO_PAY na Androidzie).
Więcej informacji znajdziesz w artykule Aktualizacja działania CanMakePayment interfejsu Payment Handler API.
Interfejs API NotRestoredReason w pamięci podręcznej stanu strony internetowej
Interfejs NotRestoredReason API zgłasza za pomocą interfejsu PerformanceNavigationTiming API listę przyczyn, dla których strona nie jest wyświetlana z pamięci podręcznej BFcache w strukturze drzewa ramek.
Strony mogą być blokowane w pamięci podręcznej funkcji BFcache z różnych powodów, takich jak z powodów wymaganych przez specyfikację lub z przyczyn związanych z implementacją przeglądarki. Deweloperzy mogą zbierać w swojej witrynie współczynnik trafień BFCache, używając parametru PerformanceNavigationTiming.type(back-forward) i trwałego parametru obsługi pokazu stron. Ten interfejs API pozwala witrynom zbierać informacje o przyczynach braku użycia BFCache w nawigacji po historii, dzięki czemu mogą podjąć działania w związku z poszczególnymi przyczynami i zapewnić zgodność strony z BFCache.
Wycofania i usuwanie
Ta wersja Chrome wprowadza informacje o wycofaniach i usunięciach wymienionych poniżej. Na ChromeStatus.com znajdziesz listy planowanych wycofania, obecnie wycofanych funkcji i wcześniejszych usunięć.
Elementy wycofane
W tej wersji Chrome wycofaliśmy 1 funkcję.
Wycofaj i usuń window.defaultStatus oraz window.defaultstatus
To niestandardowe interfejsy API, które nie są zaimplementowane przez wszystkie przeglądarki i nie wpływają na ich działanie. Dzięki temu zostaną wyczyszczone i usunie się potencjalny sygnał pobrania odcisku palca.
Pierwotnie służyły one do modyfikowania/kontrolowania „paska stanu” tekstu u dołu okien przeglądarki. Nigdy nie miały one jednak żadnego rzeczywistego wpływu na pasek stanu Chrome i nie są standardowymi atrybutami. Gekon nie obsługuje tych atrybutów od wersji 23; WebKit nadal obsługuje te atrybuty. Powiązany atrybut window.status jest ustandaryzowany, ale nie może też mieć wpływu na pasek stanu okna.
Usunięcia
W tej wersji Chrome usunęliśmy cztery funkcje.
Usuń: ImageDecoderInit.premultiplyAlpha
Ta funkcja nie ma dostrzegalnych skutków w głównych przypadkach użycia, ale może ograniczać implementacje w nieoptymalny sposób. Bardziej szczegółowy opis znajdziesz w tym problemie. Zgodnie z konsensusem edytorów specyfikacji WebCodecs i brakiem użycia (0,000000339%–0,00000687% przypadków wczytań strony na licznik wykorzystania w wersji M106).
Usuń: navigateEvent.restoreScroll()
Komponent restoreScroll() jest zastępowany przez usługę navigateEvent.scroll(). scroll() działa identycznie, z tym że pozwala deweloperowi kontrolować czas przewijania w przypadku nawigacji bez przechodzenia wstecz (scroll() działa, gdy przewijanie nie jest przywracane, dlatego nazwa zmienia się wraz ze zmianą działania).
Usuń: navigateEvent.transitionWhile()
transitionWhile() jest zastępowany przez aplikację navigateEvent.intercept() z powodu błędów w projekcie zgłoszonych przez deweloperów. intercept() działa niemal identycznie jak przechodzenie przy użyciu funkcji wpisu, ale zamiast obowiązkowego parametru Promise wykorzystuje opcjonalną funkcję obsługi, która zwraca obietnicę. Dzięki temu przeglądarka może kontrolować czas wykonywania modułu obsługi. Jest to bardziej intuicyjne i bardziej intuicyjne niż w transitionWhile().
Usuń element googIPv6 MediaConstraint WebRTC
Za pomocą "googIPv6: false" można wyłączyć obsługę IPv6 w WebRTC, jak w poniższym przykładzie.
new RTCPeerConnection({}, {mandatory:{googIPv6:false}});
Protokół IPv6 był domyślnie włączony od wielu lat i nie powinniśmy być w stanie go wyłączyć. To jest starsza wersja interfejsu API, którego nie ma w specyfikacji.