Chrome 133 beta

Rachel Andrew

Data publikacji: 15 stycznia 2024 r.

O ile nie zaznaczono inaczej, poniższe zmiany dotyczą najnowszej wersji Chrome w kanale beta na Androida, ChromeOS, Linuxa, macOS i Windowsa. Więcej informacji o funkcjach wymienionych w tym artykule znajdziesz, klikając odpowiednie linki lub przeglądając listę na stronie ChromeStatus.com. Od 15 stycznia 2024 roku wersja Chrome 133 jest dostępna w wersji beta. Najnowszą wersję możesz pobrać na stronie Google.com na komputerze lub w Sklepie Google Play na urządzeniu z Androidem.

CSS i UI

Ta wersja zawiera 7 nowych funkcji CSS i interfejsu użytkownika.

Zaawansowana funkcja attr() CSS

Wprowadza rozszerzenie attr() określone w CSS Level 5, które umożliwia stosowanie typów innych niż <string> we wszystkich właściwościach CSS (oprócz istniejącej obsługi pseudoelementu content).

Więcej informacji znajdziesz w artykule Usługa porównywania cen attr() przechodzi modernizację.

Pseudoklasa CSS :open

Pseudoklasa :open pasuje do <dialog> i <details>, gdy jest otwarta, oraz do <select> i <input>, gdy jest w trybie z wyświetlonym selektorem.

Zapytania do kontenera stanu przewijania w CSS

Użyj zapytań dotyczących kontenera, aby nadać styl potomkom kontenera na podstawie ich stanu przewijania.

Kontenery zapytań to albo kontenery przewijania, albo elementy, na które wpływa pozycja przewijania kontenera przewijania. Możesz wysyłać zapytania o stany:

  • stuck: przyklejony kontener jest przytwierdzony do jednej z krawędzi pola przewijania.
  • snapped: kontener wyrównany do przesunięcia jest obecnie wyrównany poziomo lub pionowo.
  • scrollable: określa, czy kontener przewijania można przewijać w wyszukanym kierunku.

Nowa funkcja container-type: scroll-state umożliwia wysyłanie zapytań do kontenerów.

#sticky {
  position: sticky;
  container-type: scroll-state;
}

@container scroll-state(stuck: top) {
  #sticky-child {
    font-size: 75%;
  }
}

Więcej informacji znajdziesz w CSS scroll-state().

CSS text-box, text-box-trim i text-box-edge

Aby uzyskać optymalny balans treści tekstowych, właściwości text-box-trim i text-box-edge, a także właściwości text-box, umożliwiają dokładniejsze dopasowanie wyrównania pionowego tekstu.

Właściwość text-box-trim określa, które krawędzie mają zostać przycięte (górna lub dolna), a właściwość text-box-edge określa, jak ma być przycięta krawędź.

Te właściwości umożliwiają dokładne kontrolowanie odstępów pionowych za pomocą danych dotyczących czcionek. Więcej informacji znajdziesz w CSS text-box-trim.

Wartość hint atrybutu popover

Interfejs API Popover określa działanie dla 2 wartości atrybutu popover: auto i manual. Ta funkcja opisuje trzecią wartość: popover=hint. Wskazówki, które są najczęściej kojarzone z działaniem typu „wskaźnik”, działają nieco inaczej. Główna różnica polega na tym, że hint jest podrzędna do auto podczas otwierania zagnieżdżonych grup wyskakujących okienek. Oznacza to, że można otworzyć niezwiązane wyskakujące okienko hint, gdy istniejący zestaw wyskakujących okienek auto pozostaje otwarty.

Przykładem kanonicznego jest to, że otwarty jest selektor <select> (popover=auto) i wyświetla się etykietka (popover=hint), która pojawia się po najechaniu kursorem. To działanie nie powoduje zamknięcia selektora <select>.

Ulepszenia dotyczące wywoływania okna wyskakującego i pozycjonowania kotwicy

Dodaje imperatywny sposób na ustawienie relacji wywołania między wyskakującymi okienkami za pomocą popover.showPopover({source}). Umożliwia relacjom wywołania tworzenie domyślnych odwołań do elementów kotwicy.

