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

Una Kravets

Bramus

Adam Argyle

Ostatnie miesiące były złotym okresem dla interfejsu internetowego. Nowe możliwości platformy zostały stworzone z myślą o ścisłej rozpowszechnieniu nowej platformy w różnych przeglądarkach, co daje dostęp do większej niż dotąd możliwości internetowych i funkcji dostosowywania.

Oto 20 najbardziej ekscytujących i skutecznych funkcji, które zostały już wprowadzone lub wkrótce pojawią się w Google Ads:

• Zapytania dotyczące kontenerów
• Zapytania dotyczące stylów
• Selektor :has()
• N-ta mikroskładnia
• text-wrap: balance
• initial-letter
• Dynamiczne jednostki widocznego obszaru
• Przestrzenie barw o szerokim zakresie
• color-mix()
• Umieszczanie
• Warstwy kaskadowe
• Style ograniczone
• Funkcje trygonometryczne
• Właściwości poszczególnych przekształceń
• wyskakujące okienko,
• pozycjonowanie kotwicy
• selectmenu
• Oddzielne przeniesienia usług
• Animacje przewijane
• Wyświetlanie przejść

Nowy responsywny

Zacznijmy od nowych funkcji projektowania responsywnego. Nowe funkcje platformy umożliwiają tworzenie logicznych interfejsów z komponentami, które mają własne informacje o stylu responsywnym, tworzenie interfejsów wykorzystujących możliwości systemu, aby zapewnić bardziej natywny interfejs użytkownika, oraz umożliwiają użytkownikom udział w procesie projektowania dzięki zapytaniom o preferencje, które zapewniają pełną możliwość dostosowania.

Zapytania dotyczące kontenerów

Zapytania dotyczące kontenerów są od niedawna stabilne we wszystkich nowoczesnych przeglądarkach. Umożliwiają one zapytanie o rozmiar i styl elementu nadrzędnego, aby określić style, które należy zastosować do jego elementów podrzędnych. Zapytania o multimedia mogą uzyskiwać dostęp tylko do informacji z widocznego obszaru, co oznacza, że mogą działać tylko w ramach makroprzeglądu układu strony. Z drugiej strony zapytania kontenera to dokładniejsze narzędzie, które może obsługiwać dowolną liczbę układów lub układów w układach.

W tym przykładzie skrzynki odbiorczej panele boczne Główna skrzynka odbiorcza i Ulubione są kontenerami. E-maile w nich dostosowują układ siatki i wyświetlają lub ukrywają sygnaturę czasową e-maila w zależności od dostępnej przestrzeni. To dokładnie ten sam komponent na stronie, ale wyświetlany 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 dostosują się do przydzielonej im przestrzeni. Pasek boczny zmienia się w górny pasek z większą ilością miejsca i widzimy, że układ wygląda bardziej jak główna skrzynka odbiorcza. Gdy jest mniej miejsca, oba formaty wyświetlają się w zwięzłej postaci.

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

Określanie stylu zapytań

Specyfikacja zapytania o kontener umożliwia też wysyłanie zapytań o wartości stylu kontenera nadrzędnego. Jest on obecnie częściowo zaimplementowany w Chrome 111, gdzie możesz używać właściwości niestandardowych CSS do stosowania stylów kontenera.

W tym przykładzie do nadania stylu tła karty i ikony wskaźnika użyto cech pogodowych zapisanych w wartościach właściwości niestandardowych, takich jak deszcz, słońce i chmury.

@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 przypadku zapytań dotyczących stylów. W przyszłości będziemy stosować zapytania logiczne, aby sprawdzać, czy istnieje wartość właściwości niestandardowej, i w ten sposób ograniczać powtarzanie kodu. Obecnie rozważamy zapytania zakresowe, które mają służyć do stosowania stylów na podstawie zakresu wartości. Umożliwiłoby to zastosowanie stylów pokazanych tutaj przy użyciu wartości procentowej dla prawdopodobieństwa opadów lub zachmurzenia.

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

:has()

