CSS: 2023 r.

CSS Wrapped: 2023

Przejdź do treści:

• Podstawy architektoniczne
• Funkcje trygonometryczne
• Zaznaczenie złożone n-ty*
• Zakres
• Umieszczanie

• Typografia
• Pierwsza litera
• Zawijanie tekstu

• Kolor
• Poziom kolorów 4
• Funkcja mieszania kolorów
• Względna składnia kolorów

• Elastyczne projektowanie stron
• Zapytania dotyczące kontenerów
• Zapytania dotyczące stylów
• :has selector
• Aktualizowanie zapytania dotyczącego mediów
• Skryptowanie zapytania o multimedia
• Zapytanie o przejrzystość mediów

• Interakcja
• Wyświetlanie przejść
• Funkcja łagodnego przejścia liniowego
• Scrollend
• Animacje sterowane przewijaniem
• Załącznik do opóźnionej osi czasu
• Przejścia między poszczególnymi usługami
• Reguła typu „starting”
• Animacja w formie nakładki

• Komponenty
• Menu
• Godzina w menu
• Pseudoklasy z prawidłowymi/nieprawidłowymi klasami
• Ekskluzywny harmonijka

Niesamowite! 2023 rok był przełomowy dla usług porównywania cen.

Od #Interop2023 po wiele nowych stron w kategorii CSS i UI, które umożliwiają korzystanie z funkcji, które deweloperzy uważali kiedyś za niemożliwe na platformie internetowej. Obecnie każda nowoczesna przeglądarka obsługuje zapytania dotyczące kontenera, subgrid, selektor :has() oraz całą gamę nowych przestrzeni i funkcji kolorów. W Chrome obsługujemy animacje sterowane przewijaniem oparte wyłącznie na CSS oraz płynne animacje między widokami za pomocą przejść między widokami. Co więcej, pojawiło się wiele nowych prymitywów, które ułatwiają pracę deweloperom, np. zagnieżdżanie CSS i styl skodyfikowany.

Co to był za rok! Chcielibyśmy zakończyć ten przełomowy rok, doceniając ciężką pracę deweloperów przeglądarek i społeczności internetowej, dzięki której wszystko to było możliwe.

Obok nagłówków funkcji znajdziesz nowe plakietki z wartościami domyślnymi. Więcej informacji

• = dostępna we wszystkich stabilnych wersjach głównych przeglądarek.

• = częściowa dostępność w głównych przeglądarkach.

Podstawy architektoniczne

Zacznijmy od zmian w podstawowym języku CSS i jego możliwościach. Są to funkcje, które są fundamentalne dla sposobu tworzenia i porządkowania stylów, i dają duże możliwości deweloperowi.

Funkcje trygonometryczne

Obsługa przeglądarek

• 111
• 111
• 108
• 15.4

Źródło

W Chrome 111 dodano obsługę funkcji trygonometrycznych sin(), cos(), tan(), asin(), acos(), atan() i atan2(), udostępniając je we wszystkich głównych silnikach. Te funkcje są bardzo przydatne przy tworzeniu animacji i układów. Teraz łatwiej jest na przykład rozmieszczać elementy na kole wokół wybranego środka.

Funkcje trygonometryczne – prezentacja

Dowiedz się więcej o funkcjach trygonometrycznych w CSS.

Zaznaczenie złożone n-ty*

Obsługa przeglądarek

• 111
• 111
• 113
• 9

Za pomocą selektora pseudoklasy :nth-child() można wybierać elementy w DOM według ich indeksu. Mikroskładnia An+B pozwala precyzyjnie wybierać elementy.

Domyślnie pseudoelementy :nth-*() uwzględniają wszystkie elementy podrzędne. Od wersji 111 Chrome możesz opcjonalnie przekazywać listę selektorów do funkcji :nth-child() i :nth-last-child(). Dzięki temu możesz wstępnie przefiltrować listę elementów podrzędnych, zanim An+B wykona swoją czynność.

W tym pokazie logika 3n+1 jest stosowana tylko do małych lalek, które są wstępnie odfiltrowywane za pomocą funkcji of .small. Aby dynamicznie zmieniać używany selektor, użyj menu.

Demo złożonego wyboru n-*

Dowiedz się więcej o kompleksowych wyborach n-ty*.

Zakres

Obsługa przeglądarek

• 118
• 118
• 
• 17.4

Źródło

W Chrome 118 dodano obsługę @scope, czyli reguły at, która umożliwia ograniczenie dopasowywania selektora do określonego poddrzewa dokumentu. Dzięki stylizacji ograniczonej do zakresu możesz dokładnie określić, które elementy chcesz wybrać, bez konieczności pisania zbyt szczegółowych selektorów lub ścisłego łączenia ich ze strukturą DOM.

