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

Una Kravets

Bramus

Adam Argyle

W ciągu ostatnich kilku miesięcy interfejs internetowy przeżył swój złoty okres. Nowe możliwości platformy są już dostępne w wielu przeglądarkach 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 style
• :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
• pozycjonowanie reklamy zakotwiczonej
• selectmenu
• Dyskretne przejścia właściwości
• Animacje oparte na przewijaniu
• Przejścia widoków

Nowe reklamy responsywne

Zacznijmy od nowych możliwości projektowania responsywnego. Nowe funkcje platformy umożliwiają tworzenie logicznych interfejsów z komponentami, które zawierają informacje o stylach dostosowanych do różnych urządzeń, tworzenie interfejsów korzystających z możliwości systemu w celu zapewnienia bardziej natywnych interfejsów użytkownika 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 należy zastosować do jego elementów podrzędnych. Zapytania o media mogą uzyskiwać dostęp do informacji z widocznego obszaru i je wykorzystywać, co oznacza, że działają 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 dokładnie ten sam komponent na stronie, tylko wyświetlany w różnych widokach.

Ponieważ mamy zapytanie 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 elementy są wyświetlane w skróconej formie.

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. Jest to obecnie częściowo wdrożone w Chrome 111, gdzie 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 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ż zapytania zakresowe, które umożliwią stosowanie stylów na podstawie zakresu wartości. Dzięki temu można zastosować style pokazane tutaj, używając wartości procentowej dla 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, dynamicznych funkcjach, selektor:has() jest jedną z najpotężniejszych nowych funkcji 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 rodzica.

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 zastosowane 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ż zastosować styl do wszystkich elementów podrzędnych w elemencie nadrzędnym. Na przykład tytuł jest pogrubiony, gdy element zawiera gwiazdkę. Jest to możliwe dzięki .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, który każdego dnia znajduje 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 wybieranie elementów podrzędnych. Zaawansowana składnia nth-child zawiera nowe słowo kluczowe („of”), które umożliwia używanie dotychczasowej 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 on drugim elementem podrzędnym. W przeciwieństwie do :nth-child(2 of .special), który najpierw wstępnie filtruje wszystkie elementy .special, a potem 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 naszych stylach. Kolejnym z nich jest typografia. Od Chrome 114 możesz używać równoważenia zawijania tekstu w przypadku nagłówków, używając 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 jednym 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 wpuszczanej inicjału.

Za pomocą atrybutu initial-letter w pseudo-elemencie :first-letter możesz określić: rozmiar litery na podstawie liczby zajmowanych przez nią wierszy; Przesunięcie bloku litery, czyli „zagłębienie”, w którym będzie się ona znajdować.

Więcej informacji o korzystaniu z tej funkcji znajdziesz intial-letter 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 widoku, 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 (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 widocznego obszaru.

Przestrzenie kolorów o szerokiej gamie

Kolejną nowością na platformie 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 tych żywych wartości 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. 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ń gradientów. 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. Podczas tworzenia odmian tych kolorów o różnej nieprzezroczystości możesz teraz używać zmiennych kolorów marki. Aby to zrobić, zmieszaj kolor z przezroczystym. Jeśli połączysz niebieski kolor marki z 10% przezroczystości, uzyskasz kolor marki o 90% kryciu. Dzięki temu możesz szybko tworzyć systemy kolorów.

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

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 jedna strona medalu. 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, które jest popularne w Sass i od lat należy do 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ładów 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 rozwiązania tego problemu jest lepsza kontrola nad kaskadowymi arkuszami stylów.

Warstwy kaskadowe rozwiązują ten problem, dając 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 w CSS natywną przestrzeń nazw. 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 element .title jest ograniczony do elementu .card. Zapobiegnie to konfliktowi 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 wersji demonstracyjnej 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 kołowego, który można teraz zaprojektować 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 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 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 dewelopera jest stale ulepszana dzięki indywidualnym funkcjom przekształcania. Od ostatniej konferencji I/O poszczególne 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 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 osobno.

.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 niektóre kluczowe 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ącego okienka z modułami obsługi zdarzeń, deklaratywną strukturą DOM i domyślnymi ustawieniami ułatwień dostępu.
2. Interfejs CSS API, 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 w elemencie select.

Wyskakujące okienko

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

• Obsługa warstwy najwyższej, dzięki czemu nie musisz zarządzać z-index. Gdy otwierasz wyskakujące okienko lub okno dialogowe, przenosisz ten element na specjalną warstwę na wierzchu strony.
• Dostępne bez opłat zachowanie zamykania przez kliknięcie poza elementem w wyskakujących okienkach auto, dzięki czemu 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 atrybuty id i popover. Następnie zsynchronizuj ten identyfikator z elementem, który ma 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, zostanie zaznaczony 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ć 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 elementem zakotwiczającym, a wyskakujące okienko to okno dialogowe, w którym wyświetlają się szczegóły wydarzenia.

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

Ale co się stanie, jeśli wyskakujące okienko nie zmieści się w widocznym obszarze, ponieważ zostało umieszczone w niewłaściwym miejscu?

Aby rozwiązać ten problem, interfejs API pozycjonowania elementu zakotwiczonego zawiera pozycje rezerwowe, które możesz dostosować. W tym 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ę w obszarze widoku, 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 pozycjonowania względem elementu możesz tworzyć w pełni konfigurowalne menu wyboru. Grupa społecznościowa OpenUI bada podstawową strukturę tych menu i szuka sposobów na dostosowywanie dowolnych treści w nich. 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ć:

<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 wszystkich tych elementów wysuwanych były płynne, internet potrzebuje sposobu na animowanie odrębnych właściwości. Są to właściwości, które zwykle nie były animowane, np. animowanie do i z warstwy najwyższego poziomu 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ące okienka są animowane przy użyciu 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 na 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 oparte na przewijaniu umożliwiają sterowanie odtwarzaniem animacji na podstawie pozycji przewijania kontenera przewijania. Oznacza to, że podczas przewijania w górę lub w dół animacja jest odtwarzana do przodu lub do tyłu. Animacje oparte na przewijaniu umożliwiają też sterowanie animacją na podstawie pozycji elementu w kontenerze przewijania. Umożliwia to tworzenie ciekawych efektów, takich jak obraz tła z paralaksą, 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 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 głównym wątkiem. Tak, dobrze czytasz: teraz możesz mieć płynne animacje oparte na przewijaniu, które działają poza wątkiem głównym i wymagają tylko kilku dodatkowych linijek 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 powinny 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ą zapasową 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 (SPA) 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

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.