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

Una Kravets

Bramus

Adam Argyle

Ostatnie miesiące to złoty okres dla interfejsu internetowego. Nowe możliwości platformy są ściśle powiązane z różnymi przeglądarkami i obsługują więcej funkcji internetowych oraz opcji dostosowywania niż kiedykolwiek wcześniej.

Oto 20 najciekawszych i najważniejszych funkcji, które zostały niedawno wprowadzone lub wkrótce się pojawią:

• Zapytania o kontenery
• Zapytania o styl
• :has() selektor
• Mikroskładnia nth-of
• text-wrap: balance
• initial-letter
• Dynamiczne jednostki widocznego obszaru
• Przestrzenie kolorów o szerokiej gamie
• color-mix()
• Zagnieżdżanie
• Warstwy kaskadowe
• Style ograniczone do zakresu
• Funkcje trygonometryczne
• Poszczególne właściwości przekształcenia
• popover
• anchor positioning
• selectmenu
• Dyskretne przejścia właściwości
• Animacje oparte na przewijaniu
• Przejścia widoków

Nowa reklama adaptacyjna

Zacznijmy od nowych możliwości projektowania responsywnego. Nowe funkcje platformy umożliwiają tworzenie logicznych interfejsów z komponentami, które mają własne informacje o stylach responsywnych, budowanie interfejsów wykorzystujących możliwości systemu w celu dostarczania interfejsów użytkownika o bardziej natywnym wyglądzie oraz umożliwiają użytkownikowi udział w procesie projektowania dzięki zapytaniom o preferencje użytkownika, co zapewnia pełną możliwość dostosowania.

Zapytania o kontener

Zapytania o kontener są od niedawna stabilne we wszystkich nowoczesnych przeglądarkach. Umożliwiają one wysyłanie zapytań o rozmiar i styl elementu nadrzędnego w celu określenia stylów, które powinny być stosowane do jego elementów podrzędnych. Zapytania o media mogą uzyskiwać i wykorzystywać tylko informacje z obszaru widocznego, co oznacza, że mogą działać tylko w przypadku widoku makro układu strony. Z kolei zapytania o kontener to bardziej precyzyjne 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 zarówno pasek boczny Główna, jak i Ulubione są kontenerami. E-maile w nich dostosowują układ siatki i wyświetlają lub ukrywają sygnaturę czasową w zależności od dostępnego miejsca. To ten sam komponent na stronie, tylko wyświetlany w różnych widokach.

Dzięki zapytaniu o kontener style tych komponentów są dynamiczne. Jeśli zmienisz rozmiar i układ strony, komponenty dostosują się do przydzielonego im miejsca. Pasek boczny staje się paskiem u góry z większą ilością miejsca, a układ bardziej przypomina skrzynkę odbiorczą. Gdy jest mniej miejsca, oba elementy wyświetlają się w skróconym formacie.

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

Zapytania o styl

Specyfikacja zapytań o kontener umożliwia też wysyłanie zapytań o wartości stylu kontenera nadrzędnego. Ta funkcja jest obecnie częściowo zaimplementowana w Chrome 111, w którym możesz używać niestandardowych właściwości CSS do stosowania stylów kontenera.

W poniższym przykładzie do określenia stylu tła karty i ikony wskaźnika użyto cech pogody przechowywanych w wartościach właściwości niestandardowych, takich jak deszcz, słonecznie i pochmurno.

@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 zapytań o style. W przyszłości będziemy mieć zapytania logiczne, które pozwolą określać, czy istnieje wartość właściwości niestandardowej, i zmniejszać powtarzanie kodu. Obecnie rozważamy też wprowadzenie zapytań o zakres, które umożliwią stosowanie stylów na podstawie zakresu wartości. Dzięki temu będzie można stosować style pokazane tutaj, używając wartości procentowej dla prawdopodobieństwa wystąpienia deszczu lub zachmurzenia.

Więcej informacji i demonstracji znajdziesz w naszym poście na blogu dotyczącym zapytań o styl.

:has()

Skoro mowa o zaawansowanych, dynamicznych funkcjach, selektor:has() jest jedną z najpotężniejszych nowych możliwości CSS, które pojawiają się 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 mamy teraz selektor elementu nadrzędnego.

Na przykładzie zapytania o kontener możesz użyć funkcji :has(), aby komponenty były jeszcze bardziej dynamiczne. W tym przypadku element z elementem „gwiazdka” ma szare tło, a element z zaznaczonym polem wyboru ma niebieskie tło.