Drzewo podrzędne o zakresie jest zdefiniowane przez górną granicę zakresu (górną) i opcjonalny limit zakresu (dolną granicę).

@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/

Reguły stylów umieszczone w bloku zakresu będą kierowane tylko na elementy w wyodrębnionym poddrzewie. Na przykład poniższa reguła stylu ograniczona do zakresu obejmuje tylko elementy <img>, które znajdują się między elementem .card a dowolnym zagnieżdżonym komponentem zgodnym z selektorem [data-component].

@scope (.card) to ([data-component]) {
  img { … }
}

W tej prezentacji elementy <img> w komponencie karuzeli nie są dopasowywane z powodu zastosowanego limitu zakresu.

Zrzut ekranu wersji demonstracyjnej

Prezentacja na żywo funkcji Scope

Demo @scopeCSS

Więcej informacji o funkcji @scope znajdziesz w artykule „Jak ograniczyć zasięg selektorów za pomocą @scope”. Z tego artykułu dowiesz się więcej o selektorze :scope, sposobie obsługi specyficzności, zakresach bez wstępu i wpływie @scope na kaskadę.

Umieszczanie

Obsługa przeglądarek

• 120
• 120
• 117
• 17,2

Źródło

Przed zagnieżcheniem każdy selektor musiał być zadeklarowany oddzielnie od pozostałych. Prowadzi to do powtarzania się elementów, tworzenia dużej ilości plików stylów i rozproszonego procesu tworzenia. Teraz selektory można kontynuować, łącząc je z powiązanymi regułami stylu.

dl {
  /* dt styles */
  
  dt {
    /* dl dt styles */
  }

  dd {
    /* dl dd styles */
  }
}

/* same as */
dt {
  /* dt styles */
}

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}

Screencast etapu testowego

Nesting Live Demo

Zmień selektor łagodnego zagnieżdżania, aby wybrać zwycięzcę wyścigu

Umieszczanie w ramach może zmniejszyć rozmiar arkusza stylów, ograniczyć nadmiar selektorów powtarzających się elementów oraz scentralizować style komponentów. Składnia, która została początkowo udostępniona z ograniczeniem, które wymagało użycia elementu & w różnych miejscach, został jednak wzbogacony o zagnieżdżoną aktualizację składni o swobodnej atmosferze.

Dowiedz się więcej o zagnieżdżaniu.

Podsiatka

Obsługa przeglądarek

• 117
• 117
• 71
• 16

Źródło

CSS subgrid umożliwia tworzenie bardziej złożonych siatek z lepszym wyrównaniem między układami podrzędnymi. Umożliwia siatce znajdującej się w innej siatce wiersze i kolumny z zewnętrznej siatki jako własną, przy użyciu parametru subgrid jako wartości dla wierszy i kolumn siatki.

Screencast subgrid

Subgrid – prezentacja na żywo

Nagłówek, tekst i stopka dostosowują się do dynamicznych rozmiarów swoich elementów równorzędnych.

Podrzędna siatka jest szczególnie przydatna przy wyrównywaniu elementów równorzędnych do zawartości dynamicznej innych elementów. Dzięki temu copywriterzy, autorzy treści UX i tłumacze nie muszą już tworzyć tekstu, który „pasuje” do układu. Dzięki siatce szczegółowej układ można dostosować do treści.

Dowiedz się więcej o subgridzie.

Typografia

W 2023 r. wprowadziliśmy kilka ważnych zmian w typografii internetowej. Szczególnie warte uwagi jest pole text-wrap. Ta właściwość umożliwia dostosowanie układu typograficznego w przeglądarce bez konieczności tworzenia dodatkowych skryptów. Koniec z nietypową długością wierszy i skorzystaj z bardziej przewidywalnej typografii.

Pierwsza litera

Obsługa przeglądarek

• 110
• 110
• x
• 9

Źródło

Na początku roku w Chrome 110 pojawiła się właściwość initial-letter, która jest niewielką, ale potężną funkcją CSS, która określa styl umieszczania liter początkowych. Możesz ułożyć litery w stanie upuszczonym lub podniesionym. Właściwość ta przyjmuje 2 argumenty: pierwszy określa, jak głęboko ma być wstawiona litera w odpowiednim akapicie, a drugi – o ile litera ma być podniesiona nad akapit. Możesz też połączyć oba te rozwiązania, jak w tym filmie demonstracyjnym.

Zrzut ekranu z pierwszą literą

Wersja demonstracyjna z pierwszą literą

Zmieniaj wartości initial-letter dla pseudoelementu ::first-letter, aby obserwować zmiany.

Dowiedz się więcej o literze początkowej.

text-wrap: balance and pretty