Mówiąc o zaawansowanych, dynamicznych funkcjach, :has() selektor to jedna z najnowszych funkcji CSS, które działają w nowoczesnych przeglądarkach. Dzięki atrybucie :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 mamy teraz selektor nadrzędny.

W przykładzie zapytania o kontener możesz użyć :has(), aby jeszcze bardziej uatrakcyjnić komponenty. Element z gwiazdką ma szare tło, a element z zaznaczonym polem wyboru – niebieskie.

Interfejs API nie jest jednak ograniczony do wyboru rodzica. Możesz też nadać styl elementom podrzędnym w elemencie nadrzędnym. Na przykład tytuł jest pogrubiony, gdy element zawiera gwiazdkę. Można to zrobić za pomocą .item:has(.star) .title. Selektor :has() daje dostęp do elementów nadrzędnych, podrzędnych, a nawet elementów potomnych, dzięki czemu jest to naprawdę elastyczny interfejs API – codziennie pojawiają się nowe przypadki użycia.

Aby dowiedzieć się więcej i zobaczyć więcej demonstracji, przeczytaj ten post na blogu na temat :has().

Składnia n-tej

Platforma internetowa ma teraz bardziej zaawansowany wybór n-tego elementu. Zaawansowana składnia elementu podrzędnego n-tyle powoduje utworzenie nowego słowa kluczowego („z”), co pozwala na użycie istniejącej składni mikro kodu An+B z bardziej precyzyjnym podzbiorem wyszukiwania.

Jeśli użyjesz zwykłego elementu n-tego potomka, np. :nth-child(2), w klasie specjalnej, przeglądarka wybierze element, do którego zastosowano klasę special, i jest on też drugim potomkiem. W przeciwieństwie do opcji :nth-child(2 of .special), która najpierw odfiltrowuje wszystkie elementy .special, a następnie wybiera z listy drugi element.

Więcej informacji o tej funkcji znajdziesz w artykule o składni „n-th-of”.

text-wrap: balance

Selekcja i zapytania o style to nie jedyne miejsca, w których możemy umieszczać logikę w naszych stylach. Innym jest typografia. Od wersji 114 przeglądarki Chrome możesz używać wyrównywania tekstu w nagłówkach, korzystając z właściwości text-wrap o wartości balance.

Aby wyrównać tekst, przeglądarka wykonuje wyszukiwanie binarne w celu znalezienia najmniejszej szerokości, która nie powoduje dodatkowych wierszy. Przeglądarka zatrzymuje się na jednym pikselu CSS (nie na pikselu wyświetlacza). Aby jeszcze bardziej zminimalizować liczbę kroków w wyszukiwaniu binarnym, przeglądarka zaczyna od 80% średniej szerokości linii.

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

initial-letter

Inne dobre rozwiązanie w zakresie typografii w internecie to initial-letter. Ta właściwość CSS zapewnia większą kontrolę nad stylami wstawionych kropek.

Użyj pseudoelementu initial-letter w elemencie :first-letter, aby określić: Rozmiar listu na podstawie liczby wierszy. Przesunięcie blokowe litery, czyli „ujście” – miejsce, w którym litera zostanie umieszczona.

Więcej informacji o używaniu intial-letter znajdziesz tutaj.

Jednostki widocznego obszaru dynamicznego

Jednym z częstych problemów, z jakimi mają obecnie do czynienia twórcy stron internetowych, jest dokładne i spójne rozmiary pełnego widocznego obszaru, zwłaszcza na urządzeniach mobilnych. Jako deweloper chcesz, aby element 100vh (100% wysokości widocznego obszaru) oznaczał „tak wysoki jak widoczny obszar”, ale jednostka vh nie uwzględnia m.in. zwijania pasków nawigacyjnych na urządzeniach mobilnych, więc czasem kończy się zbyt długo i powoduje przewijanie.

