Chrome 137 beta

Rachel Andrew

Data publikacji: 1 maja 2025 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 wymienionych tu funkcjach znajdziesz, klikając odpowiednie linki lub korzystając z listy na stronie ChromeStatus.com. Od 30 kwietnia 2025 r. Chrome 130 jest w wersji beta. Najnowszą wersję możesz pobrać na 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.

Funkcja if()

Funkcja CSS if() umożliwia zwięźle wyrażać wartości warunkowe. Akceptuje ona serię par warunek–wartość, rozdzielonych przecinkami. Funkcja sprawdza kolejno każdy warunek i zwraca wartość powiązaną z pierwszym spełnionym warunkiem. Jeśli żaden z warunków nie jest prawdziwy, funkcja zwraca pusty strumień tokenów. Dzięki temu możesz wyrażać złożoną logikę warunkową w prosty i zwięzły sposób. Przykład:

div {
      color: var(--color);
      background-color: if(style(--color: white): black; else: white);
  }
  .dark {
      --color: black;
  }
  .light {
      --color: white;
  }

<div class="dark">dark</div>
<div class="light">light</div>

Właściwości reading-flow i reading-order

Właściwość CSS reading-flow określa kolejność, w jakiej elementy w układzie flex, siatki lub bloku są wyświetlane narzędziom ułatwień dostępu i skupiane za pomocą klawisza tabulacji. Przyjmuje jedną z tych wartości:

  • normal
  • flex-visual
  • flex-flow
  • grid-rows
  • grid-columns
  • grid-order
  • source-order

Właściwość CSS reading-order umożliwia ręczne zastąpienie kolejności w kontenerze procesu czytania. Jest to liczba całkowita o wartości domyślnej 0.

Aby dowiedzieć się więcej, przeczytaj artykuł Używanie sekwencyjnego przepływu treści w CSS do nawigacji z użyciem punktu skupienia i spróbuj kilka przykładów przepływu treści.

offset-path: shape()

Funkcja shape() jest już obsługiwana w clip-path i umożliwia dynamiczne przycinanie. Włączenie tej opcji w przypadku właściwości offset-path eliminuje niewielką lukę, w której można użyć tego samego rodzaju kształtu.

Obsługa atrybutu transformacji w przypadku SVGSVGElement

Ta funkcja umożliwia zastosowanie właściwości przekształceń, takich jak skalowanie, obrót, przesunięcie i pochylenie, bezpośrednio do elementu <svg> za pomocą jego atrybutu transform. Dzięki temu ulepszeniu możesz manipulować całym systemem współrzędnych SVG lub jego zawartością jako całością, co zapewnia większą elastyczność w tworzeniu dynamicznych, elastycznych i interakcyjnych grafik wektorowych. Dzięki obsłudze tego atrybutu element SVG może być przekształcany bez konieczności stosowania dodatkowych elementów opakowania czy skomplikowanych obejść komunikatów CSS, co upraszcza proces tworzenia skalowanych i animowanych grafik internetowych.

Zezwalaj usłudze <use> na odwoływanie się do elementu głównego dokumentu zewnętrznego przez pominięcie fragmentu.

W ramach tej funkcji upraszczamy element SVG <use>, łagodząc wymagania dotyczące odwoływania się do niego. Obecnie musisz wyraźnie odwoływać się do fragmentów w dokumencie SVG. Jeśli nie podasz identyfikatora fragmentu, funkcja <use> nie będzie mogła rozwiązać celu, a nic nie zostanie wyrenderowane ani do niczego nie będzie odwoływać.

Dzięki tej funkcji pominięcie fragmentów lub podanie tylko nazwy zewnętrznego pliku SVG powoduje automatyczne odwołanie do elementu katalogu ROOT, co eliminuje konieczność modyfikowania dokumentu, do którego się odwołujesz, tylko po to, aby przypisać identyfikator do katalogu ROOT. To ulepszenie upraszcza proces ręcznej edycji i zwiększa wydajność.