Jako programista nie znasz ostatecznego rozmiaru, czcionki ani nawet języka nagłówka lub akapitu. Wszystkie zmienne potrzebne do efektywnego i estetycznego łamania tekstu znajdują się w przeglądarce. Przeglądarka zna wszystkie czynniki, takie jak rozmiar czcionki, język i przydzielone miejsce, co sprawia, że jest idealnym narzędziem do obsługi zaawansowanego układu tekstu o wysokiej jakości.

Właśnie w tym celu służą 2 nowe techniki przenoszenia tekstu: balance i pretty. Wartość balance ma na celu tworzenie spójnego bloku tekstu, a wartość pretty ma zapobiegać występowaniu znaków samotnych i zapewniać prawidłowe dzielenie wyrazów. Oba te zadania były tradycyjnie wykonywane ręcznie, a teraz można je zlecać przeglądarce i wykonywać w dowolnym przetłumaczonym języku.

Screencast z zawijaniem tekstu

Prezentacja na żywo zawijania tekstu

W tym pokazie możesz porównać efekty balance i pretty na nagłówku i akapicie, przesuwając suwak. Spróbuj przetłumaczyć prezentację na inny język.

Dowiedz się więcej o text-wrap: balance.

Kolor

Rok 2023 był rokiem kolorów na platformie internetowej. Dzięki nowym przestrzeniom barw i funkcjom, które umożliwiają dynamiczne motywy kolorów, możesz tworzyć żywe, bogate motywy, na które zasługują użytkownicy, i dostosować je do ich potrzeb.

Kolory HD (poziom kolorów 4)

Obsługa przeglądarek

• 111
• 111
• 113
• 15

Źródło

Obsługa przeglądarek

• 111
• 111
• 113
• 15

Źródło

Od sprzętu do oprogramowania, od CSS do migających świateł – komputery muszą wykonać wiele pracy, aby odwzorować kolory tak dobrze, jak widzi je ludzkie oko. W 2023 r. wprowadziliśmy nowe kolory, więcej kolorów, nowe przestrzenie barw, funkcje kolorów i nowe możliwości.

CSS i kolory mogą teraz: – Sprawdzać, czy sprzęt użytkownika obsługuje kolory HDR o szerokiej gamie. – Sprawdź, czy przeglądarka użytkownika obsługuje składnię kolorów, np. Oklch lub Display P3. – Określ kolory HDR w modelach Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ i innych. – tworzyć gradienty z kolorami HDR, – interpolować gradienty w alternatywnych przestrzeniach kolorów. – Mieszanie kolorów za pomocą color-mix(). – tworzyć warianty kolorów za pomocą względnej składni kolorów.

Screencast na urządzeniu Color 4

Wersja demonstracyjna koloru 4

W tym pokazie możesz porównać efekty zastosowania opcji „balance” i „pretty” na nagłówku oraz akapicie, przeciągając suwak. Spróbuj przetłumaczyć wersję demonstracyjną na inny język.

Dowiedz się więcej o kolorach 4 i przestrzeniach kolorów.

funkcja mieszania kolorów

Obsługa przeglądarek

• 111
• 111
• 113
• 16.2

Źródło

Mieszanie kolorów to klasyczne zadanie, które w 2023 r. będzie można wykonywać w CSS. Możesz nie tylko mieszać kolory z białym lub czarnym, ale też z przeźroczystością. Wszystko to możesz robić w dowolnej przestrzeni barw. Jest to jednocześnie funkcja kolorów podstawowych i zaawansowanych.

Screencast funkcji color-mix()

Demonstracja funkcji color-mix()

Tryb demonstracyjny pozwala wybrać 2 kolory za pomocą selektora kolorów, przestrzeń barw i procentowy udział każdego koloru w mieszance.

color-mix() można traktować jako moment w gradientzie. Gradient pokazuje wszystkie kroki potrzebne do przejścia od koloru niebieskiego do białego, a color-mix() tylko jeden krok. Gdy zaczniesz uwzględniać przestrzenie kolorów, zacznie się robić ciekawie. Dowiesz się, jak bardzo mieszanie przestrzeni kolorów może wpływać na wyniki.

Dowiedz się więcej o funkcji color-mix().

Względna składnia kolorów

Składnia kolorów względnych (RCS) to uzupełnienie metody color-mix() służącej do tworzenia wersji kolory. Jest on nieco bardziej zaawansowany niż color-mix(), ale też wykorzystuje inną strategię pracy z kolorami. color-mix() może wymieszać kolor biały, aby rozjaśnić kolor, gdzie RCS zapewnia precyzyjny dostęp do kanału jasności oraz umożliwia użycie przycisku calc() w celu automatycznego zmniejszenia lub zwiększenia jasności.

Screencast RCS

Prezentacja na żywo RCS

Zmieniaj kolory i sceny. Każdy z nich używa względnej składni kolorów do tworzenia wariantów na podstawie koloru podstawowego.

