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ą już dostępne w wielu przeglądarkach 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

Browser Support

• 105
• 105
• 110
• 16

Source

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 to z kolei 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 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

Browser Support

• 111
• 111
• x
• 18

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 zapisanych 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()

Browser Support

• 105
• 105
• 121
• 15.4

Source

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ę. 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 równorzędnych, co sprawia, że jest to bardzo elastyczny interfejs API, w przypadku którego każdego dnia pojawiają się nowe zastosowania.

Uwaga: aby zapobiec spowolnieniu renderowania w przypadku dużych drzew DOM, zalecamy jak najdokładniejsze określenie zakresu tego selektora. Na przykład użycie :has() do sprawdzenia dopasowań w głównym elemencie HTML będzie wolniejsze niż sprawdzenie dopasowań na pasku nawigacyjnym lub w elemencie karty z mniejszym drzewem.

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

Składnia nth-of

Browser Support

• 111
• 111
• 113
• 9

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 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óre 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 naszych stylach. Kolejnym z nich 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.

Wypróbuj wersję demonstracyjną

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.

Wypróbuj wersję demonstracyjną

Uwaga: to świetne ulepszenie, które możesz wypróbować już dziś. Pamiętaj jednak, że ten interfejs API działa tylko w przypadku maksymalnie 4 wierszy tekstu, więc doskonale nadaje się do tytułów i nagłówków, ale prawdopodobnie nie sprawdzi się w przypadku dłuższych treści.

Więcej informacji znajdziesz w tym artykule.

initial-letter

Browser Support

• 110
• 110
• x
• 9

Source

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, czyli „zagłębienie”, w którym będzie się ona znajdować.

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

Dynamiczne jednostki widocznego obszaru

Browser Support

• 108
• 108
• 101
• 15.4

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.

Uwaga: dynamiczne jednostki widoku nie uwzględniają obecności klawiatury wirtualnej. Od Chrome 108 możesz ustawić metatag, aby zmienić to zachowanie.

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

Browser Support

• 111
• 111
• 113
• 15.4

Source

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.

Wyświetlana jest seria obrazów z przejściami między szeroką a wąską gamą kolorów, co ilustruje żywość kolorów i jej efekty.
Wypróbuj

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ń 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()

Browser Support

• 111
• 111
• 113
• 16.2

Source

Rozszerzeniem rozszerzonych przestrzeni kolorów jest funkcja color-mix(). Ta funkcja umożliwia 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 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);

Wypróbuj wersję demonstracyjną

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

Browser Support

• 120
• 120
• 117
• 17.2

Source

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

Browser Support

• 99
• 99
• 97
• 15.4

Source

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.

Zapoznaj się z projektem w Codepen

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

CSS z zakresem

Browser Support

• 118
• 118
• 
• 17.4

Source

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

Browser Support

• 111
• 111
• 108
• 15.4

Source

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

Browser Support

• 104
• 104
• 72
• 14.1

Source

Ergonomia pracy deweloperów jest stale ulepszana dzięki indywidualnym funkcjom przekształcania. Od czasu 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 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 za pomocą platformy internetowej zaspokajamy 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 API CSS, który umożliwia powiązanie ze sobą 2 elementów, aby włączyć pozycjonowanie względem elementu zakotwiczonego.
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ę 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 w przypadku wyskakujących okien auto, dzięki czemu po kliknięciu poza elementem wyskakujące okienko jest zamykane, usuwane z drzewa dostępności, a fokus jest 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 atrybut 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 pobliżu klikniętego wydarzenia 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ę 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);
  }
}

Uwaga: możesz tu podać bardzo szczegółowe informacje, co może być dość obszerne, ale jest to też okazja dla bibliotek i systemów projektowania, aby napisać logikę pozycjonowania, którą możesz wykorzystywać w wielu miejscach.

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

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

Browser Support

• 115
• 115
• 
• 26

Source

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 przewijana 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 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 głównym wątkiem. 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ść

Browser Support

• 111
• 111
• 144
• 18

Source

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));
}

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