Wyskakujące okienko zagnieżdżone w wywołaniu nie powinno ponownie wywoływać tego wywołania.

W tym przypadku kliknięcie przycisku powoduje prawidłowe włączenie wyskakującego okienka, ale kliknięcie samego okienka nie powinno go zamykać.

<button popovertarget=foo>Activate
  <div popover id=foo>Clicking me shouldn't close me</div>
</button>

Dotychczas miało to miejsce, ponieważ kliknięcie wyskakującego okienka powodowało wyświetlenie dymka <button> i aktywowało wywoływacz, który zamykał wyskakujące okienko. Teraz jest to oczekiwane zachowanie.

Interfejsy API w internecie

Animation.overallProgress

Zapewnia deweloperom wygodną i spójną reprezentację tego, jak daleko animacja posunęła się w cyklu, niezależnie od charakteru osi czasu. Bez właściwości overallProgress musisz ręcznie obliczyć, jak daleko posunęła się animacja, uwzględniając liczbę iteracji animacji i to, czy wartość currentTime animacji jest procentem całkowitego czasu (jak w przypadku animacji sterowanych przez przewijanie) czy bezwzględną ilością czasu (jak w przypadku animacji sterowanych przez czas).

Metoda pause() obiektu Atomics

Dodaje metodę pause() do obiektu przestrzeni nazw Atomics, aby zasugerować procesorowi, że bieżący kod wykonuje blokadę spinlocka.

Raportowanie haszowania przez dostawców usług dla twórców w przypadku skryptów

Z powodów bezpieczeństwa złożone aplikacje internetowe często muszą śledzić pobierane przez siebie zasoby podrzędne.

W szczególności nadchodzące standardy branżowe i sprawdzone metody (np. PCI-DSS w wersji 4) wymagają, aby aplikacje internetowe przechowywały spis wszystkich skryptów, które pobierają i uruchamiają.

Ta funkcja opiera się na CSP i interfejsie Reporting API, aby zgłaszać adresy URL i sumy kontrolne (w przypadku CORS/same-origin) wszystkich zasobów skryptu, które wczytuje dokument.

Przenoszenie z zachowaniem stanu DOM

Dodaje prymityw DOM (Node.prototype.moveBefore), który umożliwia przenoszenie elementów w drzewie DOM bez resetowania stanu elementu.

Podczas przenoszenia zamiast usuwania i wstawiania zachowane zostaną takie właściwości, jak:

  • Elementy <iframe> pozostają załadowane.
  • Aktywny element pozostaje zaznaczony.
  • Wyskakujące okienka, okna modalne i pełnoekranowe pozostają otwarte.
  • Przejścia i animacje CSS będą nadal działać.

Wyświetlanie atrybutu attributionsrc w elementach <area>

Dopasowuje wyświetlanie atrybutu attributionsrc w elementach <area> do dotychczasowego zachowania przetwarzania tego atrybutu, nawet jeśli nie było ono wcześniej widoczne.

Ponadto warto obsługiwać ten atrybut w przypadku elementu <area>, ponieważ jest to element nawigacji najwyższego rzędu, a Chrome obsługuje już ten atrybut w przypadku innych elementów <a> i window.open.

Wyświetlanie uproszczonych wartości renderTime z wielu domen w czasie trwania elementu i LCP (niezależnie od wartości Timing-Allow-Origin)

Elementy czasu i wartości LCP mają atrybut renderTime, który jest dopasowany do pierwszego kadru, w którym obraz lub tekst zostały wyrenderowane.

Ten atrybut jest obecnie chroniony w przypadku obrazów z różnych źródeł, ponieważ wymaga nagłówka Timing-Allow-Origin w zasobach obrazów. Ograniczenie to jest jednak łatwe do obejścia (np. przez wyświetlenie obrazu z tego samego źródła i z innego źródła w tej samej ramce).

Ponieważ było to źródłem zamieszania, planujemy zamiast tego usunąć to ograniczenie i zamiast tego zwiększyć czas renderowania o 4 ms, gdy dokument nie jest odizolowany między domenami. Wygląda na to, że jest to wystarczająco ogólne, aby uniknąć wycieku przydatnych informacji o czasie dekodowania dotyczących obrazów z innych źródeł.