RCS pozwala na wprowadzanie zmian względnych i bezwzględnych w odniesieniu do koloru. Zmiana względna polega na tym, że bierze się bieżącą wartość nasycenia lub jasności i modyfikuje ją za pomocą calc(). Zmiana bezwzględna polega na zastępowaniu wartości kanału całkowicie nową, np. ustawieniem przezroczystości na 50%. Ta składnia zapewnia przydatne narzędzia do tworzenia motywów, wariantów na czas i innych rozwiązań.

Dowiedz się więcej o względnej składni kolorów.

Elastyczne projektowanie

Elastyczne projektowanie stron zmieniło się w 2023 roku. W tym przełomowym roku wprowadziliśmy nowe funkcje, które całkowicie zmieniły sposób tworzenia responsywnych stron internetowych, i wprowadziliśmy nowy model responsywnego projektowania opartego na komponentach. Połączenie zapytań dotyczących kontenera i :has() obsługuje komponenty, które mają swoje elastyczne i logiczne style na podstawie rozmiaru ich elementu nadrzędnego, a także obecności lub stanu dowolnego z ich elementów podrzędnych. Oznacza to, że możesz w końcu oddzielić układ na poziomie strony od układu na poziomie komponentu i raz napisać logikę, aby używać komponentu wszędzie.

Zapytania dotyczące kontenera z rozmiarami

Obsługa przeglądarek

• 105
• 105
• 110
• 16

Źródło

Zamiast stosować style CSS na podstawie globalnych informacji o rozmiarze widoku, zapytania kontenera umożliwiają zapytanie elementu nadrzędnego na stronie. Oznacza to, że komponenty mogą być stylizowane dynamicznie w wielu układach i widokach. W Walentynki tego roku (14 lutego) zapytania dotyczące rozmiaru kontenera stały się stabilne we wszystkich nowoczesnych przeglądarkach.

Aby korzystać z tej funkcji, najpierw skonfiguruj ograniczenie dla elementu, którego dotyczy zapytanie, a następnie, podobnie jak w przypadku zapytania o media, użyj @container z parametrami rozmiaru, aby zastosować style. Wraz z zapytaniami w kontenerze otrzymujesz rozmiary zapytań w kontenerze. W tej prezentacji rozmiar zapytania kontenera cqi (reprezentujący rozmiar kontenera wbudowanego) jest używany do określania rozmiaru nagłówka karty.

Screencast @container

@container Demo

Dowiedz się więcej o korzystaniu z zapytań dotyczących kontenerów.

Zapytania dotyczące kontenera stylów

Obsługa przeglądarek

• 111
• 111
• x
• 18

Źródło

Zapytania dotyczące stylów zostały częściowo zaimplementowane w Chrome 111. Korzystając z zapytań dotyczących stylu, możesz przy korzystaniu z funkcji @container style() wysyłać zapytania o wartości właściwości niestandardowych elementu nadrzędnego. Możesz na przykład sprawdzić, czy istnieje wartość właściwości niestandardowej lub czy jest ona ustawiona na określoną wartość, np. @container style(--rain: true).

Zrzut ekranu z zapytania o styl

Demo zapytania o styl

Zmieniaj kolory i sceny. Każdy z nich używa składnika koloru względnego do tworzenia wariantów na podstawie koloru podstawowego.

Chociaż brzmi to podobnie do używania nazw klas w CSS, zapytania o styl mają pewne zalety. Po pierwsze, za pomocą zapytań o style możesz w razie potrzeby aktualizować wartość w CSS w celu tworzenia pseudostanów. Dodatkowo w kolejnych wersjach implementacji będzie można wykonywać zapytania dotyczące zakresów wartości, aby określić zastosowany styl, np. style(60 <= --weather <= 70), oraz styl na podstawie par właściwość-wartość, np. style(font-style: italic).

Dowiedz się więcej o korzystaniu z zapytań stylu.

:has()

Obsługa przeglądarek

• 105
• 105
• 121
• 15.4

Źródło

Od prawie 20 lat deweloperzy prosili o „selektor nadrzędny” w CSS. Jest to możliwe dzięki selektorowi :has(), który został wprowadzony w Chrome 105. Na przykład użycie .card:has(img.hero) spowoduje wybranie elementów .card, które mają element podrzędny .card.

Zrzut ekranu wersji demonstracyjnej :has()

:has() Prezentacja na żywo

CSS :has()demonstracja: karta bez/z obrazem

Funkcja :has() przyjmuje jako argument listę względnych selektorów, dzięki czemu możesz wybrać znacznie więcej niż element nadrzędny. Za pomocą różnych selektorów CSS można nie tylko przemieszczać się w drzewie DOM, ale też dokonywać selekcji bocznych. Na przykład li:has(+ li:hover) wybierze element <li>, który występuje przed elementem <li>, który jest aktualnie najeżdżany kursorem.

