Nowości w CSS i interfejsie: edycja I/O 2023

Kilka ostatnich miesięcy to początek złotej ery w interfejsie internetowym. Nowe funkcje platformy zostały bardzo dobrze wdrożone w różnych przeglądarkach, a obecnie zapewniają dostęp do większej niż kiedykolwiek możliwości internetowych i opcji dostosowywania.

Oto 20 najciekawszych i najbardziej ekscytujących funkcji, które pojawiły się niedawno lub pojawią się wkrótce:

• Zapytania o kontenery
• Zapytania dotyczące stylu
• Selektor :has()
• n-ta mikroskładnia
• text-wrap: balance
• initial-letter
• Dynamiczne jednostki widocznego obszaru
• Przestrzenie kolorów o szerokiej gamie
• color-mix()
• Zagnieżdżanie
• Kaskadowe warstwy
• Style zakresu
• Funkcje trygonometryczne
• Poszczególne właściwości przekształcania
• popover
• pozycjonowanie zakotwiczenia
• menu wyboru
• Dyskretne przejścia właściwości
• Animacje wyświetlane po przewinięciu
• Wyświetlanie przejść

Nowa elastyczna reklama

Zacznijmy od nowych funkcji elastycznego projektowania stron. Nowe funkcje platformy umożliwiają budowanie logicznych interfejsów z komponentami, które posiadają własne informacje o stylu, stworzenie interfejsów wykorzystujących możliwości systemu w celu wyświetlania bardziej natywnych interfejsów. Użytkownicy mogą też brać udział w procesie projektowania za pomocą zapytań o preferencje użytkownika, aby w pełni dostosować je do potrzeb użytkownika.

Zapytania kontenera

Zapytania o kontenery stały się ostatnio stabilne we wszystkich nowoczesnych przeglądarkach. Umożliwiają wysyłanie zapytań dotyczących rozmiaru i stylu elementu nadrzędnego w celu określenia stylów, które powinny być zastosowane do jego elementów podrzędnych. Zapytania o multimedia mają dostęp tylko do informacji z widocznego obszaru i mogą je wykorzystywać tylko w widoku makra w układzie strony. Z kolei zapytania dotyczące kontenerów to bardziej precyzyjne narzędzie, które obsługuje dowolną liczbę układów lub układów w układach.

W przykładzie poniżej widać, że pasek boczny Główna skrzynka odbiorcza i Ulubione to kontenery. E-maile w tych e-mailach dostosowują swój układ siatki i wyświetlają lub ukrywają sygnaturę czasową w zależności od dostępnego miejsca. To ten sam element na stronie, tylko występujący w różnych widokach

Ponieważ mamy zapytanie dotyczące kontenera, style tych komponentów są dynamiczne. Jeśli dostosujesz rozmiar i układ strony, komponenty będą odpowiadać na przydzielone im miejsca. Pasek boczny zmienia się w górny pasek z większą ilością miejsca, a jego układ przypomina główną skrzynkę odbiorczą. Gdy jest mniej miejsca, oba elementy są wyświetlane w zwięzłym formacie.

Więcej informacji o zapytaniach dotyczących kontenerów i tworzeniu komponentów logicznych znajdziesz w tym poście.

Zapytania dotyczące stylu

Specyfikacja zapytań kontenera umożliwia też wysyłanie zapytań dotyczących wartości stylu kontenera nadrzędnego. Obecnie jest to częściowo wdrożone w Chrome 111, gdzie możesz stosować style kontenerów za pomocą niestandardowych właściwości CSS.

W tym przykładzie użyto danych o pogodzie zapisanych w wartościach właściwości niestandardowych, takich jak deszcz, słońce czy zachmurzenie, aby określić styl tła i ikony wskaźnika karty.

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
}

To dopiero początek w zapytaniach dotyczących stylu. W przyszłości będziemy tworzyć zapytania o wartości logiczne, aby określić, czy istnieje wartość właściwości niestandardowej, i zmniejszyć liczbę powtórzeń kodu. Obecnie dyskutujemy o zapytaniach dotyczących zakresu, które pozwalają stosować style na podstawie zakresu wartości. W ten sposób można zastosować opisane tu style z użyciem wartości procentowej prawdopodobieństwa deszczu lub zachmurzenia.

Więcej informacji i inne prezentacje znajdziesz w naszym poście na blogu o zapytaniach dotyczących stylu.

:has()