Rozszerzenie właściwości accent-color (kolor uzupełniający systemu) na systemy Windows i ChromeOS

Dzięki temu możesz używać koloru uzupełniającego systemu operacyjnego w elementach formularza. Za pomocą właściwości CSS accent-color możesz zapewnić, aby elementy formularza, takie jak pola wyboru, przyciski radiowe i paski postępu, automatycznie przyjmowały kolor akcentu zdefiniowany przez system operacyjny użytkownika. Ta funkcja jest obsługiwana w systemie macOS od 2021 r., a teraz jest dostępna także w systemach Windows i ChromeOS.

view-transition-name: match-element

Wartość match-element właściwości view-transition generuje unikalny identyfikator oparty na tożsamości elementu i pozostaje taki sam dla tego elementu. Jest on używany w przypadku aplikacji jednostronicowych, w których element jest przenoszony i chcesz go animować za pomocą przejścia widoku.

Interfejsy Web API

Dopasowanie typu błędu zwracanego podczas tworzenia danych logowania WebAuthn „payment”

Poprawia typ błędu zwracany podczas tworzenia danych logowania WebAuthn dla danych logowania payment. Ze względu na historyczne niezgodności specyfikacji tworzenie danych logowania payment w ramce iframe w innej domenie bez aktywacji przez użytkownika powodowałoby zwracanie wartości SecurityError zamiast NotAllowedError, która jest zwracana w przypadku danych logowania niepłatnych. To jest zmiana powodująca niezgodność. Dotyczy to kodu, który wcześniej wykrył typ błędu (np. e instanceof SecurityError). Kod, który ogólnie obsługuje błędy podczas tworzenia danych logowania (np. catch (e)), będzie nadal działał prawidłowo.

Partycjonowanie adresów URL obiektów blob: pobieranie/nawigacja

W dalszej części artykułu omówimy partycjonowanie dostępu do adresów URL blobów za pomocą klucza Storage (witryna najwyższego poziomu, źródło ramki i wartość logiczna has-cross-site-ancestor), z wyjątkiem nawigacji najwyższego poziomu, które pozostaną podzielone tylko według źródła ramki.

Tę zmianę można tymczasowo cofnąć, ustawiając zasadę PartitionedBlobURLUsage. Te zasady zostaną wycofane, gdy wycofane zostaną inne zasady dotyczące przedsiębiorstwa dotyczące partycjonowania pamięci masowej.

Stosy wywołań w raportach o awariach z niedziałających stron internetowych

Ta funkcja rejestruje stos wywołań JavaScriptu, gdy strona internetowa przestaje odpowiadać z powodu wykonywania przez kod JavaScriptu nieskończonej pętli lub innej bardzo długiej operacji. Pomaga to deweloperom zidentyfikować przyczynę braku reakcji i łatwiej ją naprawić. Zrzut stosu wywołań JavaScriptu jest dołączany do interfejsu API zgłaszania awarii, gdy przyczyną jest brak odpowiedzi.

Typy kolorów zmiennoprzecinkowych

Wprowadza możliwość używania formatów pikseli z liczbami zmiennoprzecinkowymi (zamiast 8-bitowych liczb całkowitych) w funkcjach CanvasRenderingContext2D, OffscreenCanvasRenderingContext2D i ImageData. Jest to konieczne w przypadku aplikacji o wysokiej precyzji (np. wizualizacji medycznej), treści o wysokiej dynamice rangi i przestrzeni roboczej o kolorach liniowych.

Zabranie niesprawdzonych prerenderowania w prostym tekście HTTP

Obecnie wstępne renderowanie jest dozwolone w przypadku HTTP i HTTPS, a wstępne pobieranie działa tylko w przypadku HTTPS. Ogranicz prerenderowanie, aby było zgodne z wstępnym pobieraniem.

