Chrome 137 beta

Rachel Andrew

Opublikowano: 1 maja 2025 r.

O ile nie zaznaczono inaczej, te zmiany dotyczą najnowszej wersji beta Chrome na Androida, ChromeOS, Linuksa, macOS i Windows. Więcej informacji o funkcjach wymienionych tutaj znajdziesz w podanych linkach lub na liście na stronie ChromeStatus.com. Od 30 kwietnia 2025 r. Chrome 130 jest w wersji beta. Najnowszą wersję możesz pobrać na komputerze na stronie Google.com lub na Androidzie w Sklepie Google Play.

CSS i interfejs

Ta wersja zawiera 7 nowych funkcji CSS i interfejsu.

Funkcja if()

Funkcja CSS if() umożliwia zwięzłe wyrażanie wartości warunkowych. Przyjmuje ona serię par warunek-wartość rozdzielonych średnikami. Funkcja ocenia każdy warunek sekwencyjnie i zwraca wartość powiązaną z pierwszym warunkiem, który jest prawdziwy. Jeśli żaden z warunków nie jest prawdziwy, funkcja zwraca pusty strumień tokenów. Pozwala to 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 elastycznym, siatkowym lub blokowym są udostępniane narzędziom ułatwień dostępu i na których można się skupić za pomocą nawigacji za pomocą klawisza Tab. Przyjmuje jedną z tych wartości słów kluczowych:

• 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 przepływu odczytu. Jest to liczba całkowita o wartości domyślnej 0.

Więcej informacji znajdziesz w artykule Korzystanie z CSS reading-flow do logicznej nawigacji sekwencyjnej oraz w przykładach przepływu odczytu.

offset-path: shape()

Funkcja shape() jest już obsługiwana w clip-path i umożliwia responsywne przycinanie. Włączenie jej również w przypadku offset-path eliminuje niewielką lukę, w której można używać tego samego rodzaju kształtu.

Obsługa atrybutu transform w SVGSVGElement

Ta funkcja umożliwia stosowanie właściwości przekształcenia – takich jak skalowanie, obracanie, przesuwanie i pochylanie – bezpośrednio do elementu głównego <svg> za pomocą jego atrybutu transform. To ulepszenie pozwala manipulować całym układem współrzędnych SVG lub jego zawartością jako całością, co zapewnia większą elastyczność w tworzeniu dynamicznej, responsywnej i interaktywnej grafiki wektorowej. Dzięki obsłudze tego atrybutu element SVG można przekształcać bez konieczności stosowania dodatkowych elementów opakowujących ani złożonych obejść CSS, co usprawnia proces tworzenia skalowalnej i animowanej grafiki internetowej.

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

W tej funkcji usprawniamy element SVG <use>, łagodząc wymagania dotyczące odwoływania się. Obecnie musisz wyraźnie odwoływać się do fragmentów w dokumencie SVG. Jeśli nie podasz identyfikatora fragmentu, <use> nie będzie w stanie rozpoznać celu i nic nie zostanie wyrenderowane ani nie będzie się do niego odwoływać.

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

Kolor uzupełniający systemu dla właściwości accent-color rozszerzony na Windows i ChromeOS

Umożliwia to używanie koloru uzupełniającego systemu operacyjnego w przypadku elementów formularza. Dzięki właściwości CSS accent-color możesz mieć pewność, że elementy formularza, takie jak pola wyboru, przyciski opcji i paski postępu, automatycznie przyjmą kolor uzupełniający zdefiniowany przez system operacyjny użytkownika. Ta funkcja jest obsługiwana w macOS od 2021 r., a teraz jest też dostępna w systemach Windows i ChromeOS.

view-transition-name: match-element

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

Interfejsy API

Dopasowanie typu błędu zgłaszanego podczas tworzenia danych logowania WebAuthn „płatności”

Poprawia typ błędu zgłaszanego podczas tworzenia danych logowania WebAuthn w przypadku danych logowania payment. Z powodu historycznej niezgodności specyfikacji tworzenie danych logowania payment w ramce iframe z innej domeny bez aktywacji użytkownika powodowało zgłoszenie błędu SecurityError zamiast NotAllowedError, który jest zgłaszany w przypadku danych logowania innych niż płatności. Jest to zmiana powodująca niezgodność wsteczną. Dotknie to kodu, który wcześniej wykrywał typ zgłoszonego 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.

