Nowości w Chrome 137

Rachel Andrew

Data publikacji: 27 maja 2025 r.

Chrome 137 jest już wdrażany. W tym poście znajdziesz informacje o niektórych kluczowych funkcjach tej wersji. Przeczytaj pełne informacje o wersji Chrome 137.

Najważniejsze zmiany w tej wersji:

Używaj elementów reading-flow i reading-order, aby zapewnić logiczną kolejność tabulacji w przypadku złożonych układów. Funkcja CSS if() umożliwia zwięzłe wyrażanie wartości warunkowych. Integracja obietnic JavaScriptu (JSPI) umożliwia aplikacjom WebAssembly integrację z obietnicami JavaScriptu.

CSS 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, oraz sposób, w jaki są one zaznaczane za pomocą liniowych sekwencyjnych metod nawigacji. Rozwiązuje to długotrwały problem z układami siatki i elastycznymi, w których kolejność tabulacji może być odłączona od kolejności ułożenia elementów.

Przyjmuje jedną wartość słowa kluczowego, domyślnie normal, która zachowuje kolejność elementów w modelu 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 odczytu. Aby użyć tej właściwości w kontenerze siatki, flex lub block, ustaw wartość reading-flow w kontenerze na source-order, a wartość reading-order poszczególnych elementów na liczbę całkowitą.

Więcej informacji znajdziesz w artykule Używanie CSS reading-flow do logicznej sekwencyjnej nawigacji za pomocą fokusu.

Funkcja CSS if()

Funkcja CSS if() umożliwia zwięzłe wyrażanie wartości warunkowych. Przyjmuje serię par warunek–wartość rozdzielonych średnikami. Funkcja analizuje każdy warunek po kolei i zwraca wartość powiązaną z pierwszym warunkiem, który jest prawdziwy. Jeśli żaden z warunków nie ma 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 on programowi WebAssembly działanie jako generator obietnicy i interakcję z interfejsami API obsługującymi obietnice.

W szczególności, gdy aplikacja używa JSPI do wywoływania 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 zakończy działanie.

I wiele więcej!

Oczywiście jest ich znacznie więcej:

  • W ramach partycjonowania miejsca na dane Chrome wdrożył partycjonowanie dostępu do adresów URL Bloba według klucza pamięci.
  • Wdrożono formaty pikseli zmiennoprzecinkowych Canvas.
  • offset-path: shape() jest obsługiwany, więc możesz używać elastycznych kształtów do ustawiania ścieżki animacji.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze kwestie. Dodatkowe zmiany w Chrome 137 znajdziesz pod tymi linkami:

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers w YouTube. Będziesz otrzymywać powiadomienia e-mail o nowych filmach. Możesz też obserwować nas na X lub LinkedIn, aby otrzymywać powiadomienia o nowych artykułach i postach na blogu.

Gdy tylko Chrome 138 zostanie udostępniony, poinformujemy Cię o nowościach w Chrome.