Nowości w Chrome 129

Pete LePage

Oto, co musisz wiedzieć na ten temat:

Nazywam się Pete LePage. Zobacz, co nowego w Chrome 129 dla deweloperów.

Dzielenie długich zadań za pomocą scheduler.yield()

Długie zadania opóźniają możliwość reakcji przeglądarki na działania użytkownika, co sprawia, że strona wydaje się wolna i wpływa na kluczowe dane dotyczące wydajności, takie jak INP. Za pomocą funkcji scheduler.yield() możesz dzielić długie zadania na mniejsze części, co poprawia ich responsywność, ponieważ wyraźnie oddajesz je z powrotem do wątku głównego.

Dzięki temu możesz określić:

„Hej! „To, co zamierzam zrobić, może zająć trochę czasu, jeśli musisz namalować kadr, odpowiedzieć na komentarz użytkownika lub masz inne ważne zadania do wykonania, to cierpliwie poczekam”.

Ilustracja pokazująca, jak podział zadania może ułatwić interakcję z użytkownikiem. U góry długie zadanie blokuje działanie metody obsługi zdarzenia, dopóki nie zostanie ono ukończone. U dołu zadanie podzielone na fragmenty pozwala obsłudze zdarzenia działać szybciej niż normalnie.

Dodawaj ten wiersz do kodu JavaScriptu, aby dać przeglądarce czas na „odpoczynek” i uniknąć problemów z INP.

await scheduler.yield();

Co ważne, pozwala to na nadanie priorytetu kontynuacji kodu, dzięki czemu nie stracisz na użyciu yield. Zalecamy częste używanie funkcji scheduler.yield() w większych fragmentach kodu.

Więcej informacji znajdziesz w artykule Optymalizacja długich zadań.

Animacje o właściwych rozmiarach

Animacje CSS są całkiem fajne, ale zwykle wymagają wyraźnego określenia rozmiarów. Nie możesz używać wbudowanych rozmiarów, takich jak auto, min-content czy fit-content.

Właściwość CSS interpolate-size otwiera nowe możliwości animacji, które nie były dostępne przy użyciu właściwych rozmiarów słów kluczowych.

Bez interpolate-size przyciski w tym filmie nie mają przejścia.

Po dodaniu interpolate-size: allow-keywords przyciski w filmie zyskują piękny efekt przejścia animacji.

Określenie wartości interpolate-size: allow-keywords dla elementu root powoduje zmianę zachowania całej strony. Zalecamy to, gdy zgodność nie stanowi problemu.

:root {
  interpolate-size: allow-keywords;
}

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

Aby uzyskać większą kontrolę, funkcja CSS calc-size(), podobnie jak calc(), obsługuje też operacje na dokładnie jednym z obsługiwanych kluczowych słów rozmiaru. Podczas obliczania układu słowo kluczowe size jest traktowane jako mające pierwotny rozmiar calc-size-basis.

nav a {
  width: 80px;
  overflow-x: clip;
  transition: width 0.35s ease;

  &:hover {
    width: calc-size(auto, size);
  }
}

Szczegółowe informacje znajdziesz w artykule Animacja do wysokości: auto; (i inne kluczowe słowa dotyczące rozmiaru) w CSS.

Zmiany w umieszczaniu kotwicy w CSS

Umieszczenie kotwicy w CSS zostało wprowadzone w Chrome 125, ale po dodatkowych dyskusjach w grupie roboczej CSS wprowadziliśmy kilka zmian w specyfikacji i implementacji. Jeśli pozycję kotwicy w kodzie CSS używasz już teraz, musisz jak najszybciej zaktualizować kod.

Po pierwsze, nazwa inset-area została zmieniona na position-area. Wybrano tę opcję, ponieważ sformułowanie position- pomaga pamiętać, że ta właściwość jest stosowana do elementu pozycjonowanego, a nie do elementu zakotwiczenia.

Po drugie, position-try-options zmienił nazwę na position-try-fallbacks. Pamiętaj, że są to tylko substytuty pozycji głównej, która jest określana przez style podstawowe.

Na koniec usunęliśmy z funkcji position-try składnię funkcji inset-area(). Dlatego zamiast position-try-fallbacks: inset-area(top) używaj position-try-fallbacks: top.

I inne funkcje

Oczywiście jest ich znacznie więcej.

Dodano nową metodę Intl formatowania czasu trwania z obsługą wielu lokalizacji.

const l = "fr-FR";
const d = {hours: 1, minutes: 46, seconds: 40};
const opts = {style: "long"};
new Intl.DurationFormat(l, opts).format(d);
// "1 heure, 46 minutes et 40 secondes"

Płótno WebGPU może teraz korzystać z pełnego zakresu wyświetlacza w przypadku obrazów HDR.

Wprowadziliśmy też wycofanie i usunięcie kilku funkcji, które mogą mieć wpływ na niektórych deweloperów.

Przeczytaj pełne informacje o wersji

Więcej informacji

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

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał w YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy tylko opublikujemy nowy film.

Nazywam się Pete LePage i zastępuję na chwilę Adriana. Gdy tylko ukaże się Chrome 130, poinformujemy Cię o nowościach w tej wersji.