Interfejs FileSystemObserver

Interfejs FileSystemObserver informuje strony internetowe o zmianach w systemie plików. Strony monitorują zmiany w plikach i katalogach, do których użytkownik wcześniej przyznał uprawnienia na swoim urządzeniu lokalnym lub w systemie plików katalogu (znanym też jako prywatny system plików Origin) i są powiadamiane o podstawowych informacjach o zmianach, takich jak typ zmiany.

Zatrzymanie w trybie oszczędzania energii

Gdy tryb oszczędzania energii jest aktywny, Chrome zamraża „grupę kontekstu przeglądania”, która była ukryta i nieaktywna przez ponad 5 minut, jeśli jakakolwiek podgrupa ramek tego samego pochodzenia przekroczy próg wykorzystania procesora, chyba że:

  • Udostępnia funkcje wideokonferencji lub telekonferencji (wykrywane przez identyfikację mikrofonu, kamery lub przechwytywania ekranu, okna lub karty albo RTCPeerConnection z otwartym RTCDataChannel lub „na żywo” MediaStreamTrack).
  • Steruje urządzeniem zewnętrznym (wykrywanym za pomocą WebUSB, Web Bluetooth, WebHID lub Web Serial).
  • Zawiera blokadę sieci Web lub połączenie IndexedDB, które blokuje aktualizację wersji lub transakcję w innym połączeniu.

Zamrażanie polega na wstrzymaniu wykonywania. Jest on formalnie zdefiniowany w interfejsie PageLifecycleAPI.

Gdy tryb oszczędzania energii jest aktywny, próg wykorzystania procesora będzie ustawiony tak, aby zamrażać około 10% kart w tle.

Wiele map importu

Mapy importu muszą być wczytane przed każdym modułem ES i w przypadku każdego dokumentu może być tylko 1 mapa importu. To sprawia, że są one niestabilne i potencjalnie wolne w użyciu w rzeczywistych scenariuszach: każdy moduł wczytywany przed nimi powoduje błąd całej aplikacji, a w przypadku aplikacji z wiele modułami stają się one dużym zasobem blokującym, ponieważ najpierw musi zostać załadowana cała mapa wszystkich możliwych modułów.

Ta funkcja umożliwia importowanie wielu map na dokument, łącząc je w sposób spójny i deterministyczny.

Nagłówki dostępu do pamięci

Udostępnia uwierzytelnionym treściom embedowanym alternatywną metodę włączenia niepartycjonowanych plików cookie. Te nagłówki wskazują, czy niepartycjonowane pliki cookie są (lub mogą być) włączone w danym żądaniu sieciowym, i pozwalają serwerom na aktywowanie już przyznanych im uprawnień „storage-access”. Udostępnienie alternatywnego sposobu aktywacji uprawnienia „dostęp do pamięci” umożliwia korzystanie z zasobów innych niż IFRAME i może skrócić czas oczekiwania w przypadku zalogowanych treści osadzionych.

Obsługa tworzenia ClipboardItem za pomocą Promise<DOMString>

Konstruktor ClipboardItem, który jest wejściem do asynchronicznej metody schowka write(), przyjmuje teraz w swoim konstruktorze wartości ciągu znaków oprócz obiektów Blob. ClipboardItemData może być Blobem, ciągiem tekstowym lub obietnicą, która zwraca Bloba lub ciąg tekstowy.

WebAssembly Memory64

Propozycja memory64 dodaje obsługę liniowych pamięci WebAssembly o rozmiary większych niż 2^32 bitów. Nie zawiera ona nowych instrukcji, ale rozszerza istniejące instrukcje, aby zezwalać na indeksy 64-bitowe w przypadku pamięci i tabel.

​​Web Authentication API: metoda getClientCapabilities() PublicKeyCredential

Metoda PublicKeyCredential getClientCapabilities() umożliwia określenie, które funkcje WebAuthn są obsługiwane przez klienta użytkownika. Metoda zwraca listę obsługiwanych funkcji, co pozwala deweloperom dostosować procesy uwierzytelniania i przepływy pracy do konkretnych funkcji klienta.