Aby rozwiązać ten problem, wprowadziliśmy na platformie internetowej nowe wartości jednostek, w tym: – małe wartości wysokości i szerokości widoku (lub svh i svw), które odpowiadają najmniejszemu rozmiarowi aktywnego widoku. – Wysokość i szerokość widocznego obszaru w dużej wersji (lvh i lvw), która odpowiada największemu rozmiarowi. – Dynamiczna wysokość i szerokość widocznego obszaru (dvh i dvw).

Wartość dynamicznych jednostek widoku zmienia się, gdy dodatkowe dynamiczne paski narzędzi przeglądarki, takie jak adres u góry lub pasek kart u dołu, są widoczne lub niewidoczne.

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

Przestrzenie kolorów o szerokim zakresie

Kolejną ważną nowością na platformie internetowej są przestrzenie barw o szerokim zakresie. Zanim na platformie internetowej udostępniono kolory o szerszym zakresie, można było robić zdjęcia o żywych kolorach, które można było wyświetlić na nowoczesnych urządzeniach, ale nie można było dopasować koloru przycisku, tekstu ani tła do tych żywych wartości.

Teraz mamy na platformie internetowej wiele nowych przestrzeni kolorów, w tym REC2020, P3, XYZ, LAB, OKLAB, LCH i OKLCH. Poznaj nowe przestrzenie kolorów w internecie i inne funkcje w przewodniku po kolorach HD.

W Narzędziach deweloperskich możesz od razu zobaczyć, jak rozszerzony został zakres kolorów. Biała linia wyznacza granicę między zakresem sRGB a szerszym zakresem kolorów.

Mnóstwo dodatkowych narzędzi do kolorów! Nie przegap też wszystkich świetnych ulepszeń gradientu. Jest nawet zupełnie nowe narzędzie stworzone przez Adama Argyle, które pozwala wypróbować nowy selektor kolorów i kreator gradientów. Znajdziesz je na stronie gradient.style.

color-mix()

Rozwijanie rozszerzonych przestrzeni kolorów to funkcja color-mix(). Ta funkcja umożliwia mieszanie 2 wartości kolorów w celu tworzenia nowych wartości na podstawie kanałów kolorów, które mają być mieszane. Przestrzeń barw, w której miksujesz kolory, wpływa na wyniki. Praca w przestrzeni kolorów bardziej zbliżonej do percepcji ludzkiego oka, takiej jak oklch, będzie obejmować inny zakres kolorów niż np. 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() umożliwia działanie, o które prosisz od dawna: możliwość zachowania wartości nieprzezroczystych kolorów i zwiększenia ich przezroczystości. Teraz możesz używać zmiennych kolorów marki podczas tworzenia wariantów tych kolorów o różnej przezroczystości. Aby to zrobić, należy połączyć kolor z przezroczystym. Połączenie koloru niebieskiego z 10% przezroczystości daje kolor nieprzezroczysty w 90%. Możesz zobaczyć, jak szybko można tworzyć systemy kolorów.

Możesz zobaczyć, jak to działa w Narzędziach deweloperskich w Chrome – teraz w panelu Style znajdziesz ikonę podglądu schematu Venna.

Więcej przykładów i szczegółów znajdziesz w naszym poście na blogu o kombinacji kolorów. Możesz też wypróbować funkcję playground na potrzeby funkcji color-mix().

Podstawy CSS

Tworzenie nowych funkcji, które przynoszą użytkownikom wyraźne korzyści, to tylko jeden z elementów układanki. Wiele funkcji dodawanych do Chrome ma na celu ulepszenie środowiska programistów i stworzenie bardziej niezawodnej i uporządkowanej architektury CSS. Do tych funkcji należą zagnieżdżanie CSS, warstwy kaskadowe, style ograniczone, funkcje trygonometryczne i poszczególne właściwości transformacji.

Umieszczanie

Wplatanie CSS, czyli jedna z najpopularniejszych funkcji w Sass, o którą od lat proszą programiści, wreszcie trafia na platformę internetową. Zagnieżdżanie pozwala deweloperom pisać w bardziej zwięzły sposób, w grupach, co zmniejsza nadmiar.

.card {}
.card:hover {}

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

  }
}