Podział adresów URL bloba: pobieranie/nawigacja

W ramach kontynuacji partycjonowania miejsca na dane ta funkcja wprowadza partycjonowanie dostępu do adresów URL bloba według klucza miejsca na dane (witryna najwyższego poziomu, origin ramki i wartość logiczna has-cross-site-ancestor), z wyjątkiem nawigacji najwyższego poziomu, która będzie nadal partycjonowana tylko według originu ramki.

Tę zmianę można tymczasowo cofnąć, ustawiając zasadę PartitionedBlobURLUsage. Zasada zostanie wycofana, gdy wycofane zostaną inne zasady dla firm związane z podziałem miejsca na dane.

Stosy wywołań w raportach o awariach z powodu nieodpowiadających stron internetowych

Ta funkcja rejestruje stos wywołań JavaScript, gdy strona internetowa przestaje odpowiadać z powodu kodu JavaScript, który działa w nieskończonej pętli lub wykonuje inne bardzo długie obliczenia. Pomaga to deweloperom łatwiej zidentyfikować przyczynę braku odpowiedzi i ją naprawić. Stos wywołań JavaScript jest uwzględniany w interfejsie API do raportowania o awariach, gdy przyczyną jest brak odpowiedzi.

Typy kolorów zmiennoprzecinkowych w elemencie canvas

Wprowadza możliwość używania formatów pikseli zmiennoprzecinkowych (w przeciwieństwie do 8-bitowych formatów stałoprzecinkowych) w przypadku CanvasRenderingContext2D, OffscreenCanvasRenderingContext2D i ImageData. Jest to niezbędne w przypadku aplikacji o wysokiej precyzji (np. wizualizacji medycznych), treści o wysokim zakresie dynamicznym i liniowych przestrzeni kolorów.

Niedozwolone wstępne renderowanie HTTP w postaci zwykłego tekstu, które nie jest godne zaufania

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

Document-Isolation-Policy

Document-Isolation-Policy umożliwia dokumentowi włączenie crossOriginIsolation bez konieczności wdrażania COOP lub COEP i niezależnie od stanu crossOriginIsolation strony. Zasada jest oparta na izolacji procesów. Dodatkowo podzasoby z innych domen, które nie są CORS, będą ładowane bez danych logowania lub będą musiały mieć nagłówek CORP.

Więcej informacji znajdziesz w artykule Document Isolation Policy: Enable powerful web features with ease.

Ed25519 w kryptografii internetowej

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

Logowanie i raportowanie adresów IP

Chrome Enterprise zwiększa możliwości monitorowania bezpieczeństwa i reagowania na incydenty, zbierając i raportując lokalne i zdalne adresy IP oraz wysyłając je do dzienników dochodzeń w sprawie bezpieczeństwa (SIT). Dodatkowo Chrome Enterprise umożliwi administratorom opcjonalne wysyłanie adresów IP do dostawców SIEM 1P i 3P za pomocą oprogramowania sprzęgającego Chrome Enterprise Reporting. Będzie to dostępne dla klientów Chrome Enterprise Core.

Integracja obietnic JavaScriptu

Integracja obietnic JavaScriptu (JSPI) to interfejs API, który umożliwia aplikacjom WebAssembly integrację z obietnicami JavaScriptu. Umożliwia on programowi WebAssembly działanie jako generator obietnicy oraz interakcję z interfejsami API obsługującymi obietnice. W szczególności, gdy aplikacja używa JSPI do wywołania interfejsu API (JavaScript) obsługującego obietnice, kod WebAssembly jest zawieszany, a pierwotny wywołujący program WebAssembly otrzymuje obietnicę, która zostanie spełniona, gdy program WebAssembly w końcu się zakończy.

Language Detector API

Language Detector API to interfejs JavaScript API, który identyfikuje język podanego ciągu znaków. Ten interfejs API jest oparty na modelu, który jest dostrojony do wykonywania zadań wykrywania języka.