:has() Screencast

Demonstracja funkcji :has()

CSS :has() demo: Dock

Dowiedz się więcej o selektorze CSS :has().

Zaktualizuj zapytanie o media

Obsługa przeglądarek

• 113
• 113
• 102
• 17

Źródło

Zapytanie o multimedia update umożliwia dostosowanie interfejsu do częstotliwości odświeżania urządzenia. Funkcja może zwracać wartość fast, slow lub none, która odnosi się do możliwości różnych urządzeń.

Większość urządzeń, na które projektujesz, prawdopodobnie ma szybką częstotliwość odświeżania. Dotyczy to komputerów i większości urządzeń mobilnych. Czytniki e-booków i urządzenia takie jak niskonapięciowe systemy płatności mogą mieć wolną częstotliwość odświeżania. Wiedząc, że urządzenie nie radzi sobie z animacjami lub częstymi aktualizacjami, możesz oszczędzać baterię lub nieprawidłowe aktualizacje widoku.

Aktualizowanie screencasta

Aktualizacja wersji demonstracyjnej

Za pomocą opcji radiowej symuluj wartość szybkości aktualizacji i zobacz, jak wpływa ona na kaczkę.

Dowiedz się więcej o @media (aktualizacja).

Skryptowanie zapytania o multimedia

Obsługa przeglądarek

• 120
• 120
• 113
• 17

Źródło

Zapytanie dotyczące obsługi skryptów pozwala sprawdzić, czy JavaScript jest dostępny. To bardzo przydatne w przypadku stopniowego ulepszania. Przed tą zapytaniem o multimedia strategią wykrywania dostępności JavaScriptu było umieszczanie w HTML-u klasy nojs i usuwanie jej za pomocą JavaScriptu. Te skrypty można usunąć, ponieważ CSS ma teraz możliwość wykrywania kodu JavaScript i odpowiedniego dostosowywania.

Dowiedz się, jak włączać i wyłączać JavaScript na stronie, aby przetestować ją za pomocą Narzędzi deweloperskich w Chrome.

Screencast skryptu

Wersja demonstracyjna skryptu

Rozważ przełączanie motywów w witrynie. Zapytanie o multimedia w skrypcie może pomóc w przełączeniu na ustawienie systemu, ponieważ nie jest dostępny JavaScript. Możesz też rozważyć komponent przełącznika – jeśli dostępny jest JavaScript, przełącznik można przesuwać gestem, a nie tylko włączać i wyłączać. Wiele świetnych możliwości ulepszenia UX, jeśli dostępne są skrypty, a przy tym niezbędna obsługa skryptów.

Dowiedz się więcej o skrypcie.

Zapytanie o multimedia z ograniczoną przejrzystością

Obsługa przeglądarek

• 118
• 118
• 
• x

Źródło

Nieprzezroczyste interfejsy mogą powodować bóle głowy lub utrudniać korzystanie z aplikacji osobom z różnymi wadami wzroku. Dlatego w systemach Windows, macOS i iOS są dostępne ustawienia, które pozwalają zmniejszyć lub całkowicie usunąć przezroczystość interfejsu. To zapytanie o multimedia dla prefers-reduced-transparency pasuje do innych preferowanych zapytań o multimedia, które pozwalają na kreatywność, a jednocześnie na dostosowanie reklam do użytkowników.

Screencast z półprzezroczystością

Demonstracja funkcji Reduced Transparency

W niektórych przypadkach możesz przesłać alternatywny układ, w którym nie ma nakładających się treści. W innych przypadkach można dostosować krycie koloru, aby było nieprzejrzyste lub prawie nieprzejrzyste. W tym wpisie na blogu znajdziesz więcej inspirujących demonstracji, które dostosowują się do preferencji użytkownika. Zapoznaj się z nimi, jeśli chcesz dowiedzieć się, kiedy warto używać zapytania o multimedia.

Dowiedz się więcej o @media (prefers-reduced-transparency).

Interakcja

Interakcja jest podstawą doświadczeń cyfrowych. Dzięki temu użytkownicy mogą dowiedzieć się, co kliknęli i gdzie się znajdują w przestrzeni wirtualnej. W tym roku pojawiło się wiele ciekawych funkcji, które ułatwiają tworzenie i wdrażanie interakcji, co pozwala na płynne przejścia użytkowników przez witrynę i zapewnia lepsze wrażenia z korzystania z internetu.

Wyświetlanie przejść

Obsługa przeglądarek

• 111
• 111
• x
• 18

Źródło