Ten interfejs API nie ogranicza się jednak do wyboru elementu nadrzędnego. Możesz też stylizować dowolne elementy podrzędne w elemencie nadrzędnym. Na przykład tytuł jest pogrubiony, gdy element zawiera gwiazdkę. Można to osiągnąć za pomocą .item:has(.star) .title. Selektor :has() umożliwia dostęp do elementów nadrzędnych, podrzędnych, a nawet sąsiednich, co czyni ten interfejs API bardzo elastycznym. Codziennie pojawiają się nowe przypadki jego użycia.

Więcej informacji i dodatkowe wersje demonstracyjne znajdziesz w tym poście na blogu poświęconym :has().

Składnia nth-of

Platforma internetowa ma teraz bardziej zaawansowane wybieranie n-tego elementu podrzędnego. Zaawansowana składnia n-tego elementu podrzędnego zawiera nowe słowo kluczowe („of”), które umożliwia używanie istniejącej mikro składni An+B z bardziej szczegółowym podzbiorem, w którym można wyszukiwać.

Jeśli użyjesz zwykłego selektora nth-child, np. :nth-child(2) w przypadku klasy specjalnej, przeglądarka wybierze element, do którego zastosowano klasę specjalną, a także jest drugim elementem podrzędnym. W przeciwieństwie do :nth-child(2 of .special), który najpierw wstępnie filtruje wszystkie elementy .special, a następnie wybiera drugi z tej listy.

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

text-wrap: balance

Selektory i zapytania o style to nie jedyne miejsca, w których możemy osadzać logikę w stylach. Kolejnym jest typografia. Od Chrome 114 możesz używać równoważenia zawijania tekstu w przypadku nagłówków za pomocą właściwości text-wrap z wartością balance.

Aby zrównoważyć tekst, przeglądarka przeprowadza wyszukiwanie binarne najmniejszej szerokości, która nie powoduje dodatkowych wierszy, zatrzymując się na 1 pikselu CSS (nie pikselu wyświetlacza). Aby jeszcze bardziej zminimalizować liczbę kroków w wyszukiwaniu binarnym, przeglądarka zaczyna od 80% średniej szerokości wiersza.

Więcej informacji znajdziesz w tym artykule.

initial-letter

Kolejnym przydatnym ulepszeniem typografii internetowej jest initial-letter. Ta właściwość CSS zapewnia większą kontrolę nad stylem wpuszczanego inicjału.

Za pomocą pseudoelementu initial-letter możesz określić: rozmiar litery na podstawie liczby zajmowanych wierszy; przesunięcie bloku litery, czyli „zagłębienie”, określające miejsce, w którym będzie się ona znajdować.:first-letter

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

Dynamiczne jednostki widocznego obszaru

Jednym z częstych problemów, z jakimi borykają się obecnie programiści stron internetowych, jest dokładne i spójne określanie rozmiaru pełnego widocznego obszaru, zwłaszcza na urządzeniach mobilnych. Jako programista chcesz, aby 100vh (100% wysokości widocznego obszaru) oznaczało „wysokość widocznego obszaru”, ale jednostka vh nie uwzględnia takich elementów jak zwijane paski nawigacyjne na urządzeniach mobilnych, więc czasami jest zbyt długa i powoduje przewijanie.

Aby rozwiązać ten problem, wprowadziliśmy na platformie internetowej nowe wartości jednostek, w tym:svhsvwmała wysokość i szerokość widocznego obszaru (lub svh i svw), które reprezentują najmniejszy aktywny rozmiar widocznego obszaru; – duża wysokość i szerokość widocznego obszaru (lvh i lvw), które reprezentują największy rozmiar; – dynamiczna wysokość i szerokość widocznego obszaru (dvh i dvw);

Dynamiczne jednostki widoku zmieniają wartość, gdy dodatkowe dynamiczne paski narzędzi przeglądarki, takie jak pasek adresu u góry lub pasek kart u dołu, są widoczne i gdy nie są widoczne.

Więcej informacji o tych nowych jednostkach znajdziesz w artykule Jednostki dużego, małego i dynamicznego obszaru widoku.

Przestrzenie kolorów o szerokiej gamie

Kolejną nową, kluczową funkcją platformy internetowej są przestrzenie kolorów o szerokiej gamie. Zanim stały się dostępne na platformie internetowej, można było zrobić zdjęcie w żywych kolorach, które były widoczne na nowoczesnych urządzeniach, ale nie można było dopasować do nich koloru przycisku, tekstu ani tła.