Po otrzymaniu ciągu znaków interfejs Language Detector API zwraca uporządkowaną listę wykrytych języków wraz z wynikiem wiarygodności dla każdego wyniku.

Deweloperzy mogą opcjonalnie przekazać listę oczekiwanych języków wejściowych podczas tworzenia instancji Language Detector, aby zoptymalizować przypadki użycia, w których wykrywanie ma być wykonywane w określonych językach.

Ogranicz atrybuty i argumenty zmiennoprzecinkowe w SVGMatrix, SVGRect i SVGPoint

Podczas ustawiania atrybutów lub argumentów zmiennoprzecinkowych w SVGMatrix, SVGRect i SVGPoint nie można już ustawiać ich jako Infinity ani Nan. Jeśli spróbujesz to zrobić, zostanie zgłoszony wyjątek JavaScript, zgodnie ze specyfikacją 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ę 0 lub 1 „złożonych” StaticRange

„Złożony” 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ę głównego elementu cienia, który nie jest podany na liście shadowRoots, punkty końcowe StaticRange zostaną „przeniesione” poza ten drzewo. Dzięki temu nie ujawniamy nieznanych drzew cienia.

Rozszerzenia zakresu aplikacji internetowej

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

Przykład:

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

Umożliwia to prezentowanie witryn, które kontrolują wiele subdomen i domen najwyższego poziomu, jako jednej aplikacji internetowej.

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

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

Wskazówki dotyczące gałęzi WebAssembly

Poprawia wydajność skompilowanego kodu WebAssembly, informując silnik, że określona instrukcja gałęzi z dużym prawdopodobieństwem będzie podążać określoną ścieżką. Umożliwia to silnikowi podejmowanie lepszych decyzji dotyczących układu kodu (co zwiększa liczbę trafień w pamięci podręcznej instrukcji) i alokacji rejestrów.

WebGPU: GPUTextureView do powiązania externalTexture

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

WebGPU: przeciążenie copyBufferToBuffer

Metoda GPUCommandEncoder copyBufferToBuffer() zawiera teraz prostszy sposób kopiowania całych buforów za pomocą nowego przeciążenia z opcjonalnymi parametrami przesunięć i rozmiaru.

Nowe wersje próbne origin

W Chrome 137 możesz wziąć udział w tych nowych wersjach próbnych origin.

Atrybut blokowania renderowania z pełną liczbą klatek na sekundę

Dodaje do atrybutów blokujących nowy token blokowania renderowania full-frame-rate. Gdy renderowanie jest blokowane za pomocą tokena full-frame-rate, renderowanie będzie działać z niższą liczbą klatek na sekundę, aby zarezerwować więcej zasobów na potrzeby ładowania.

Wstrzymywanie odtwarzania multimediów w niewyrenderowanych ramkach iframe

Dodaje zasadę uprawnień "media-playback-while-not-rendered", która umożliwia witrynom osadzającym wstrzymywanie odtwarzania multimediów w osadzonych ramkach iframe, które nie są renderowane, czyli mają ustawioną właściwość „display” na „none”. Powinno to umożliwić deweloperom tworzenie bardziej przyjaznych dla użytkownika rozwiązań, a także poprawić wydajność, umożliwiając przeglądarce obsługę odtwarzania treści, które nie są widoczne dla użytkowników.

Rewriter API

Rewriter API przekształca i przeformułowuje tekst wejściowy w żądany sposób, korzystając z modelu językowego AI na urządzeniu. Deweloperzy mogą używać tego interfejsu API do usuwania nadmiarowości w tekście, aby zmieścić się w limicie słów, przeformułowywania wiadomości, aby dopasować je do docelowych odbiorców lub aby były bardziej konstruktywne, jeśli wiadomość zawiera toksyczny język, przeformułowywania posta lub artykułu, aby używać prostszych słów i pojęć, i nie tylko.

Writer API

Writer API może służyć do pisania nowych materiałów na podstawie promptu zadania pisania, korzystając z modelu językowego AI na urządzeniu. Deweloperzy będą mogli używać tego interfejsu API do generowania tekstowych wyjaśnień danych strukturalnych, tworzenia posta o produkcie na podstawie opinii lub opisu produktu, rozwijania list zalet i wad w pełne widoki i nie tylko.