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 wdrożone z dokładnym uwzględnieniem różnych przeglądarek, co pozwoliło na obsługę większej liczby funkcji internetowych i funkcji dostosowywania.

Oto 20 najbardziej ekscytujących i najbardziej wpływowych 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 widoku
• 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
• umiejscowienie kotwicy
• selectmenu
• Przejścia między poszczególnymi usługami
• Animacje sterowane przewijaniem
• Wyświetlanie przejść

Nowy elastyczny

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ą teraz 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ć i wykorzystywać informacje tylko z widocznego obszaru, co oznacza, że mogą działać tylko w makro widoku 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 poniższym przykładzie skrzynki odbiorczej panele 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 ten sam komponent na stronie, który pojawia się 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 staje się paskiem górnym z większą ilością miejsca, a układ przypomina ten ze skrzynki odbiorczej. Jeśli jest mniej miejsca, oba elementy są wyświetlane w skompresowanym 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 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()

A gdy mowa o potężnych funkcjach dynamicznych, selektor :has() jest jedną z najpotężniejszych nowych funkcji CSS, które pojawiają się 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 elementem „gwiazdka” ma szare tło, a element z zaznaczonym polem wyboru ma niebieskie tło.

Interfejs API nie jest jednak ograniczony do wyboru nadrzędnego. 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() zapewnia dostęp do elementów nadrzędnych, podrzędnych, a nawet elementów siostrzanych, dzięki czemu interfejs API jest bardzo elastyczny, a nowe przypadki użycia pojawiają się każdego dnia.

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 n-th-child tworzy nowe słowo kluczowe („of”), które umożliwia korzystanie z dotychczasowej mikroskładni An+B, ale z dodatkowym ograniczeniem zakresu wyszukiwania.

Jeśli użyjesz zwykłego elementu n-tego potomka, np. :nth-child(2), w przypadku klasy specjalnej, przeglądarka wybierze element, do którego zastosowano klasę special, i który jest też drugim potomkiem. W przeciwieństwie do tego :nth-child(2 of .special) najpierw odfiltruje wszystkie elementy .special, a potem wybierze drugi z tej listy.

Więcej informacji o tej funkcji znajdziesz w artykule na temat składni n-tego.

text-wrap: balance

Selektory i zapytania o styl to nie jedyne miejsca, w których możemy umieszczać logikę w stylach. Innym jest typografia. Od wersji 114 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 znajdziesz w tym artykule.

initial-letter

Kolejnym miłym ulepszeniem typografii internetowej jest initial-letter. Ta właściwość CSS zapewnia większą kontrolę nad stylami wstawionych liter.

Używasz elementu pseudo initial-letter w elemencie :first-letter, aby określić: Rozmiar litery na podstawie liczby wierszy, które zajmuje. Blokada przesunięcia litery lub „zapadka” określające miejsce, w którym litera ma się znajdować.

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

Jednostki widocznego obszaru dynamicznego

Jednym z częstych problemów, z którymi mają do czynienia deweloperzy stron internetowych, jest dokładne i spójne skalowanie pełnego widoku, zwłaszcza na urządzeniach mobilnych. Jako deweloper chcesz, aby 100vh (100% wysokości widocznego obszaru) oznaczało „być tak wysokie jak widoczny obszar”, ale jednostka vh nie uwzględnia takich elementów jak chowanie pasków nawigacyjnych na urządzeniach mobilnych, więc czasami kończy się to zbyt dużą wysokością, co 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 widoku.

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. Więcej informacji o nowych przestrzeniach kolorów internetowych znajdziesz w przewodniku po kolorach HD.

W Narzędziach deweloperskich możesz od razu zobaczyć, jak rozszerzony jest zakres kolorów. Biała linia pokazuje, gdzie kończy się zakres sRGB, a gdzie zaczyna się zakres kolorów o większym zakresie.

Dostępnych jest znacznie więcej narzędzi do tworzenia kolorów. Nie przegap też wszystkich świetnych ulepszeń gradientów. 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()

Rozszerzone przestrzenie barw są dostępne w ramach funkcji 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() zapewnia długo oczekiwaną funkcję: możliwość zachowania nieprzezroczystych wartości kolorów przy jednoczesnym dodaniu do nich pewnej przejrzystoś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 wymieszać kolor z przezroczystością. Połączenie koloru niebieskiego z 10% przezroczystości daje kolor nieprzezroczysty w 90%. Możesz zobaczyć, jak to pozwala szybko tworzyć systemy kolorów.

Możesz to zobaczyć w praktyce w narzędziach Chrome dla deweloperów, gdzie w półce stylów znajduje się bardzo przydatna ikona diagramu Venna.

Więcej przykładów i szczegółów znajdziesz w poście na blogu na temat funkcji color-mix lub wypróbuj ją na placu zabaw.

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 medió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 swoim kontenerze:

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

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

Dostosowanie układu do flex następuje, gdy kontener ma więcej (lub tyle samo) miejsca na stronie, co 480px. 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