Przejścia między widokami mają ogromny wpływ na wrażenia użytkownika związane z korzystaniem ze strony. Za pomocą interfejsu View Transitions API możesz tworzyć wizualne przejścia między 2 stanami strony w aplikacji jednostronicowej. Te przejścia mogą dotyczyć całej strony lub mniejszych elementów na stronie, takich jak dodawanie lub usuwanie nowego elementu z listy.

Podstawą interfejsu View Transitions API jest funkcja document.startViewTranstion. Przekaż funkcję, która zaktualizuje DOM do nowego stanu, a interfejs API zajmie się wszystkim za Ciebie. Polega to na zrobieniu migawki przed i po, a następnie przełączeniu się między nimi. Za pomocą kodu CSS możesz kontrolować, co zostanie uchwycone, i opcjonalnie dostosować sposób animowania tych ujęć.

VT Screencast

VT Demo

Wyświetl demonstrację przejść

Interfejs View Migrates API dla aplikacji na jednej stronie dostępny w Chrome 111. Dowiedz się więcej o przejściach między widokami.

Funkcja łagodnego przejścia liniowego

Obsługa przeglądarek

• 113
• 113
• 112
• 17.2

Nie daj się zmylić nazwie tej funkcji. Funkcja linear() (nie mylić z kluczowym słowem linear) umożliwia tworzenie złożonych funkcji wygładzania w prosty sposób, ale z pewnym kompromisem w kształcie utraty części precyzji.

Przed wprowadzeniem funkcji linear() w wersji 113 przeglądarki Chrome tworzenie efektów odbicia i odskoków w CSS było niemożliwe. linear() umożliwia przybliżenie tych wygładzania przez uproszczenie ich do serii punktów, a następnie interpolację liniową między tymi punktami.

Pierwotna krzywa odskoku (na niebiesko) została uproszczona za pomocą zestawu kluczowych punktów (na zielono). Funkcja linear() używa tych punktów i liniowo interpoluje między nimi.

Screencast z wykładniczym wygładzaniem

Wygładzanie liniowe – wersja demonstracyjna

Prezentacja CSS linear().

Dowiedz się więcej o linear(). Aby utworzyć linear() krzywe, użyj generatora wypełnienia liniowego.

Koniec przewijania

Obsługa przeglądarek

• 114
• 114
• 109
• x

Źródło

Wiele interfejsów zawiera interakcje z przewijaniem. Czasami interfejs musi zsynchronizować informacje związane z bieżącą pozycją przewijania lub pobrać dane na podstawie bieżącego stanu. Przed zdarzeniem scrollend trzeba było używać nieprecyzyjnej metody limitowania czasu, która mogła się aktywować, gdy palec użytkownika nadal znajdował się na ekranie. Dzięki zdarzeniu scrollend masz zdarzenie scrollend o idealnym czasie, które określa, czy użytkownik nadal wykonuje gest.

Screencast z przewijaniem

Demo końca przewijania

To było ważne dla przeglądarki, ponieważ JavaScript nie może śledzić obecności palców na ekranie podczas przewijania – te informacje są po prostu niedostępne. Fragmenty kodu nieprawidłowego próby zakończenia przewijania można teraz usunąć i zastąpić zdarzeniem o wysokiej precyzji należącym do przeglądarki.

Dowiedz się więcej o scrollend.

Animacje sterowane przewijaniem

Obsługa przeglądarek

• 115
• 115
• 
• x

Źródło

Animacje wywoływane przez przewijanie to ciekawa funkcja dostępna w Chrome 115. Dzięki nim możesz połączyć istniejącą animację CSS lub animację utworzoną za pomocą interfejsu Web Animations API z przesunięciem przewijania. Podczas przewijania w górę i w dół lub w lewo i w prawo podczas przewijania w poziomie połączona animacja jest przewijana do przodu i do tyłu w reakcji bezpośredniej.

Dzięki oś czasu ScrollTime możesz śledzić ogólny postęp przewijania, co pokazano w poniższej prezentacji. Gdy przewijasz stronę do końca, tekst ujawnia się znak po znaku.

Screencast dotyczący SDA

Wersja demonstracyjna SDA

Przykład animacji CSS sterowanej przez przewijanie: linia czasu przewijania

Za pomocą ViewTimeline możesz śledzić element, gdy przechodzi przez obszar przewijania. Działa to podobnie do sposobu, w jaki IntersectionObserver śledzi element. W tym pokazie każde zdjęcie ujawnia się od momentu, gdy wejdzie do obszaru przewijania, do momentu, gdy znajdzie się w środku.

Screencast demonstracyjny SDA

Prezentacja na żywo SDA

Przykład animacji CSS uruchamianych przez przewijanie: widok osi czasu

