Nowości w Chrome 111

Adriana Jara

Oto, co musisz wiedzieć na ten temat:

• Twórz dopracowane przejścia w aplikacji na jednej stronie za pomocą interfejsu View Transitions API.
• Przenieś kolory na wyższy poziom dzięki obsłudze poziomu kolorów CSS.
• Odkryj nowe narzędzia w panelu stylu, które pozwolą Ci w pełni wykorzystać nowe funkcje związane z kolorami.
• A to jeszcze wiele więcej.

Nazywam się Adriana Jara. Przyjrzyjmy się nowościom dla deweloperów w Chrome 111.

Wyświetlanie interfejsu Transitions API.

Tworzenie płynnych przejść w internecie to złożone zadanie. Interfejs View Transitions API ma ułatwić tworzenie dopracowanych przejść dzięki rejestrowaniu widoków danych i umożliwianiu zmiany DOM bez nakładania się na siebie.

Domyślne przejście w widoku jest stopniowe, a implementację wykorzystuje 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));
}

Po wywołaniu interfejsu .startViewTransition() interfejs API przechwytuje bieżący stan strony.

Po jego zakończeniu wywoływany jest obiekt callback przekazany do .startViewTransition(). To właśnie tutaj zmienia się DOM. Następnie interfejs API przechwytuje nowy stan strony.

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

Ten interfejs API zawiera wiele informacji. Więcej informacji znajdziesz w artykule z przykładami i szczegółami. Możesz też zapoznać się z dokumentacją przejścia w MDN.

Poziom kolorów CSS 4.

Dzięki CSS na poziomie 4 CSS obsługuje teraz wyświetlacze o wysokiej rozdzielczości, określając kolory z gamy HD, a także przestrzenie kolorów ze specjalizacjami.

W skrócie oznacza to o 50% więcej kolorów do wyboru. Wydawało Ci się, że 16 milionów kolorów to wydawało się dużo. Też tak myślałam.

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() najpierw przyjmuje parametr przestrzeni kolorów, a następnie serię wartości kanałów dla RGB i opcjonalnie część alfa.

Oto kilka przykładów użycia funkcji kolorów z różnymi przestrzeniami barw.

.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 w pełni wykorzystać możliwości kolorów w wysokiej rozdzielczości w CSS, zapoznaj się z tym artykułem.

Nowe narzędzia do zmiany kolorów.

Narzędzia deweloperskie mają nowe funkcje dotyczące obsługi specyfikacji kolorów CSS na poziomie 4.

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

Gdy używasz funkcji color-mix(), która umożliwia wymieszanie procentu jednego koloru z innym, możesz wyświetlić ostateczne wyniki w panelu Obliczone.

Selektor kolorów obsługuje też wszystkie nowe przestrzenie kolorów z większą liczbą funkcji. Na przykład kliknij próbkę kolorów(display-p3 1 0 1). Dodaliśmy również linię gamy kolorów, która odróżnia gamę sRGB od gamy wyświetlacza P3, aby ułatwić zrozumienie gamy wybranego kolorów.

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

Zapoznaj się z tym postem, aby dowiedzieć się więcej o debugowaniu kolorów i innych nowych funkcjach w narzędziach dla deweloperów.

…i wiele innych.

Oczywiście, jest ich jeszcze więcej.

• CSS dodał funkcje trygonometryczne, dodatkowe jednostki czcionki głównej i rozszerzył pseudoselektor n-tego elementu podrzędnego.
• Interfejs Document Picture in Picture API jest w wersji próbnej origin
• Działania previousslide i nextslide są teraz częścią interfejsu Media Session API. Sprawdź wersję demonstracyjną tutaj.

Więcej informacji

Ta analiza obejmuje tylko niektóre najważniejsze kwestie. Kliknij poniższe linki, aby dowiedzieć się więcej o zmianach w Chrome 111.

• Nowości w Narzędziach deweloperskich w Chrome (111)
• Wycofanie i usunięcie Chrome 111
• Aktualizacje ChromeStatus.com
• Lista zmian repozytorium źródłowego Chromium
• Kalendarz wydań Chrome

Subskrybuj

Aby być na bieżąco, zasubskrybuj kanał Chrome Developers w YouTube. Będziesz otrzymywać e-maile z powiadomieniami o każdym nowym filmie.

Jestem Adriana Jara i jak tylko pojawi się Chrome 112, będę do Ciebie mówić, co nowego w Chrome.