Kolejnym problemem, który zauważyliśmy w przypadku deweloperów, jest zapewnienie spójności w wybieraniu stylów. Jednym ze sposobów na rozwiązanie tego problemu jest lepsza kontrola kaskady 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 ograniczony

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

W tym przykładzie element .title jest ograniczony do elementu .card. Zapobiegnie to konfliktowi tego elementu tytułu z innymi elementami .title na stronie, takimi jak tytuł posta na blogu lub 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 @scope znajdziesz w specyfikacji css-cascade-6.

Funkcje trygonometryczne

Kolejnym elementem nowej infrastruktury CSS są funkcje trygonometryczne dodane do dotychczasowych funkcji matematycznych CSS. Te funkcje są teraz stabilne we wszystkich nowoczesnych przeglądarkach i umożliwiają tworzenie bardziej naturalnych 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 tym pokazie kropki obracają się wokół punktu centralnego. 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() obiektu --angle.

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

Właściwości poszczególnych transformacji

Komfort pracy programistów stale się poprawia dzięki funkcjom przekształcania. Od czasu ostatniej konferencji I/O poszczególne przekształcenia stały się stabilne we wszystkich nowoczesnych przeglądarkach.

Wcześniej do skalowania, obracania i translacji elementów interfejsu 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 uwzględnić wszystkie te szczegóły w animacji CSS, oddzielając typy przekształceń i stosują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 wartościami.
2. Interfejs API usługi porównywania cen umożliwiający połączenie 2 elementów, aby umożliwić pozycjonowanie kotwicy.
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, dzięki której nie musisz zarządzać 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ącego okienka jest deklaratywna i może być zapisana w tak przejrzysty sposób, że wystarczy nadać elementowi wyskakującego okienka atrybut 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 przy otwarciu zamknięcie innych wyskakujących okienek, przejmuje fokus po otwarciu i może być zamykane bez łagodnego zamknięcia. 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.

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

Umieszczenie kotwicy

Okienka są też często używane w elementach takich jak okna dialogowe i etykiety, które zwykle muszą być zakotwiczone do określonych elementów. Weź pod uwagę to zdarzenie. Gdy klikniesz wydarzenie w kalendarzu, w pobliżu tego wydarzenia pojawi się okno. Element kalendarza jest kotwicą, a wyskakujące okienko to okno, które zawiera szczegóły wydarzenia.

Możesz utworzyć wyśrodkowany tekst podręczny za pomocą funkcji anchor(), używając szerokości elementu kotwicznego, aby ustawić tekst podręczny w odległości 50% od pozycji x elementu kotwicznego. Następnie użyj dotychczasowych wartości pozycjonowania, aby 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ę zapasową o nazwie „od góry do dołu”. 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 pozycji kotwicy 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 przykłady wizualne:

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, internet musi mieć możliwość animowania poszczególnych właściwości. Są to właściwości, które w przeszłości nie były zwykle animowane, np. animacja do warstwy najwyższej i z niej oraz animacja do i z pozycji display: none.

W ramach prac nad płynnymi przejściami w przypadku wyskakujących okienek, menu wyboru, a nawet istniejących elementów, takich jak okna dialogowe czy komponenty niestandardowe, przeglądarki włączają nowe elementy infrastruktury, aby obsługiwać te animacje.

W tym demonstracyjnym przykładzie animacji wyskakujących okienek okna :popover-open odpowiadają stanowi otwartego okna, @starting-style – nieotwartego okna, a wartość transformacji – zamkniętemu oknu. Aby wszystko działało z elementami rozszerzonymi, musisz dodać tę właściwość 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ę poszczególnych właściwości, ale w Chrome pojawiły się też bardzo interesujące interfejsy API dotyczące animacji sterowanych przez przewijanie i przejść widoku.

Animacje wywoływane przez przewijanie

Animacje sterowane przez przewijanie umożliwiają kontrolowanie odtwarzania animacji na podstawie pozycji przewijania kontenera. Oznacza to, że gdy przewijasz w górę lub w dół, animacja przesuwa się do przodu lub do tyłu. Ponadto w przypadku animacji sterowanych przewijaniem możesz też sterować animacją na podstawie pozycji elementu w swoim 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 animacji internetowych i animacji CSS, 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 tu nie lubić?

Szczegółowy przewodnik po 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 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 stopniowe udoskonalenia: weź swój kod, który aktualizuje DOM za pomocą dowolnej metody, i owiń go w interfejs API przejścia widoku z alternatywą 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 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;
}

Jak pokazuje ten wspaniały pokaz przygotowany przez Maxi Ferreira, inne interakcje z stroną, takie jak odtwarzanie filmu, działają podczas przejścia między widokami.

Przejścia widoku działają obecnie w przypadku aplikacji jednostronicowych (SPA) w Chrome 111. Pracujemy nad obsługą aplikacji wielostronicowych. Więcej informacji znajdziesz w naszym przewodniku po przejściach między widokami.

Podsumowanie

Bądź na bieżąco ze wszystkimi najnowszymi wersjami stron docelowych w CSS i HTML na developer.chrome.com i sprawdź filmy z konferencji I/O, aby dowiedzieć się więcej o stronach docelowych w sieci.