Animacje uruchamiane przez przewijanie działają z animacjami CSS i interfejsem Web Animations API, dzięki czemu możesz korzystać ze wszystkich zalet tych interfejsów API. Obejmuje to możliwość uruchamiania tych animacji poza wątkiem głównym. Teraz możesz uzyskać płynne animacje, które są uruchamiane przez przewijanie i działają w wątku pobocznym. Wystarczy do tego zaledwie kilka linii dodatkowego kodu.

Aby dowiedzieć się więcej o animacjach sterowanych przewijaniem, przeczytaj ten artykuł, w którym znajdziesz wszystkie szczegóły, lub odwiedź stronę scroll-driven-animations.style, na której znajdziesz wiele wersji demonstracyjnych.

Załącznik do przesuniętych elementów osi czasu

Obsługa przeglądarek

• 116
• 116
• x
• x

Źródło

Gdy w kodzie CSS stosuje się animację opartą na przewijaniu, mechanizm wyszukiwania, który znajduje kontrolujący element przewijający, zawsze przechodzi w górę drzewa DOM, przez co jest ograniczone tylko do elementów nadrzędnych przewijania. Często jednak element, który wymaga animacji, nie jest podrzędnym elementu scroller, ale elementem znajdującym się w zupełnie innym poddrzewie.

Aby animowany element mógł znaleźć nazwane osi czasu przewijania elementu innego niż nadrzędny, użyj właściwości timeline-scope w udostępnionym elemencie nadrzędnym. Dzięki temu zdefiniowane elementy scroll-timeline lub view-timeline o tej nazwie mogą się do niej dołączać, co zwiększa jej zasięg. Dzięki temu każde konto podrzędne udostępnianego rodzica może używać osi czasu o tej nazwie.

Jeśli w deklaracji elementu nadrzędnego udostępnionego jest element timeline-scope, element scroll-timeline zadeklarowany w scrollerze może być znaleziony przez element, który używa go jako animation-timeline

Demo Screencast

Prezentacja na żywo

Przykład animacji CSS sterowanej przewijaniem: załącznik z opóźnionym działaniem

Dowiedz się więcej o timeline-scope.

Animacje właściwości dyskretnych

Kolejną nową funkcją w 2023 r. jest możliwość animowania dyskretnych animacji, np. animowanie do i z display: none. W Chrome 116 możesz używać w regułach klatek kluczowych elementów display i content-visibility. Możesz też przeprowadzić przejście w przypadku dowolnej właściwości dyskretnej w punkcie 50% zamiast 0%. Można to zrobić za pomocą właściwości transition-behavior, używając słowa kluczowego allow-discrete, lub za pomocą właściwości transition jako skrótu.

Discrete Anim. Screencast

Discrete Anim. Prezentacja

Dowiedz się więcej o przechodzeniu na oddzielne animacje.

@styl-start

Obsługa przeglądarek

• 117
• 117
• 129
• 17.5

Źródło

Reguła CSS @starting-style opiera się na nowych funkcjach internetowych umożliwiających animację display: none. Ta reguła umożliwia nadanie elementowi stylu „przed otwarciem”, aby przeglądarka mogła go wyszukać, zanim element zostanie otwarty na stronie. Jest to bardzo przydatne w przypadku animacji wejścia oraz animowania w elementach takich jak wyskakujące okienko lub okno. Jest to również przydatne za każdym razem, gdy tworzysz element i chcesz dać mu możliwość jego animacji. Weź pod uwagę poniższy przykład, w którym atrybut popover (patrz następna sekcja) jest animowany i płynnie przemieszcza się z poziomu poza widocznym obszarem do widoku i do górnej warstwy.

Screencast @starting-style

@starting-style Demo

Dowiedz się więcej o stylu@starting i innych animacjach wejścia.

Nakładka

Obsługa przeglądarek

• 117
• 117
• x
• x

Źródło

Nową właściwość CSS overlay można dodać do przejścia, aby umożliwić płynne animacje elementów z używnymi stylami najwyższej warstwy, takich jak popover i dialog. Jeśli nie użyjesz nakładki przejścia, element natychmiast wróci do stanu ucięcia, przekształcenia i przykrycia, a Ty nie zobaczysz przejścia. Podobnie overlay umożliwia płynne animacje ::backdrop po dodaniu do elementu najwyższej warstwy.

Screencast nakładki

Prezentacja na żywo z nakładką

Dowiedz się więcej o przesłonie i innych animacjach wyjścia.

Komponenty

Rok 2023 był ważnym rokiem w zakresie łączenia stylów i komponentów HTML, ponieważ popover została udostępniona i w dużej mierze została wykonana praca nad pozycjonowaniem kotwic i przyszłością stylizacji menu. Te komponenty ułatwiają tworzenie typowych wzorów interfejsu użytkownika bez konieczności korzystania z dodatkowych bibliotek lub tworzenia od podstaw własnych systemów zarządzania stanem.

Menu