Mówiąc o zaawansowanych, dynamicznych funkcjach, selektor:has() jest jednym z najpotężniejszych nowych funkcji CSS dostępnych w nowoczesnych przeglądarkach. Za pomocą :has() możesz stosować style, sprawdzając, czy element nadrzędny zawiera określone elementy podrzędne lub czy te elementy podrzędne są w określonym stanie. Oznacza to, że w zasadzie jest teraz selektor nadrzędny.

Opierając się na przykładowym zapytaniu dotyczącym kontenera, możesz użyć parametru :has(), aby jeszcze bardziej uatrakcyjnić komponenty. Element z elementem „gwiazdka” otrzyma szare tło, a element z zaznaczonym polem wyboru – niebieskie tło.

Ten interfejs API nie jest jednak ograniczony do wyboru rodzica. Możesz też zmienić styl elementów podrzędnych w obrębie elementu nadrzędnego. Na przykład tytuł jest pogrubiony, jeśli element zawiera gwiazdkę. Jest to możliwe dzięki .item:has(.star) .title. Selektor :has() daje dostęp do elementów nadrzędnych, podrzędnych, a nawet równorzędnych. Dzięki temu ten interfejs API jest bardzo elastyczny, a każdego dnia pojawiają się nowe przypadki użycia.

Więcej informacji oraz wersje demonstracyjne :has() znajdziesz w tym poście na blogu.

składnia n-ty

Platforma internetowa umożliwia teraz bardziej zaawansowany wybór elementów podrzędnych. Zaawansowana składnia n-tego elementu podrzędnego tworzy nowe słowo kluczowe („of”), które umożliwia użycie istniejącej mikroskładni An+B z bardziej szczegółowym podzbiorem wyszukiwania.

Jeśli użyjesz zwykłego elementu nth-child, np. :nth-child(2) w klasie specjalnej, przeglądarka wybierze element, do którego zastosowano specjalną klasę, oraz element podrzędny. W przeciwieństwie do funkcji :nth-child(2 of .special) najpierw wstępnie odfiltrowuje wszystkie elementy .special, a potem wybiera drugi z nich.

Więcej o tej funkcji dowiesz się z artykułu o składni typu n-wartość.

text-wrap: balance

Selektory i zapytania dotyczące stylu to nie jedyne miejsca, w których możemy umieścić logikę w naszych stylach. Kolejna kwestia to typografia. Od wersji Chrome 114 możesz używać równoważenia tekstu w nagłówkach przy użyciu właściwości text-wrap z wartością balance.

Aby zrównoważyć tekst, przeglądarka przeprowadza wyszukiwanie binarne o najmniejszej szerokości bez konieczności tworzenia dodatkowych wierszy. Zatrzymuje się na jednym pikselu CSS (nie wyświetla tego piksela). Aby dodatkowo zminimalizować liczbę kroków wyszukiwania binarnego, przeglądarka zaczyna od 80% średniej szerokości linii.

Więcej informacji na ten temat znajdziesz w tym artykule.

initial-letter

Kolejną przydatną ulepszoną typografią stron internetowych jest initial-letter. Ta właściwość CSS zapewnia większą kontrolę nad stylem wstawionych znaków ograniczania dostępu.

Możesz użyć initial-letter w pseudoelemencie :first-letter, aby określić: Rozmiar litery zależy od liczby jej wierszy. Odsunięcie bloku litery lub „ujście” w przypadku jej umieszczenia.

Więcej informacji o korzystaniu z usługi intial-letter znajdziesz tutaj.

Dynamiczne jednostki widocznego obszaru

Jednym z częstych problemów, z którymi stykają się programiści stron internetowych, są dokładne i spójne rozmiary widocznego obszaru, zwłaszcza na urządzeniach mobilnych. Jako deweloper chcesz, żeby element 100vh (100% wysokości widocznego obszaru) oznaczał „wysoką wysokość widocznego obszaru”, ale jednostka vh nie uwzględnia takich elementów, jak wycofywanie pasków nawigacyjnych na urządzeniach mobilnych, w związku z czym czasami wyświetla się zbyt długo i powoduje przewijanie.

Aby rozwiązać ten problem, wprowadziliśmy na platformie internetowej nowe wartości jednostek, takie jak: – Niewielka wysokość i szerokość widocznego obszaru (svh i svw), które reprezentują najmniejszy aktywny rozmiar widocznego obszaru. – Duża wysokość i szerokość widocznego obszaru (lvh i lvw), które stanowią największy rozmiar. – Dynamiczna wysokość i szerokość widocznego obszaru (dvh i dvw).

