Nowości w Chrome 129

Pete LePage

Oto, co musisz wiedzieć na ten temat:

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

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

Długie zadania opóźniają reakcję przeglądarki na działania użytkownika, przez co strona wydaje się wolna i ma wpływ na kluczowe wskaźniki 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ć przeglądarce:

„Hej! „To, co zamierzam zrobić, może zająć trochę czasu, jeśli musisz namalować kadr, odpowiedzieć na dane użytkownika lub wykonać inne ważne zadania. Nie ma problemu, mogę poczekać”.

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ściwym rozmiarze

Animacje CSS są całkiem fajne, ale zwykle wymagają wyraźnego określenia rozmiarów. Nie możesz używać wbudowanych słów kluczowych do określania 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 animacji przejścia.

Określanie 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 interpretowane jako pierwotny rozmiar calc-size-basis.

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

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

Więcej informacji znajdziesz w artykule Animacja do wysokości: auto; (i inne kluczowe słowa dotyczące rozmiaru) w CSS.

Zmiany w pozycjonowaniu kotwicy w CSS

Umieszczenie kotwicy w CSS zostało wprowadzone w Chrome 125, ale po dodatkowych dyskusjach w ramach grupy roboczej CSS wprowadziliśmy kilka zmian w specyfikacji i wdrożeniu. Jeśli używasz już pozycji kotwicy CSS, 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żyj position-try-fallbacks: top.

I wiele więcej!

Oczywiście jest ich znacznie więcej.

Do formatowania czasu dostępna jest nowa metoda Intl, która obsługuje wiele 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ż kilka wycofań i usunięcia, które mogą mieć wpływ na niektórych deweloperów.

Przeczytaj pełne informacje o wersji

Więcej informacji

Obejmuje to 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 deweloperó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.