Obsługa przeglądarek

• 114
• 114
• 125
• 17

Źródło

Interfejs API Popup pomaga tworzyć elementy, które wyświetlają się na wierzchu reszty strony. Mogą to być menu, elementy dobierane przez użytkownika i etykiety. Aby utworzyć proste okno wyskakujące, dodaj atrybut popover i id do elementu, który się wyświetla, i połącz jego atrybut id z przyciskiem wywołania za pomocą atrybutu popovertarget="my-popover". Interfejs Popover API obsługuje:

• Promocja do warstwy najwyższej. Popovers pojawią się na osobnej warstwie nad pozostałą częścią strony, dzięki czemu nie trzeba będzie eksperymentować z kolejnością nakładania elementów.
• Funkcja odrzucenia bez światła Kliknięcie poza obszarem wyskakującego okienka spowoduje jego zamknięcie i przywrócenie zaznaczenia.
• Domyślne zarządzanie punktem ostrości. Po otwarciu wyskakującego okienka następny przystanek będzie znajdować się w wyskakującym okienku.
• Dostęp do skrótów klawiszowych. Naciśnięcie klawisza esc lub dwukrotne kliknięcie spowoduje zamknięcie wyskakującego okienka i przywrócenie fokusu.
• Dostępne powiązania komponentów Element popover połączony z aktywatorem popover semantycznie.

Popover screencast

Prezentacja na żywo wyskakującego okienka

Reguły poziome w wybranych

Kolejną niewielką zmianą w HTML, która pojawiła się w tym roku w Chrome i Safari, jest możliwość dodawania elementów poziomej linii (tagów <hr>) do elementów <select>, aby wizualnie podzielić treści. Wcześniej umieszczenie w elemencie select tagu <hr> nie powodowało jego renderowania. W tym roku zarówno Safari, jak i Chrome obsługują tę funkcję, co umożliwia lepsze oddzielenie treści w elementach <select>.

Wybierz zrzut ekranu

Wybierz prezentację na żywo

Dowiedz się więcej o używaniu znaku <hr> w wybranych.

:prawidłowe i nieprawidłowe pseudoklasy użytkownika

Obsługa przeglądarek

• 119
• 119
• 88
• 16.5

Źródło

W tym roku :user-valid i :user-invalid są stabilne we wszystkich przeglądarkach. Działania tych pseudoklas :valid i :invalid są podobne, ale elementy formularza pasują tylko wtedy, gdy użytkownik w znaczący sposób wejdzie w interakcję z polem wejściowym. Pole formularza, które jest wymagane i puste, będzie pasować do :invalid, nawet jeśli użytkownik nie zaczął jeszcze wchodzić w interakcję ze stroną. Ten sam element sterujący nie będzie pasować do :user-invalid, dopóki użytkownik nie zmieni danych wejściowych i nie pozostawi ich w nieprawidłowym stanie.

Dzięki tym nowym selektorom nie musisz już pisać kodu stanowego, aby śledzić zmiany wprowadzone przez użytkownika.

:user-* Screencast

:user-* Prezentacja na żywo

Dowiedz się więcej o używaniu pseudoelementów walidacji formularzy user-*.

Wyjątkowy akordeon

Obsługa przeglądarek

• 120
• 120
• 130
• 17.2

Typowym wzorcem interfejsu użytkownika w internecie jest komponent harmonijka. Aby wdrożyć ten wzorzec, musisz połączyć kilka elementów <details>, często grupując je wizualnie, aby pokazać, że należą do siebie.

Nowością w Chrome 120 jest obsługa atrybutu name w elementach <details>. Gdy używasz tego atrybutu, wiele elementów <details> o tej samej wartości name tworzy grupę semantyczną. W danym momencie można otworzyć tylko 1 element w grupie: gdy otworzysz jeden z elementów <details> z grupy, poprzednio otwarty element zostanie automatycznie zamknięty. Taki rodzaj akordeonu nazywamy akordeonem wyłącznym.

Wyjątkowa prezentacja akordeonu

Elementy <details>, które są częścią wyłącznego elementu accordion, nie muszą być elementami braćmi. Mogą być rozproszone po całym dokumencie.

Podsumowanie

W ostatnich latach, a zwłaszcza w 2023 r., CSS przeżywa renesans. Jeśli nie znasz się na CSS lub chcesz odświeżyć podstawy, skorzystaj z naszego bezpłatnego kursu Ucz się CSS oraz innych bezpłatnych kursów dostępnych na stronie web.dev.

Życzymy Ci wesołych Świąt i liczymy, że wkrótce wykorzystasz w swojej pracy niektóre z tych wspaniałych nowych funkcji CSS i UI.

⇾ Zespół ds. interfejsu użytkownika w Chrome,

Una Kravets

Bramus

Adam Argyle