Wartość dynamicznych jednostek widocznego obszaru zmienia się, gdy widoczne są dodatkowe dynamiczne paski narzędzi przeglądarki, takie jak adres u góry lub pasek kart na dole, a gdy nie.

Więcej informacji o nowych jednostkach znajdziesz w artykule Duże, małe i dynamiczne jednostki widocznego obszaru.

Przestrzenie kolorów o szerokiej gamie

Kolejną nowością z platformy internetowej są szeroka gama barw. Zanim na platformie internetowej pojawiły się szerokie spektrum kolorów, można było zrobić zdjęcie w żywych kolorach, które będzie widoczne na nowoczesnych urządzeniach, ale nie było możliwości stworzenia przycisku, koloru tekstu ani tła pasującego do tych żywych wartości.

Obecnie na platformie internetowej dostępne są jednak nowe przestrzenie kolorów, m.in. REC2020, P3, XYZ, LAB, OKLAB, LCH i OKLCH. Poznaj nowe przestrzenie kolorów w internecie i nie tylko w przewodniku po kolorach HD.

W Narzędziach deweloperskich od razu widać, jak rozwinął się zakres kolorów – ta biała linia wyznacza koniec zakresu i początek zakresu.

Dostępnych jest znacznie więcej narzędzi do kolorowania. Nie przegap też tych wszystkich świetnych ulepszeń gradientu. Przygotowaliśmy nawet zupełnie nowe narzędzie – Adam Argyle – które pomoże Ci wypróbować nowy selektor kolorów internetowych i narzędzie do tworzenia gradientów. Wypróbuj je na stronie gradient.style.

łączenie kolorów()

Rozwijanie rozszerzonych przestrzeni kolorów jest funkcją color-mix(). Ta funkcja umożliwia mieszanie dwóch wartości kolorów w celu tworzenia nowych wartości na podstawie pomieszanych kanałów. Na wyniki wpływa przestrzeń kolorów, w której wymieszane są kolory. Praca w bardziej postrzeganej przestrzeni kolorów, takiej jak oklch, będzie biegać przez inny zakres kolorów niż obraz typu Srgb.

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

Funkcja color-mix() zapewnia żądaną od dawna funkcję: pozwala zachować nieprzezroczyste wartości kolorów i zwiększyć ich przezroczystość. Teraz możesz używać zmiennych kolorów marki i tworzyć odmiany tych kolorów z różnym nieprzezroczystością. Aby to zrobić, połącz kolor z przezroczystym. Jeśli połączysz kolor marki z niebieskim z przezroczystym w 10%, uzyskasz 90% nieprzezroczysty kolor marki. Zobacz, jak dzięki temu możesz szybko stworzyć systemy kolorów.

Widać to dzisiaj w Narzędziach deweloperskich w Chrome, korzystając z bardzo atrakcyjnej ikony diagramu Venna w panelu stylów.

Więcej przykładów i szczegółów znajdziesz w poście na naszym blogu o miksie kolorów. Możesz też wypróbować tę playground.

Podstawy CSS

Tworzenie nowych funkcji, które zapewniają korzyści użytkownikom, to jedno z problemów, ale wiele funkcji dostępnych w Chrome ma na celu poprawę wrażeń programistów oraz stworzenie bardziej niezawodnej i uporządkowanej architektury CSS. Obejmują one zagnieżdżanie arkuszy CSS, warstwy kaskadowe, style zakresu, funkcje trygonometryczne i poszczególne właściwości przekształcania.

Umieszczanie

Zagnieżdżanie arkuszy CSS – funkcję Sass, która jest jedną z najważniejszych od lat deweloperów usług porównywania cen – w końcu trafia na platformę internetową. Zagnieżdżanie umożliwia programistom pisanie w bardziej zwięzłym, pogrupowanym formacie, który zmniejsza nadmiarowość.

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

Możesz też zagnieżdżać zapytania o multimedia, co oznacza, że możesz też zagnieżdżać zapytania o kontenery. W poniższym przykładzie karta została zmieniona z układu pionowego na poziomy, jeśli kontener ma wystarczającą szerokość:

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

Dostosowanie układu do flex nastąpi, gdy w kontenerze pojawi się więcej (lub równa) 480px wolnego miejsca w tekście. Przeglądarka po prostu zastosuje nowy styl wyświetlania, gdy zostaną spełnione warunki.

