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ą dostępne w większości przeglądarek i obsługują więcej funkcji internetowych i 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 elastyczna

Zacznijmy od nowych funkcji projektowania responsywnego. Nowe funkcje platformy umożliwiają tworzenie logicznych interfejsów z komponentami, które mają własne informacje o stylach dostosowanych do różnych urządzeń, tworzenie interfejsów korzystających z 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, które zapewniają pełną możliwość dostosowania.

Zapytania o kontener

Zapytania o kontenery stały się ostatnio 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ć zastosowane do jego elementów podrzędnych. Zapytania o media mogą uzyskiwać dostęp do informacji z obszaru widoku i je wykorzystywać, co oznacza, że mogą działać tylko w przypadku widoku makro układu strony. Zapytania o kontener są natomiast bardziej precyzyjnym narzędziem, 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 przypomina skrzynkę odbiorczą. Gdy jest mniej miejsca, oba 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 tym 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 w przypadku zapytań o styl. W przyszłości będziemy mieć zapytania logiczne, które pozwolą określić, czy istnieje wartość właściwości niestandardowej, i zmniejszyć powtarzanie kodu. Obecnie rozważamy też wprowadzenie zapytań zakresowych, które umożliwią stosowanie stylów na podstawie zakresu wartości. Umożliwiłoby to zastosowanie stylów pokazanych tutaj przy użyciu wartości procentowej prawdopodobieństwa opadów 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 funkcjach dynamicznych, selektor:has() jest jedną z najpotężniejszych nowych funkcji CSS, które pojawiają się w nowoczesnych przeglądarkach. Za pomocą selektora :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 „star” ma szare tło, a element z zaznaczonym polem wyboru ma niebieskie tło.

Ten interfejs API nie jest jednak ograniczony do wyboru elementu nadrzędnego. Możesz też zastosować style do wszystkich elementów podrzędnych 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() umożliwia dostęp do elementów nadrzędnych, podrzędnych, a nawet sąsiednich, co sprawia, że jest to bardzo elastyczny interfejs API, w przypadku którego każdego dnia pojawiają się nowe zastosowania.

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 opcje wyboru n-tego elementu podrzędnego. Zaawansowana składnia nth-child zawiera nowe słowo kluczowe („of”), które umożliwia używanie dotychczasowej składni mikro 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óre najpierw wstępnie filtruje wszystkie elementy .special, a następnie wybiera drugi z tej listy.

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

text-wrap: balance

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

