Nowości w Chrome 129

Pete LePage

Oto, co musisz wiedzieć na ten temat:

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

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

Długie zadania opóźniają reagowanie przeglądarki na dane wejściowe użytkownika, co stwarza wrażenie, że strona działa wolno, 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 głównemu wątkowi.

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 wykonać inne ważne zadania. Nie ma problemu, mogę poczekać”.

Ilustracja pokazująca, jak podzielenie zadania może ułatwić użytkownikowi interakcję. 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 JavaScript, aby dać przeglądarce czas na przetworzenie kodu 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 elementów interpolate-size: allow-keywords przyciski w filmie tworzą piękny efekt przejścia z efektem przejścia.

Określenie wartości interpolate-size: allow-keywords dla elementu root powoduje zmianę działania całej strony. Zalecamy wykonanie tej czynności wtedy, gdy zgodność nie stanowi problemu.

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

.item {
  height: auto;

  @starting-style {
    height: 0;
  }
}

Aby zapewnić większą kontrolę, funkcja CSS calc-size(), podobnie jak calc(), obsługuje również operacje na dokładnie 1 z obsługiwanych słów kluczowych związanych z określaniem rozmiaru wewnętrznego. Podczas wykonywania obliczeń układu słowo kluczowe size przyjmuje wartość pierwotną, czyli 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 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.

Nazwa usługi 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. Dzięki temu łatwiej zapamiętasz, że są to tylko pozycje zastępcze, które są określane 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"

Obszar roboczy GPU internetowego 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

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

Subskrybuj

Zasubskrybuj kanał Chrome Developers w YouTube, aby być na bieżąco z informacjami o nowym filmie. Dzięki temu będziesz otrzymywać e-maila z powiadomieniem.

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