Więcej informacji i przykłady znajdziesz w naszym poście o zagnieżdżaniu arkuszy CSS.

Kaskadowe warstwy

Innym problemem, który zauważyliśmy, jest zapewnienie spójności, w której style wygrywają z innymi. Jednym z rozwiązań tego problemu jest lepsza kontrola nad kaskadą usług porównywania cen.

Kaskadowe warstwy rozwiązują ten problem, dając użytkownikom kontrolę nad tym, które warstwy mają wyższy priorytet od innych, co daje bardziej precyzyjną kontrolę nad stosowaniem stylów.

Więcej informacji o korzystaniu z warstw kaskadowych znajdziesz w tym artykule.

Zakres CSS

Style ograniczone do CSS pozwalają programistom określić granice, do których mają zastosowanie konkretne style, tworząc w zasadzie natywne tempo nazw w CSS. Wcześniej deweloperzy używali skryptów innych firm do zmiany nazw klas lub określonych konwencji nazewnictwa, aby zapobiegać kolizji między stylami. Jednak wkrótce będzie można używać @scope.

Teraz zmieniamy zakres elementu .title na .card. Zapobiegnie to konfliktowi tego elementu tytułu z innymi elementami .title na stronie, np. tytułem posta na blogu lub innym nagłówkiem.

@scope (.card) {
  .title {
    font-weight: bold;
  }
}

W tej prezentacji na żywo możesz zobaczyć @scope z limitami zakresu oraz @layer:

Więcej informacji o dyrektywie @scope znajdziesz w specyfikacji CSS-cascade-6.

Funkcje trygonometryczne

Kolejnym elementem nowej instalacji hydraulicznej CSS są funkcje trygonometryczne dodane do istniejących funkcji matematycznych CSS. Funkcje te działają teraz dobrze we wszystkich nowoczesnych przeglądarkach i umożliwiają tworzenie większej liczby bezpłatnych układów na platformie internetowej. Świetnym przykładem jest układ menu z promieniowym menu, który teraz można projektować i animować, używając funkcji sin() i cos().

W poniższym przykładzie kropki obracają się wokół centralnego punktu. Zamiast obracać każdą kropkę wokół jej środka, a potem przesuwać ją na zewnątrz, każda kropka jest przesuwana na osi X i Y. Odległości na osiach X i Y są określane z uwzględnieniem cos() i odpowiednio sin() dla --angle.

Więcej informacji na ten temat znajdziesz w naszym artykule o funkcjach trygonometrycznych.

Pojedyncze właściwości przekształcania

Wraz z poszczególnymi funkcjami przekształcania zwiększa się ergonomia programistów. Od czasu ostatniej konferencji I/O poszczególne przekształcenia działały stabilnie we wszystkich nowoczesnych przeglądarkach.

Wcześniej funkcja przekształcania służyła do stosowania funkcji podrzędnych do skalowania, obracania i przekładania elementu interfejsu. Wiązało się to z wieloma powtórzeniami i szczególnie frustrowało przy stosowaniu wielu przekształceń w różnych momentach animacji.

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}

Teraz możesz mieć wszystkie te szczegóły w animacjach CSS, rozdzielając typy przekształceń i stosując je pojedynczo.

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

W efekcie zmiany w przesunięciu, obrocie lub skali mogą następować jednocześnie z różnymi szybkościami zmian w różnych momentach animacji.

Więcej informacji znajdziesz w tym poście o poszczególnych funkcjach przekształcania.

Komponenty, które można dostosować

Aby mieć pewność, że za pomocą platformy internetowej zaspokajamy niektóre kluczowe potrzeby deweloperów, współpracujemy z grupą społeczności OpenUI. Zidentyfikowaliśmy 3 rozwiązania, od których warto zacząć:

1. Wbudowane wyskakujące okienko z modułami obsługi zdarzeń, deklaratywną strukturą DOM i dostępnymi ustawieniami domyślnymi.
2. Interfejs CSS API do łączenia 2 elementów ze sobą i umożliwiania pozycjonowania zakotwiczenia.
3. Komponent menu z możliwością dostosowania, który pozwala dodać styl treści do zaznaczenia.

Wyskakujące okienko

Interfejs popover API zapewnia elementy magiczne wbudowane w przeglądarkę, takie jak:

• Obsługa warstwy najwyższego poziomu, dzięki czemu nie musisz zarządzać domeną z-index. Gdy otwierasz wyskakujące okienko lub okno, promujesz dany element w specjalnej warstwie na górze strony.
• Bezpłatne działanie świateł w wyskakujących okienkach auto, więc gdy klikniesz poza elementem, wyskakujące okienko zostanie zamknięte, usunięte z drzewa ułatwień dostępu i prawidłowo zarządzane.
• Domyślny ułatwienia dostępu dla tkanki łącznej elementu docelowego wyskakującego okienka i samego wyskakującego okienka.

Wszystko to oznacza, że do stworzenia tej funkcji i śledzenia wszystkich stanów wymaga napisania mniej kodu JavaScript.

Struktura DOM wyskakującego okienka jest deklaratywna i można ją sformułować równie wyraźnie jak nadanie elementowi wyskakującego elementu id i atrybutu popover. Następnie synchronizujesz ten identyfikator z elementem, który otwiera wyskakujące okienko, np. z przyciskiem z atrybutem popovertarget:

<div id="event-popup" popover>
  <!-- Popover content goes in here -–>
</div>

<button popovertarget="event-popup">Create New Event</button>

popover to skrót dla popover=auto. Element z atrybutem popover=auto wymusza zamknięcie innych wyskakujących okienek po otwarciu, aktywuje się po otwarciu i może zostać zamknięty. I na odwrót – elementy popover=manual nie wymuszają zamknięcia żadnego innego typu elementu, nie są od razu zaznaczone ani nie znikają. Zamykają je za pomocą przełącznika lub innego działania zamykania.

Najbardziej aktualną dokumentację dotyczącą wyskakujących okienek znajdziesz na stronie MDN.

Pozycjonowanie zakotwiczenia

Wyskakujące okienka są też często używane w takich elementach jak okna i etykiety, które zwykle muszą być zakotwiczone do konkretnych elementów. Oto przykład tego wydarzenia. Gdy klikniesz wydarzenie w kalendarzu, obok niego pojawi się okno dialogowe. Elementem kalendarza jest element kalendarza, a w wyskakującym okienku wyświetla się szczegóły wydarzenia.

Możesz utworzyć wyśrodkowaną etykietkę za pomocą funkcji anchor(), używając szerokości od kotwicy do 50% jej pozycji x. Następnie użyj istniejących wartości pozycjonowania, aby zastosować pozostałe style miejsc docelowych.

Co się jednak stanie, jeśli wyskakujące okienko nie zmieści się w widocznym obszarze przy Twojej pozycji?

Aby rozwiązać ten problem, interfejs API pozycjonowania kotwicy zawiera pozycje zastępcze, które możesz dostosować. Poniższy przykład pokazuje pozycję zastępczą o nazwie „góra, a potem-dół”. Przeglądarka spróbuje najpierw umieścić etykietkę na górze, a jeśli nie zmieści się ona w widocznym obszarze, przeglądarka umieści ją pod elementem zakotwiczonym, na dole.

.center-tooltip {
  position-fallback: --top-then-bottom;
  translate: -50% 0;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: calc(anchor(top) + 0.5rem);
    left: anchor(center);
  }

  @try {
    top: calc(anchor(bottom) + 0.5rem);
    left: anchor(center);
  }
}

Więcej informacji o pozycjonowaniu zakotwiczenia znajdziesz w tym poście na blogu.

<selectmenu>

Zarówno pozycjonowanie wyskakujących okienek, jak i kotwice pozwala tworzyć w pełni konfigurowalne menu wyboru. Grupa społeczności OpenUI badała podstawową strukturę tych menu i szukała sposobów na dostosowanie treści, które się w nich znajdują. Skorzystaj z tych wizualnych przykładów:

Aby utworzyć przykład z elementu selectmenu najdalej od lewej strony z kolorowymi kropkami odpowiadającymi kolorom wyświetlanym w wydarzeniu w kalendarzu, możesz napisać w ten sposób:

<selectmenu>
  <button slot="button" behavior="button">
    <span>Select event type</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <span><img src="icon.svg"/></span>
  </button>
  <option value="meeting">
    <figure class="royalblue"></figure>
    <p>Meeting</p>
  </option>
  <option value="break">
    <figure class="gold"></figure>
     <p>Lunch/Break</p>
  </option>
  ...
</selectmenu>

Przejścia właściwości dyskretnych