Obecnie na platformie internetowej mamy jednak szereg nowych przestrzeni kolorów, w tym REC2020, P3, XYZ, LAB, OKLAB, LCH i OKLCH. Więcej informacji o nowych przestrzeniach kolorów w internecie znajdziesz w przewodniku po kolorach HD.

W Narzędziach deweloperskich od razu widać, jak rozszerzył się zakres kolorów, a biała linia wyznacza miejsce, w którym kończy się zakres sRGB, a zaczyna szerszy zakres kolorów.

Dostępnych jest znacznie więcej narzędzi do pracy z kolorami. Nie przegap też wszystkich wspaniałych ulepszeń gradientu. Adam Argyle stworzył nawet nowe narzędzie, które pomoże Ci wypróbować nowy selektor kolorów internetowych i generator gradientów. Znajdziesz je na stronie gradient.style.

color-mix()

Rozszerzeniem rozszerzonych przestrzeni kolorów jest funkcja color-mix(). Umożliwia ona mieszanie dwóch wartości kolorów w celu tworzenia nowych wartości na podstawie kanałów mieszanych kolorów. Przestrzeń kolorów, w której mieszasz kolory, wpływa na wyniki. Praca w bardziej percepcyjnej przestrzeni kolorów, takiej jak oklch, będzie przebiegać w innym zakresie kolorów niż w przypadku przestrzeni 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ą możliwość zachowania wartości nieprzezroczystych kolorów przy jednoczesnym dodaniu do nich pewnej przezroczystości. Teraz możesz używać zmiennych kolorów marki, tworząc odmiany tych kolorów o różnym stopniu przezroczystości. Aby to zrobić, zmieszaj kolor z przezroczystym. Jeśli zmieszasz niebieski kolor marki z 10% przezroczystości, uzyskasz kolor marki o 90% nieprzezroczystości. Widzisz, jak szybko możesz tworzyć systemy kolorów.

Możesz to sprawdzić w Narzędziach deweloperskich w Chrome, gdzie w panelu stylów znajduje się ikona podglądu w postaci diagramu Venna.

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

Podstawy CSS

Tworzenie nowych funkcji, które przynoszą użytkownikom wyraźne korzyści, to tylko część równania. Wiele funkcji wprowadzanych w Chrome ma na celu poprawę komfortu pracy deweloperów oraz stworzenie bardziej niezawodnej i uporządkowanej architektury CSS. Obejmują one zagnieżdżanie CSS, warstwy kaskadowe, style o ograniczonym zakresie, funkcje trygonometryczne i poszczególne właściwości przekształceń.

Umieszczanie

Zagnieżdżanie CSS, czyli funkcja, którą użytkownicy uwielbiają w Sass i o którą programiści CSS prosili od lat, wreszcie 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 media, co oznacza, że możesz też zagnieżdżać zapytania o kontenery. W tym przykładzie karta zmienia układ z pionowego na poziomy, jeśli w kontenerze jest wystarczająco dużo miejsca:

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

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

Dostosowanie układu do flex następuje, gdy kontener ma co najmniej 480px miejsca w linii. Przeglądarka po prostu zastosuje nowy styl wyświetlania, gdy warunki zostaną spełnione.

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

Warstwy kaskadowe

Kolejnym problemem, z którym borykają się deweloperzy, jest zapewnienie spójności w zakresie tego, które style mają pierwszeństwo przed innymi. Jednym ze sposobów na rozwiązanie tego problemu jest lepsza kontrola nad kaskadowymi arkuszami stylów.

Warstwy kaskadowe rozwiązują ten problem, ponieważ dają użytkownikom kontrolę nad tym, które warstwy mają wyższy priorytet od innych. Oznacza to większą kontrolę nad tym, kiedy stosowane są style.

Więcej informacji o tym, jak korzystać z warstw kaskadowych, znajdziesz w tym artykule.

CSS o ograniczonym zakresie

Style CSS z zakresem umożliwiają programistom określanie granic, w których obowiązują określone style, co w zasadzie tworzy natywną przestrzeń nazw w CSS. Wcześniej programiści polegali na skryptach innych firm, aby zmieniać nazwy klas, lub na określonych konwencjach nazewnictwa, aby zapobiegać kolizjom stylów, ale wkrótce będą mogli używać @scope.