Aby zrównoważyć tekst, przeglądarka przeprowadza wyszukiwanie binarne najmniejszej szerokości, która nie powoduje dodania kolejnych wierszy, zatrzymując się na 1 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 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ą atrybutu initial-letter w pseudoelemencie :first-letter możesz określić: rozmiar litery na podstawie liczby zajmowanych wierszy; Przesunięcie bloku litery lub „zagłębienie”, w którym będzie się ona znajdować.

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 deweloperzy stron internetowych, jest dokładne i spójne określanie rozmiaru pełnego obszaru wyświetlania, zwłaszcza na urządzeniach mobilnych. Jako deweloper 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: małą wysokość i szerokość widocznego obszaru (czyli 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 na platformie internetowej pojawiła się obsługa szerokiej gamy kolorów, 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 i innych nowościach znajdziesz w przewodniku po kolorach HD.

W Narzędziach deweloperskich od razu zobaczysz, jak rozszerzył się zakres kolorów. Biała linia wyznacza koniec zakresu sRGB i początek szerszego zakresu kolorów.

Dostępnych jest znacznie więcej narzędzi do obsługi kolorów. 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(). Ta funkcja umożliwia mieszanie 2 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 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 nieprzezroczystych wartości kolorów przy jednoczesnym dodaniu do nich pewnej przezroczystości. Teraz możesz używać zmiennych kolorów marki podczas tworzenia odmian tych kolorów o różnej nieprzezroczystości. Aby to zrobić, zmieszaj kolor z przezroczystością. Jeśli połączysz niebieski kolor marki z 10% przezroczystości, uzyskasz kolor marki o 90% kryciu. Możesz zobaczyć, 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ć tę funkcję w tym środowisku.

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 która od lat jest jedną z najczęściej zgłaszanych przez programistów CSS próśb, 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 dostępnego miejsca w linii. Gdy warunki zostaną spełnione, przeglądarka po prostu zastosuje nowy styl wyświetlania.

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 bardziej precyzyjną kontrolę nad tym, kiedy stosowane są style.

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

CSS z zakresem

Style CSS o ograniczonym zakresie 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 deweloperzy korzystali ze skryptów innych firm, aby zmieniać nazwy klas, lub stosowali określone konwencje nazewnictwa, aby zapobiegać kolizjom stylów, ale wkrótce będą mogli używać @scope.

W tym przypadku ograniczamy element .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 demonstracji 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 projektować i animować za pomocą funkcji sin() i cos().

Na poniższym filmie demonstracyjnym kropki obracają się wokół centralnego punktu. Zamiast obracać każdą kropkę wokół jej ś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 cos() i sin() --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 jest stale ulepszana dzięki indywidualnym funkcjom przekształcania. Od czasu ostatniej konferencji I/O przekształcenia indywidualne 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 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 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 w różnych tempach 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 zaspokaja niektóre kluczowe potrzeby deweloperów, współpracujemy z grupą społecznościową OpenUI i wybraliśmy 3 rozwiązania, od których zaczniemy:

1. Wbudowana funkcja wyskakującego okienka z modułami 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 kotwicy.
3. Konfigurowalny komponent menu, który umożliwia stylowanie treści wewnątrz elementu select.

Wyskakujące okienko

Interfejs Popover API zapewnia elementom wbudowaną obsługę przeglądarki, 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ść dla elementu łączącego element docelowy wyskakującego okienka z samym wyskakującym okienkiem.

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 innej czynności zamykającej.

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ć zakotwiczone w określonych elementach. Weźmy na przykład to wydarzenie. Gdy klikniesz wydarzenie w kalendarzu, w jego pobliżu pojawi się okno. Element kalendarza jest punktem zakotwiczenia, a wyskakujące okienko to okno dialogowe, w którym wyświetlają się szczegóły wydarzenia.

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

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

Aby rozwiązać ten problem, interfejs API pozycjonowania elementu zakotwiczonego zawiera pozycje rezerwowe, które możesz dostosować. Poniższy przykład tworzy 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 widocznym obszarze, 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, jak i zakotwiczonego możesz tworzyć w pełni dostosowywane menu wyboru. Grupa społecznościowa OpenUI bada podstawową strukturę tych menu i szuka sposobów na dostosowywanie dowolnych treści w nich zawartych. Oto przykłady wizualne:

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

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 animacja pojawiania się i znikania wyskakujących okienek jest realizowana za pomocą stanu :popover-open dla stanu otwartego, @starting-style dla stanu przed otwarciem, a wartość przekształcenia jest stosowana bezpośrednio 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 w tej wycieczce po funkcjach interfejsu internetowego.

Mówiliśmy już o animowaniu właściwości dyskretnych, 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 pozwalają kontrolować odtwarzanie animacji na podstawie pozycji przewijania kontenera przewijania. Oznacza to, że podczas przewijania w górę lub w dół animacja będzie przewijana 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.

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 JavaScript Web Animations API, przekaż instancję ScrollTimeline lub ViewTimeline jako opcję timeline do funkcji Element.animate().

Te nowe interfejsy API działają w połączeniu z dotychczasowymi interfejsami 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 czytasz: możesz teraz mieć płynne animacje oparte na przewijaniu, które działają poza wątkiem głównym, 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 2 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 funkcją 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));
}

Wygląd przejścia jest kontrolowany przez 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 widać w tym świetnym przykładzie autorstwa Maxiego Ferreiry, inne interakcje na stronie, takie jak odtwarzanie filmu, działają podczas przejścia widoku.

Przejścia widoku działają obecnie w przypadku aplikacji jednostronicowych w Chrome w wersji 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 developer.chrome.com. Więcej informacji o sieci znajdziesz w filmach z I/O.