Aby wszystkie te elementy działały sprawnie i przenosiły wyskakujące okienka, internet potrzebuje jakiegoś sposobu animowania właściwości dyskretnych. Są to właściwości, których w przeszłości nie można było animować, czyli np. animowanie do i z górnej warstwy oraz do i z elementu display: none.

Podczas pracy nad zapewnieniem ładnych przejść dla wyskakujących okienek, wybranych menu, a nawet dotychczasowych elementów, takich jak okna czy komponenty niestandardowe, przeglądarki umożliwiają obsługę tych animacji w nowych instalacjach hydraulicznych.

Poniższa demonstracja animuje wyskakujące okienka i wycofuje je za pomocą :popover-open w przypadku stanu otwartego, @starting-style (przed otwarciem) i stosuje wartość przekształcenia bezpośrednio do elementu na potrzeby stanu po-otwarciu-po zamknięciu. Aby wszystkie te elementy działały z reklamami displayowymi, należy dodać je do właściwości transition w ten sposób:

.settings-popover {
  &:popover-open {
    /*   0. before-change   */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. open (changed) state   */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. After-change state */
  transform: translateY(-50px);
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

Interactions

Teraz przejdziemy do interakcji – to ostatni punkt prezentacji funkcji interfejsu internetowego.

Mówiliśmy już o animowaniu właściwości dyskretnych, ale w Chrome znajdziesz też kilka naprawdę ciekawych interfejsów API związanych z animacjami przewijanymi i przejściami widoku.

Animacje przewijane

Animacje wyświetlane po przewinięciu pozwalają sterować odtwarzaniem animacji w zależności od pozycji przewijania kontenera przewijania. Oznacza to, że podczas przewijania w górę lub w dół animacja przewija się do przodu lub do tyłu. Poza tym takie animacje pozwalają też sterować animacją na podstawie pozycji elementu w kontenerze przewijania. Dzięki temu możesz tworzyć ciekawe efekty, np. obraz tła z paralaksą, paski postępu przewijania czy obrazy, które odsłaniają się, gdy się pojawią.

Ten interfejs API obsługuje zestaw klas JavaScript i właściwości CSS, które pozwalają łatwo tworzyć deklaratywne animacje przewijane.

Do wyświetlania animacji CSS za pomocą przewijania używaj nowych właściwości scroll-timeline, view-timeline i animation-timeline. Aby sterować interfejsem JavaScript Web Animations API, przekaż instancję ScrollTimeline lub ViewTimeline jako opcję timeline do Element.animate()

Te nowe interfejsy API współpracują z istniejącymi interfejsami API animacji internetowych i CSS, co oznacza, że korzystają z zalet tych interfejsów. Obejmuje to możliwość ich wyświetlania poza głównym wątkiem. Tak, to dobrze – teraz możesz korzystać z płynnych animacji przewijanych i wychodzących poza wątek główny. Wystarczy do tego kilka wierszy dodatkowego kodu. Co Ci się nie podoba?!

Obszerny, szczegółowy przewodnik na temat tworzenia takich animacji znajdziesz w tym artykule.

Wyświetl przejścia

Interfejs View Transition API ułatwia zmianę modelu DOM w jednym kroku i przy tym tworzy animowane przejście między dwoma stanami. Mogą to być proste zanikanie między widokami, ale możesz również kontrolować przejście poszczególnych części strony.

Przejścia widoku można wykorzystać jako progresywne ulepszenie: nanieś kod, który aktualizuje DOM, korzystając z dowolnej metody, i umieść go w interfejsie API przejścia widoku z zastępczą opcją dla przeglądarek, które nie obsługują tej funkcji.

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));
}

Wygląd przejścia jest sterowany za pomocą CSS

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

Jak pokazano w tej świetnej demonstracji utworzonej przez Maxi Ferreira, inne interakcje ze stroną, takie jak odtwarzanie filmu, działają nadal w trakcie przejścia.

Przejścia widoku działają obecnie w aplikacjach jednostronicowych (SPA) dostępnych w Chrome 111. Pracujemy nad obsługą aplikacji wielostronicowych. Więcej informacji znajdziesz w pełnym przewodniku po przejściach w ramach widoków.

Podsumowanie

Najnowsze informacje o stronach w zakresie CSS i HTML znajdziesz na stronie developer.chrome.com oraz filmy z I/O, w których znajdziesz więcej stron o stronach internetowych.