WebGPU: formaty wierzchołków jednokomponentowych (i unnorm8x4-bgra)

Dodaje dodatkowe formaty wierzchołków, które nie były dostępne w pierwotnym wydaniu WebGPU z powodu braku obsługi lub starszych wersji systemu macOS (które nie są już obsługiwane przez żadną przeglądarkę). Formaty wierzchołków 1-elementowych umożliwiają aplikacjom żądanie tylko niezbędnych danych, podczas gdy wcześniej musiały żądać co najmniej 2 razy więcej danych w przypadku typów danych 8- i 16-bitowych. Format unorm8x4-bgra ułatwia wczytywanie kolorów wierzchołków zakodowanych w formacie BGRA przy zachowaniu tego samego shadera.

algorytm X25519 interfejsu Web Cryptography API;

Algorytm „X25519” udostępnia narzędzia do uzgadniania kluczy przy użyciu funkcji X25519 określonej w [RFC7748]. Identyfikator algorytmu „X25519” można używać w interfejsie SubtleCrypto, aby uzyskać dostęp do zaimplementowanych operacji: generateKey, importKey, exportKey, deriveKey i deriveBits.

Nowe wersje próbne origin

W Chrome 133 możesz wziąć udział w tych nowych testach wersji zapoznawczej.

rezygnacja z zamrażania w trybie Oszczędzanie energii.

Ta wersja próbna umożliwia wyłączenie wstrzymywania stron w trybie Oszczędzanie energii, który jest dostępny w Chrome 133.

wycofanie i usunięcie,

W tej wersji Chrome wprowadzamy wycofanie i usunięcie funkcji wymienionych poniżej. Na stronie ChromeStatus.com znajdziesz listy planowanych i obecnych wycofań oraz wcześniejszych usunięciach.

W tej wersji Chrome wycofujemy jedną funkcję.

Wycofanie limitu WebGPU maxInterStageShaderComponents

Element maxInterStageShaderComponents limit został wycofany z powodu kombinacji czynników. Przewidywana data usunięcia w Chrome 135.

  • Redundancja z poziomem maxInterStageShaderVariables: ten limit służy już do podobnego celu, kontrolując ilość danych przekazywanych między etapami shadera.
  • Niewielkie rozbieżności: chociaż istnieją niewielkie różnice w sposobie obliczania tych dwóch limitów, są one nieznaczne i można je skutecznie zarządzać w ramach limitu maxInterStageShaderVariables.
  • Upraszczanie: usunięcie maxInterStageShaderComponents upraszcza interfejs shadera i ułatwia pracę deweloperom. Zamiast zarządzać 2 oddzielnymi limitami o niewielkich różnicach, mogą skupić się na bardziej odpowiednim i pełniejszym maxInterStageShaderVariables.

W tej wersji Chrome usunęliśmy 2 funkcje.

Wcześniej, gdy zasób był pobierany z poziomu pamięci podręcznej za pomocą funkcji <link rel=prefetch>, Chrome ignorował semantykę pamięci podręcznej (czyli max-age i no-cache) podczas pierwszego użycia w ciągu 5 minut, aby uniknąć ponownego pobierania. Teraz Chrome usuwa ten szczególny przypadek i używa zwykłej semantyki pamięci podręcznej HTTP.

Oznacza to, że deweloperzy stron internetowych muszą uwzględnić odpowiednie nagłówki pamięci podręcznej (Cache-Control lub Expires), aby korzystać z zalet <link rel=prefetch>.

Dotyczy to również niestandardowych <link rel=prerender>.

Usunięcie strony powitalnej Chrome uruchamianej na kartach z pierwszymi ustawieniami podczas pierwszego uruchomienia

Uwzględnienie wartości chrome://welcome w właściwości first_run_tabs pliku initial_preferences nie będzie już miało żadnego wpływu. Usunęliśmy tę stronę, ponieważ jest ona zbędna, ponieważ strona wyświetlana po pierwszym uruchomieniu uruchamia się na platformach desktopowych.