Document-Isolation-Policy

Document-Isolation-Policy pozwala dokumentowi samodzielnie włączyć crossOriginIsolation bez konieczności wdrażania COOP lub COEP niezależnie od stanu crossOriginIsolation strony. Zasady są obsługiwane przez izolację procesów. Dodatkowo podresury dokumentów z innych domen bez CORS będą ładowane bez poświadczeń lub będą musiały mieć nagłówek CORP.

Więcej informacji znajdziesz w artykule Zasady izolacji dokumentu: łatwe włączanie zaawansowanych funkcji internetowych.

Ed25519 w kryptografii internetowej

Ta funkcja dodaje obsługę algorytmów Curve25519 w interfejsie Web Cryptography API, a dokładniej algorytmu podpisu Ed25519.

Rejestrowanie i raportowanie adresów IP

Chrome Enterprise zwiększa możliwości monitorowania zabezpieczeń i reagowania na incydenty, zbierając i zgłaszając adresy IP lokalne i zdalne oraz wysyłając te adresy do dzienników Security Investigation Logs (SIT). Poza tym Chrome Enterprise umożliwi administratorom opcjonalne wysyłanie adresów IP do własnych dostawców SIEM i dostawców zewnętrznych za pomocą oprogramowania sprzęgającego do raportowania Chrome Enterprise. Będzie ona dostępna dla klientów Chrome Enterprise Core.

Integracja z obietnicami JavaScript

JavaScript Promise Integration (JSPI) to interfejs API, który umożliwia aplikacjom WebAssembly integrację z obietnicami JavaScript. Umożliwia programowi WebAssembly działanie jako generator obietnicy i interakcji z interfejsami API obsługującymi obietnice. W szczególności, gdy aplikacja używa JSPI do wywołania interfejsu API z obietnicą (JavaScript), kod WebAssembly jest zawieszony, a pierwotnemu wywołującemu program WebAssembly przekazywana jest obietnica, która zostanie spełniona, gdy program WebAssembly zostanie w końcu ukończony.

Interfejs Language Detector API

Interfejs Language Detector API to interfejs JavaScript, który identyfikuje język podanego ciągu znaków. Ten interfejs API jest obsługiwany przez model bazowy, który jest dostrojony do wykonywania zadań związanych z wykrywaniem języka.

Po podaniu ciągu znaków interfejs Language Detector API zwraca uporządkowaną listę wykrytych języków wraz ze wskaźnikiem ufności dla każdego wyniku.

Opcjonalnie deweloperzy mogą przekazać listę docelowych języków podczas tworzenia instancji usługi Language Detector, aby ułatwić optymalizację pod kątem przypadków użycia, w których wykrywanie ma być wykonywane w przypadku określonych języków.

Ograniczanie atrybutów i argumentów typu float w funkcjach SVGMatrix, SVGRect i SVGPoint

Podczas ustawiania atrybutów typu float lub argumentów w funkcjach SVGMatrix, SVGRect i SVGPoint nie można ich już ustawiać jako Infinity ani Nan. Jeśli spróbujesz go ustawić, zostanie wywołany wyjątek JavaScriptu zgodnie z definicją w specyfikacji SVG.

Interfejs Selection API getComposedRanges i direction

Ta funkcja zawiera 2 nowe metody interfejsu Selection API:

  • Selection.direction, która zwraca kierunek zaznaczenia jako "none", "forward" lub "backward".
  • Selection.getComposedRanges(), która zwraca listę o długości 0 lub 1 „składową” StaticRange

„Składana” StaticRange może przekraczać granice cienia, czego nie mogą robić zwykłe zakresy.

Na przykład:

const range = getSelection().getComposedRanges({ shadowRoots: [root] });

Jeśli zaznaczenie przekracza granicę katalogu cieni, która nie jest podana na liście shadowRoots, punkty końcowe StaticRange zostaną „przeznaczone” poza to drzewo. Dzięki temu nie ujawniamy nieznanych drzew cieni.

