Nowości w Chrome 111

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

  • Twórz dopracowane przejścia w aplikacji jednostronicowej za pomocą interfejsu View Migrates 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.
  • I 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 jest skomplikowanym zadaniem. 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.

Po zakończeniu wywoływane jest pole callback przekazywane do .startViewTransition(). Właśnie wtedy zmienia się DOM. Następnie interfejs API rejestruje nowy stan strony.

Pamiętaj, że ten interfejs API został uruchomiony dla aplikacji jednostronicowych, ale wdrażane są też obsługę innych modeli.

Interfejs ten zawiera wiele szczegółowych informacji. Aby się z nimi zapoznać, przeczytaj artykuł z przykładami i szczegółami lub zajrzyj do dokumentacji dotyczącej przejścia na widok na stronie MDN.

Poziom koloru CSS: 4.

Dzięki kodowi CSS poziomu 4. CSS obsługuje wyświetlacze o wysokiej rozdzielczości, określając kolory z zakresów HD, a także dostępne są przestrzenie kolorów ze specjalizacjami.

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.
Wypróbuj

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

Oto kilka przykładów użycia funkcji kolorów z różnymi przestrzeniami 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ł.

Narzędzia deweloperskie w nowych kolorach.

W narzędziach Devtools dostępne są nowe funkcje obsługujące specyfikację CSS na poziomie 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

Jeśli używasz funkcji color-mix(), która umożliwia mieszanie wartości procentowej jednego koloru z innym, możesz wyświetlić ostateczne kolory w panelu Wyliczone 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). Dodaliśmy również linię granicy zakresu, która pozwala rozróżnić gamy sRGB i display-P3, co pozwala lepiej zrozumieć gamę wybranego koloru. Linia graniczna gammy.

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

konwertowanie 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

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