Nowości w Chrome 111

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

  • Utwórz dopracowane przejścia w aplikacji jednostronicowej za pomocą interfejsu View Transitions API.
  • Udoskonalenia kolorów dzięki obsłudze poziomu 4 CSS.
  • Poznaj nowe narzędzia w panelu stylów, aby w pełni wykorzystać nową funkcję kolorów.
  • A to nie wszystko.

Nazywam się Adriana Jara. Zobaczmy, co nowego w Chrome 111 dla deweloperów.

Wyświetl interfejs API Transitions.

Tworzenie płynnych przejść w internecie to złożone zadanie. Interfejs View Transitions API ułatwia tworzenie dopracowanych przejść przez robienie migawek widoków i zmianę DOM bez nakładania się stanów.

Przejścia utworzone za pomocą interfejsu View Transition API. Wypróbuj stronę demonstracyjną – wymagana jest wersja Chrome 111 lub nowsza.

Domyślnym przejściem jest przejście krzyżowe, które jest implementowane przez ten fragment kodu.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

Gdy wywołasz .startViewTransition(), interfejs API rejestruje bieżący stan strony.

Gdy to zrobisz, wywołana zostanie funkcja callback przekazana do funkcji .startViewTransition(). Właśnie wtedy zmienia się DOM. Następnie interfejs API rejestruje nowy stan strony.

Pamiętaj, że interfejs API jest dostępny dla aplikacji jednostronicowych (SPA), ale obsługa innych modeli jest też wdrażana.

Interfejs ten zawiera wiele szczegółowych informacji. Aby się z nimi zapoznać, przeczytaj artykuł z przykładami i szczegółami lub zapoznaj się z dokumentacją dotyczącą widoków przejść w MDN.

CSS Color Level 4.

Dzięki poziomowi 4 kolorów w CSS obsługa wyświetlaczy o wysokiej rozdzielczości, określając kolory z palety HD, a także oferując przestrzenie kolorów ze specyfikacjami.

Oznacza to, że masz do wyboru o 50% więcej kolorów. Uważasz, że 16 milionów kolorów to dużo. Też tak myślałem.

Pokazano serię obrazów przechodzących z szerokiej na wąską paletę barw, aby zilustrować żywe kolory i ich efekty.
Spróbuj

Implementacja obejmuje funkcję color(); można jej używać w przypadku dowolnej przestrzeni kolorów, która określa kolory za pomocą kanałów R, G i B. color() przyjmuje najpierw parametr przestrzeni kolorów, a potem serię wartości kanałów RGB i opcjonalnie kanał alfa.

Oto kilka przykładów użycia funkcji koloru w różnych przestrzeniach kolorów.

.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

Aby dowiedzieć się więcej o korzystaniu z kolorów o wysokiej rozdzielczości w CSS, przeczytaj ten artykuł.

Nowe narzędzia do debugowania kolorów.

Devtools ma nowe funkcje obsługujące specyfikację kolorów CSS poziomu 4.

Panel Style obsługuje teraz 12 nowych przestrzeni barw i 7 nowych gamutów opisanych w specyfikacji. Oto przykłady definicji kolorów CSS z funkcjami color(), lch(), oklab() i color-mix().

Przykłady definicji kolorów w CSS

Gdy używasz color-mix(), co umożliwia mieszanie procentowe jednego koloru z innym, możesz wyświetlić wynikowy kolor w panelu Obliczone.wynik miksowania kolorów w panelu Obliczenia.

Wybierak kolorów obsługuje też wszystkie nowe przestrzenie kolorów z dodatkowymi funkcjami. Kliknij na przykład próbkę koloru(display-p3 1 0 1). Dodano też linię granicy gamutu, która odróżnia gamuty sRGB i P3, aby ułatwić zrozumienie gamutu wybranego koloru. Linia graniczna gammy.

Selektor kolorów obsługuje też konwersję kolorów między formatami kolorów.

Konwersja kolorów między formatami kolorów.

Więcej informacji o debugowaniu kolorów i innych nowych funkcjach w narzędziach programistycznych znajdziesz w tym poście.

I inne funkcje

Oczywiście jest ich znacznie więcej.

Więcej informacji

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

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ę Adriana Jara i jak tylko pojawi się nowa wersja Chrome 112, opowiem Ci, co nowego w Chrome.