Rozszerzenia zakresu aplikacji internetowych

Dodaje pole scope_extensions w pliku manifestu aplikacji internetowej, które umożliwia rozszerzenie zakresu aplikacji internetowej na inne źródła.

Przykład:

{
  "name": "Example",
  "display": "standalone",
  "start_url": "/index.html",
  "scope_extensions": [
    {"type" : "type", "origin" : "https://example.com"}
  ]
}

Dzięki temu witryny, które zarządzają wieloma subdomenami i domenami najwyższego poziomu, mogą być prezentowane jako pojedyncza aplikacja internetowa.

Wymaga, aby wymienione źródła potwierdziły powiązanie z aplikacją internetową za pomocą pliku konfiguracji .well-known/web-app-origin-association.

{
  "https://sample-app.com/": {
    "scope": "/"
  }
}

Wskazówki dotyczące Branch dla WebAssembly

Poprawia wydajność skompilowanego kodu WebAssembly, informując silnik, że dana instrukcja odgałęzi jest bardzo prawdopodobna. Umożliwia to silnikowi podejmowanie lepszych decyzji dotyczących rozmieszczenia kodu (co zwiększa liczbę trafień do pamięci podręcznej instrukcji) i przydziału rejestrów.

WebGPU: GPUTextureView do powiązania externalTexture

Podczas tworzenia GPUBindGroup można teraz używać GPUTextureView do wiązania externalTexture.

WebGPU: przeciążenie copyBufferToBuffer

Metoda GPUCommandEncoder copyBufferToBuffer() umożliwia teraz prostsze kopiowanie całych buforów za pomocą nowego przeciążenia z opcjonalnymi parametrami przesunięcia i rozmiaru.

Nowe wersje próbne origin

W Chrome 137 możesz wziąć udział w tych nowych testach origin.

Atrybut blokowania renderowania pełnej liczby klatek

Do atrybutów blokujących dodano nowy token blokujący renderowanie full-frame-rate. Gdy procesor jest zablokowany za pomocą tokena pełnej liczby klatek, będzie działać z niższą liczbą klatek na sekundę, aby zarezerwować więcej zasobów na wczytywanie.

Wstrzymywanie odtwarzania multimediów w nierenderowanych iframe’ach

Dodaje zasadę uprawnień "media-playback-while-not-rendered", która umożliwia witrynom z wbudowanymi elementami iframe wstrzymywanie odtwarzania multimediów w wbudowanych elementach iframe, które nie są renderowane, czyli mają ustawioną właściwość „display” na „none”. Dzięki temu deweloperzy będą mogli tworzyć bardziej przyjazne użytkownikom treści, a także zwiększać wydajność, pozwalając przeglądarce obsługiwać odtwarzanie treści, które nie są widoczne dla użytkowników.

Rewriter API

Interfejs Rewriter API przekształca i przeformułowuje tekst wejściowy w wybrany sposób, korzystając z modelu językowego AI na urządzeniu. Deweloperzy mogą używać tego interfejsu API, aby usuwać w tekście powtórzenia, aby dostosować go do limitu znaków, przeformułować wiadomości, aby pasowały do docelowej grupy odbiorców lub były bardziej konstruktywne, a także, aby usunąć toksyczny język, przeformułować post lub artykuł, aby używać prostszych słów i koncepcji itp.

Interfejs Writer API

Interfejs Writer API może służyć do tworzenia nowych materiałów na podstawie promptu zadania pisania, przy użyciu modelu językowego AI na urządzeniu. Deweloperzy będą mogli używać tego interfejsu API do generowania tekstowych wyjaśnień uporządkowanych danych, tworzenia postów o produktach na podstawie opinii lub opisu produktu, rozszerzania list zalet i wad o pełne widoki oraz innych funkcji.