W tym przypadku ograniczamy zakres elementu .title 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 tej prezentacji na żywo możesz zobaczyć @scope z ograniczeniami zakresu wraz z @layer:

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

Funkcje trygonometryczne

Kolejną nowością w CSS są funkcje trygonometryczne dodane do istniejących 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. Świetnym przykładem jest ten układ menu radialnego, który można teraz zaprojektować i animować za pomocą funkcji sin() i cos().

Na poniższym filmie kropki obracają się wokół punktu centralnego. Zamiast obracać każdą kropkę wokół jej własnego środka, a następnie przesuwać ją 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 sin() kąta --angle.

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

Poszczególne właściwości przekształcenia

Ergonomia pracy deweloperów stale się poprawia dzięki indywidualnym funkcjom przekształcania. Od ostatniej konferencji I/O indywidualne przekształcenia stały się stabilne we wszystkich nowoczesnych przeglądarkach.

W przeszłości do skalowania, obracania i przesuwania elementu interfejsu użytkownika używano funkcji transformacji. Wymagało to wielu powtórzeń i było szczególnie frustrujące, gdy trzeba było zastosować wiele transformacji 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 animacjach CSS, rozdzielając typy przekształceń i stosując je indywidualnie.

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

.target:hover {
  scale: 2;
}

Dzięki temu zmiany położenia, obrotu lub skali mogą zachodzić jednocześnie z różną szybkością w różnych momentach animacji.

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

Komponenty z możliwością dostosowania

Aby mieć pewność, że platforma internetowa spełnia najważniejsze potrzeby deweloperów, współpracujemy z grupą społeczności OpenUI i wybraliśmy 3 rozwiązania, od których zaczniemy:

1. Wbudowana funkcja wyskakujących okien z procedurami obsługi zdarzeń, deklaratywną strukturą DOM i domyślnymi ustawieniami ułatwień dostępu.
2. Interfejs API CSS, który umożliwia powiązanie ze sobą 2 elementów, aby włączyć pozycjonowanie względem elementu zakotwiczonego.
3. Komponent dostosowywanego menu, który umożliwia stylizowanie treści w elemencie select.

Wyskakujące okienko

Interfejs Popover API zapewnia elementom wbudowaną obsługę w przeglądarce, np.:

• Obsługa warstwy najwyższej, więc nie musisz zarządzać z-index. Gdy otwierasz wyskakujące okienko lub okno dialogowe, przenosisz ten element na specjalną warstwę na wierzchu strony.
• Funkcja zamykania po kliknięciu poza elementem jest dostępna bezpłatnie w przypadku wyskakujących okien auto. Dzięki temu po kliknięciu poza elementem wyskakujące okienko zostanie zamknięte, usunięte z drzewa dostępności, a fokus zostanie prawidłowo zarządzany.
• Domyślna dostępność tkanki łącznej elementu docelowego wyskakującego okienka i samego wyskakującego okienka.

Oznacza to, że aby utworzyć wszystkie te funkcje i śledzić wszystkie te stany, trzeba napisać mniej kodu JavaScript.

Struktura DOM wyskakującego okienka jest deklaratywna i można ją zapisać w prosty sposób, nadając 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 atrybutem popover=auto po otwarciu wymusi zamknięcie innych wyskakujących okienek, otrzyma fokus i będzie można go zamknąć przez kliknięcie poza nim. Z kolei elementy popover=manual nie wymuszają zamknięcia żadnego innego typu elementu, nie otrzymują natychmiast fokusu i nie są zamykane przez kliknięcie poza nimi. Zamykają się za pomocą przełącznika lub innego działania zamykającego.

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

Pozycjonowanie kotwicy

Wyskakujące okienka są też często używane w elementach takich jak okna i etykietki, które zwykle muszą być powiązane z określonymi elementami. Weźmy na przykład to wydarzenie. Gdy klikniesz wydarzenie w kalendarzu, w pobliżu klikniętego wydarzenia pojawi się okno. Element kalendarza jest elementem zakotwiczającym, a wyskakujące okienko to okno dialogowe, w którym wyświetlają się szczegóły wydarzenia.

Możesz utworzyć wyśrodkowaną etykietkę za pomocą funkcji anchor(), używając szerokości elementu zakotwiczonego, aby umieścić etykietkę w 50% pozycji x elementu zakotwiczonego. Następnie użyj istniejących wartości pozycji, aby zastosować pozostałe style umieszczania.