Możesz też zagnieżdżać zapytania dotyczące multimediów, co oznacza, że możesz też zagnieżdżać zapytania dotyczące kontenera. W tym przykładzie karta zmienia się z orientacji pionowej na poziomą, jeśli ma wystarczającą szerokość w kontenerze:

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

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

Dostosowanie układu do wartości flex ma miejsce, gdy w kontenerze jest więcej niż 480px dostępnego miejsca. Gdy warunki zostaną spełnione, przeglądarka zastosuje nowy styl wyświetlania.

Więcej informacji i przykładów znajdziesz w naszym poście na temat zagnieżdżania reguł CSS.

Warstwy kaskadowe

Innym problemem programistów jest zapewnienie spójności, w której style sprawdzają się nad innymi, a jednym z rozwiązań tego problemu jest większa kontrola nad kaskadą CSS.

Warstwy kaskadowe rozwiązują ten problem, dając użytkownikom możliwość wyboru warstw o wyższym priorytecie niż inne, co oznacza większą kontrolę nad tym, kiedy są stosowane style.

Więcej informacji o używaniu warstw kaskadowych znajdziesz w tym artykule.

CSS o zakresie

Style ograniczone do CSS umożliwiają deweloperom określanie granic, w których mają zastosowanie określone style, co sprowadza się do tworzenia natywnych nazw w CSS. Wcześniej deweloperzy używali skryptów innych firm do zmiany nazw klas lub określonych konwencji nazewnictwa, aby zapobiec kolizjom stylów. Wkrótce będzie można używać @scope.

Tutaj ograniczamy wartość elementu .title do .card. Dzięki temu element tytułu nie będzie się kolidował z innymi elementami .title na stronie, takimi jak tytuł posta na blogu czy inny nagłówek.

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

W tym demonstracyjnym filmie możesz zobaczyć @scope z ograniczeniami zakresu oraz @layer:

Więcej informacji o właściwości @scope znajdziesz w specyfikacji css-cascade-6.

Funkcje trygonometryczne

Kolejną nowością w CSS są funkcje trygonometryczne dodawane do istniejących funkcji matematycznych CSS. Te funkcje działają obecnie stabilnie we wszystkich nowoczesnych przeglądarkach i umożliwiają tworzenie bardziej bezpłatnych układów na platformie internetowej. Doskonałym przykładem jest układ menu radialnego, który można teraz zaprojektować i animować za pomocą funkcji sin() i cos().

W prezentacji poniżej kropki obracają się wokół centralnego punktu. Zamiast obracać każdą kropkę wokół jej środka, a potem przesuwać na zewnątrz, każda kropka jest przesuwana wzdłuż osi X i Y. Odległości na osiach X i Y są określane na podstawie wartości cos() i odpowiednio sin() elementu --angle.

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

Pojedyncze właściwości przekształcenia

Ergonomia programistów rozwija się wraz z poszczególnymi funkcjami przekształcania. Od czasu ostatniej konferencji I/O poszczególne przekształcenia były stabilne we wszystkich nowoczesnych przeglądarkach.

Wcześniej do skalowania, obracania i przekształcania elementów interfejsu użytkownika służyły funkcje podrzędne, które można było stosować za pomocą funkcji transform. Wymagało to wielu powtórzeń i było szczególnie frustrujące, gdy trzeba było zastosować wiele 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 stosować te wszystkie szczegóły w animacji CSS, oddzielając typy przekształceń i zastosowując je osobno.

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

.target:hover {
  scale: 2;
}

W tym przypadku zmiany przesunięcia, obrotu lub skali mogą występować jednocześnie z różną szybkością w różnych momentach animacji.

Więcej informacji znajdziesz w tym poście na temat poszczególnych funkcji przekształcania.

Komponenty z możliwością dostosowania

Aby mieć pewność, że spełniamy najważniejsze potrzeby programistów w ramach platformy internetowej, współpracujemy z grupą społeczności OpenUI i na początek zidentyfikowaliśmy 3 rozwiązania:

1. Wbudowana funkcja wyskakującego okienka z modułami obsługi zdarzeń, deklaratywną strukturą DOM i dostępnymi domyślnymi ustawieniami.
2. Interfejs API CSS powiązany ze sobą w celu umożliwienia pozycjonowania zakotwiczonych 2 elementów.
3. Dostosowywalny komponent menu, który możesz wykorzystać, gdy chcesz nadać styl treści wewnątrz pola wyboru.

Wyskakujące okienko

Interfejs popover API zapewnia elementom wbudowane funkcje obsługi przeglądarek, takie jak:

• Obsługa najwyższego poziomu, więc nie musisz zarządzać usługą z-index. Gdy otworzysz wyskakujące okienko lub okno dialogowe, ten element zostanie przeniesiony na specjalną warstwę u góry strony.
• Łatwe zamykanie w popupach auto, dzięki czemu po kliknięciu poza elementem popup zostanie zamknięty, usunięty z drzewa ułatwień dostępu i odpowiednio zarządzi skupieniem.
• Domyślna dostępność dla elementów łączących cel okna wyskakującego i samo okienko.

Oznacza to, że do tworzenia tej funkcji i śledzenia wszystkich tych stanów trzeba napisać mniej kodu JavaScript.

Struktura DOM dla wyskakujących okienek jest deklaratywna i można ją zapisać tak łatwo, jak nadasz elementowi wyskakującemu atrybuty id i 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 od popover=auto. Element z popover=auto powoduje przymusowe zamknięcie innych wyskakujących okienek po ich otwarciu, przejmuje fokus po otwarciu i może być zamknięty bez opuszczania strony. Z drugiej strony elementy popover=manual nie powodują przymusowego zamknięcia żadnego innego typu elementu, nie otrzymują natychmiastowego fokusa ani nie są automatycznie zamykane. Można je zamknąć za pomocą przełącznika lub innego działania związanego z zamknięciem.

Najnowszą dokumentację dotyczącą wyskakujących okienek znajdziesz obecnie na MDN.

Umieszczenie kotwicy

Popovers są też często stosowane w takich elementach jak okna i etykietki, które zwykle muszą być zakotwiczone w konkretnych elementach. Weźmy na przykład to zdarzenie. Gdy klikniesz wydarzenie w kalendarzu, obok niego pojawi się okno dialogowe. Element kalendarza jest kotwicą, a wyskakujące okienko to okno, które zawiera szczegóły wydarzenia.

Korzystając z funkcji anchor(), możesz utworzyć wyśrodkowaną etykietkę, wykorzystując szerokość kotwicy, aby umieścić ją w 50% położenia reklamy na osi X. Następnie użyj istniejących wartości pozycjonowania, by zastosować pozostałe style miejsc docelowych.

Co się jednak stanie, jeśli powiadomienie nie mieści się w widoku w zależności od tego, jak je umieścisz?

Aby rozwiązać ten problem, interfejs API pozycjonowania kotwic zawiera pozycje zastępcze, które możesz dostosować. W tym przykładzie tworzymy pozycję zastępczą o nazwie „góra, a potem dół”. Najpierw przeglądarka spróbuje umieścić etykietkę narzędzia u góry, a jeśli nie mieści się ona w widocznym obszarze, umieści ją pod elementem kotwiczenia, czyli u dołu.

.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 kotwic znajdziesz w tym poście na blogu.

<selectmenu>

Dzięki pozycjonowaniu wyskakujących okienek i kotwic możesz tworzyć w pełni konfigurowalne menu wyboru. Grupa społeczności OpenUI analizowała podstawową strukturę tych menu i szukała sposobów na umożliwienie dostosowywania zawartych w nich treści. Oto kilka przykładów wizualnych:

Aby utworzyć przykład po lewej stronie selectmenu, z kolorowymi kropkami odpowiadającymi kolorom, które będą widoczne w zdarzeniu w kalendarzu, możesz napisać go 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ściowe właściwości dyskretne

