Nowości w Chrome 137

Rachel Andrew

Data publikacji: 27 maja 2025 r.

Chrome 137 jest już wprowadzana, a w tym poście opisujemy niektóre z jej najważniejszych funkcji. Zapoznaj się z pełnymi informacjami o wersji Chrome 137.

Najważniejsze zmiany w tej wersji:

Użyj elementów reading-flow i reading-order, aby zapewnić logiczną kolejność kart w skomplikowanych układach. Funkcja CSS if() zapewnia zwięzłą formę wyrażania wartości warunkowych. Zintegrowanie obietnic JavaScript (JSPI) umożliwia aplikacjom WebAssembly integrację z obietnicami JavaScript.

CSS reading-flow i reading-order

Właściwość CSS reading-flow określa kolejność, w jakiej elementy w układzie flex, kratce lub blokowym są udostępniane narzędziom ułatwień dostępu, oraz sposób ich skupiania za pomocą metod linearnej nawigacji sekwencyjnej. Rozwiązaliśmy długotrwały problem z układami siatki i flex, w których kolejność kart może nie odpowiadać kolejności elementów.

Przyjmuje 1 wartość słowa kluczowego, domyślnie normal, która zachowuje zachowanie sortowania elementów według kolejności w DOM. Aby użyć go w kontenerze flex, ustaw jego wartość na flex-visual lub flex-flow. Aby użyć go w kontenerze siatki, ustaw jego wartość na grid-rows, grid-columns lub grid-order.

Właściwość CSS reading-order umożliwia ręczne zastąpienie kolejności elementów w kontenerze przepływu czytania. Aby użyć tej właściwości w kontenerze siatki, elastycznych elementów lub bloku, ustaw wartość reading-flow w kontenerze na source-order, a wartość reading-order w przypadku poszczególnych elementów na liczbę całkowitą.

Więcej informacji znajdziesz w artykule Używanie CSS reading-flow do logicznego porządkowania kolejności nawigacji z użyciem fokusa.

Funkcja CSS if()

Funkcja CSS if() umożliwia zwięzłe wyrażanie wartości warunkowych. 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 zwraca wartości prawda, funkcja zwraca pusty strumień tokenów.

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>

Integracja obietnic JavaScript w WebAssembly (JSPI)

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 umożliwia mu interakcję z interfejsami API obsługującymi obietnice.

W szczególności, gdy aplikacja używa JSPI do wywołania interfejsu API (JavaScript) z obietnicą, 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.

I wiele więcej!

Oczywiście jest też wiele innych:

  • W ramach kontynuacji partycjonowania miejsca na dane w Chrome wprowadziliśmy partycjonowanie dostępu do adresów URL Bloba za pomocą klucza miejsca na dane.
  • Wprowadzono formaty pikseli zmiennoprzecinkowych w Canvas.
  • Obsługiwane jest offset-path: shape(), dzięki czemu możesz używać elastycznych kształtów do ustawiania ścieżki animacji.

Więcej informacji

Ta lista zawiera tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o innych zmianach w Chrome 137, kliknij te linki.

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał programistów Chrome w YouTube. Otrzymasz wtedy powiadomienie e-mail za każdym razem, gdy opublikujemy nowy film. Możesz też śledzić nas na X lub na LinkedIn, aby otrzymywać nowe artykuły i posty na blogu.

Gdy tylko pojawi się nowa wersja Chrome 138, poinformujemy Cię o jej nowościach.