Ale co się stanie, jeśli wyskakujące okienko nie zmieści się w obszarze widoku ze względu na jego pozycję?

Aby rozwiązać ten problem, interfejs Anchor Positioning API zawiera pozycje rezerwowe, które możesz dostosować. W poniższym przykładzie tworzymy pozycję rezerwową o nazwie „top-then-bottom”. Przeglądarka najpierw spróbuje umieścić etykietkę u góry, a jeśli nie zmieści się ona w obszarze widocznym, umieści ją pod elementem kotwiczącym, 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>

Zarówno w przypadku pozycjonowania wyskakującego okienka, jak i elementu zakotwiczonego możesz tworzyć w pełni konfigurowalne menu wyboru. Grupa społeczności OpenUI bada podstawową strukturę tych menu i szuka sposobów na dostosowywanie dowolnych treści w nich. Przyjrzyj się tym przykładom wizualnym:

Aby utworzyć przykład selectmenu po lewej stronie z kolorowymi kropkami odpowiadającymi kolorowi, który będzie wyświetlany w wydarzeniu w kalendarzu, możesz napisać:

<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>

Dyskretne przejścia właściwości

Aby przejścia wyskakujących okienek były płynne, internet potrzebuje sposobu na animowanie odrębnych właściwości. Są to właściwości, których zwykle nie można było animować, np. animowanie do i z warstwy najwyższej oraz animowanie do i z display: none.

W ramach prac nad umożliwieniem płynnych przejść w przypadku wyskakujących okienek, menu wyboru, a nawet istniejących elementów, takich jak okna dialogowe czy komponenty niestandardowe, przeglądarki udostępniają nowe mechanizmy obsługujące te animacje.

W tym przykładzie wyskakującego okienka animujemy jego otwieranie i zamykanie za pomocą stanu :popover-open dla stanu otwartego, @starting-style dla stanu przed otwarciem i bezpośrednio stosujemy wartość przekształcenia do elementu w stanie po zamknięciu. Aby to wszystko działało w przypadku reklam displayowych, należy dodać to 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

W ten sposób docieramy do interakcji, czyli ostatniego przystanku na tej wycieczce po funkcjach interfejsu internetowego.

Mówiliśmy już o animowaniu dyskretnych właściwości, ale w Chrome pojawiają się też bardzo ciekawe interfejsy API związane z animacjami opartymi na przewijaniu i przejściami widoku.

Animacje oparte na przewijaniu

Animacje sterowane przewijaniem umożliwiają kontrolowanie odtwarzania animacji na podstawie pozycji przewijania kontenera przewijania. Oznacza to, że podczas przewijania w górę lub w dół animacja będzie odtwarzana do przodu lub do tyłu. Animacje oparte na przewijaniu umożliwiają też sterowanie animacją na podstawie pozycji elementu w 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 pojawiają się w miarę przewijania strony.

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

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

Te nowe interfejsy API działają w połączeniu z istniejącymi interfejsami Web Animations API i CSS Animations API, co oznacza, że korzystają z ich zalet. Obejmuje to możliwość uruchamiania tych animacji poza głównym wątkiem. Tak, dobrze czytasz: możesz teraz mieć płynne animacje oparte na przewijaniu, które działają poza głównym wątkiem, za pomocą zaledwie kilku dodatkowych wierszy kodu. Czego tu nie lubić?!

Szczegółowy przewodnik po tworzeniu animacji wywoływanych przewijaniem znajdziesz w tym artykule.

Wyświetlanie przejść

Interfejs View Transition API ułatwia zmianę DOM w jednym kroku, a jednocześnie tworzy animowane przejście między dwoma stanami. Mogą to być proste przejścia między widokami, ale możesz też kontrolować, jak poszczególne części strony mają się zmieniać.

Przejścia widoku można stosować jako progresywne ulepszenie: weź kod, który aktualizuje DOM dowolną metodą, i otocz go interfejsem View Transition API z wersją rezerwową 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));
}

Sposób przejścia jest kontrolowany przez usługę porównywania cen.

@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 widać w tym świetnym filmie demonstracyjnym Maxiego Ferreiry, inne interakcje na stronie, np. odtwarzanie filmu, działają podczas przejścia widoku.

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 pełnym przewodniku po przejściach widoku.

Podsumowanie

Wszystkie najnowsze informacje o CSS i HTML znajdziesz na stronie developer.chrome.com. Więcej informacji o nowościach w internecie znajdziesz w filmach z I/O.