Aby wszystko to płynnie się otwierało i zamykało, przeglądarka musi mieć możliwość animowania poszczególnych właściwości. Są to właściwości, które zwykle nie były animowane w przeszłości, takie jak animowanie do i z górnej warstwy oraz animacje do i z display: none.

W ramach działań mających na celu zapewnienie płynnego przejścia dla wyskakujących okienek, menu wyboru, a nawet istniejących elementów, takich jak okna czy komponenty niestandardowe, przeglądarki włączają nowe systemy hydrauliczne, które obsługują te animacje.

W tym demonstracyjnym przykładzie animacji wyskakujących okienek okna :popover-open odpowiadają otwartemu stanowi, @starting-style – nieotwartemu stanowi, a wartość transformacji – zamkniętemu stanowi. Aby wszystko działało w przypadku reklam displayowych, trzeba dodać ten parametr 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;
}

Interakcje

To prowadzi nas do interakcji, ostatniego przystanku w tej podróży po funkcjach interfejsu użytkownika w przeglądarce.

Omówiliśmy już animację pojedynczych właściwości, ale w Chrome pojawiły się też bardzo interesujące interfejsy API dotyczące animacji sterowanych przewijaniem i przechodów widoku.

Animacje przewijane

Animacje sterowane przez przewijanie umożliwiają kontrolowanie odtwarzania animacji na podstawie pozycji przewijania kontenera. Oznacza to, że podczas przewijania w górę lub w dół animacja przesuwa się do przodu lub do tyłu. Dodatkowo w przypadku animacji przewijanych możesz sterować animacją na podstawie pozycji elementu w jego kontenerze przewijania. Dzięki temu możesz tworzyć ciekawe efekty, takie jak obraz tła z efektem paralaksy, paski postępu przewijania i obrazy, które ujawniają się w miarę pojawiania się na ekranie.

Ten interfejs API obsługuje zestaw klas JavaScript i właściwości CSS, które umożliwiają łatwe tworzenie deklaratywnych animacji zależnych od przewijania.

Aby sterować animacją CSS za pomocą przewijania, użyj nowych właściwości scroll-timeline, view-timeline i animation-timeline. Aby użyć interfejsu JavaScript Web Animations API, prześlij instancję ScrollTimeline lub ViewTimeline jako opcję timeline do Element.animate().

Te nowe interfejsy API współpracują z dotychczasowymi interfejsami API Web Animations i CSS Animations, co oznacza, że korzystają z ich zalet. Obejmuje to możliwość uruchamiania tych animacji poza wątkiem głównym. Tak, dobrze przeczytałeś: możesz teraz uzyskać płynne animacje, sterowane przez przewijanie, działające w wątku głównym, za pomocą kilku dodatkowych linii kodu. Co jest nie tak?

Szczegółowe informacje o tworzeniu animacji uruchamianych przez przewijanie znajdziesz w tym artykule.

Wyświetlanie przejść

Interfejs ViewTransition API ułatwia zmianę DOM w jednym kroku, a także tworzenie animowanych przejść między 2 stanami. Możesz użyć prostego przejścia między widokami, ale możesz też kontrolować sposób przechodzenia poszczególnych części strony.

Przejścia widoku można stosować jako funkcję ulepszającą: weź swój kod, który aktualizuje DOM za pomocą dowolnej metody, i owiń go w interfejs API przejścia widoku z opcją awaryjnego wyświetlania w przeglądarkach, 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 kontrolowany 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;
}

W tym cudownym prezentacji przygotowanym przez Maxi Ferreirę pokazujemy, że inne interakcje ze stroną, takie jak odtwarzanie filmu, nie przestają działać w trakcie przejścia z widoku.

Przechodzenie z widokiem danych działa obecnie w przypadku aplikacji jednostronicowych (SPA) z Chrome 111. Pracujemy nad obsługą aplikacji wielostronicowych. Więcej informacji znajdziesz w pełnym przewodniku po przejściach między widokami.

Podsumowanie

Najnowsze informacje o stronach docelowych w CSS i HTML znajdziesz na developer.chrome.com. Obejrzyj też filmy I/O, by zobaczyć więcej stron docelowych.