Podsumowanie roku 2023!
Przejdź do treści:
- Elastyczne projektowanie stron
- Zapytania o kontenery
- Zapytania dotyczące stylu
- :zawiera
- Zaktualizuj zapytanie o multimedia
- Obsługa skryptów w zapytaniu o multimedia
- Zapytanie o multimedia dotyczące przejrzystości
Niesamowite! 2023 rok był ważny dla CSS.
Od #Interop2023 po wiele nowych stron w obszarze usług porównywania cen i interfejsu, które dają programistom możliwości, które kiedyś były niedostępne na platformie internetowej. Obecnie każda nowoczesna przeglądarka obsługuje zapytania o kontenery, siatkę podrzędną, selektor :has()
oraz całe mnóstwo nowych przestrzeni kolorów i funkcji. Chrome obsługuje animacje oparte wyłącznie na CSS i płynne animowanie między widokami strony internetowej za pomocą przejścia widoku. Poza tym powstało wiele nowych elementów podstawowych, które są teraz bardziej przydatne dla programistów, takich jak zagnieżdżanie arkusza CSS i styl zasięg.
Co to był za rok! Dlatego chcielibyśmy zakończyć ten rok, świętując i doceniając ciężką pracę programistów przeglądarek i społeczności internetowej, która umożliwiła to osiągnięcie.
Podstawy architektoniczne
Zacznijmy od aktualizacji podstawowego języka i funkcji CSS. To funkcje, które są podstawą sposobu tworzenia i porządkowania stylów i dają twórcom wiele możliwości.
Funkcje trygonometryczne
W Chrome 111 dodano obsługę funkcji trygonometrycznych sin()
, cos()
, tan()
, asin()
, acos()
, atan()
i atan2()
, dzięki czemu są one dostępne we wszystkich głównych wyszukiwarkach. Te funkcje są bardzo przydatne do tworzenia animacji i układów. Na przykład dużo łatwiej można teraz układać elementy na okręgu wokół wybranego środka.
Dowiedz się więcej o funkcjach trygonometrycznych w CSS.
Złożony wybór nth-*
Obsługa przeglądarek
- 111
- 111
- 113
- 9
Za pomocą pseudoklasy :nth-child()
możesz wybierać elementy w DOM według ich indeksu. Mikroskładnia An+B
pozwala precyzyjnie określić, które elementy chcesz wybrać.
Domyślnie pseudo :nth-*()
uwzględniają wszystkie elementy podrzędne. Od Chrome 111 możesz opcjonalnie przekazywać listę selektora do :nth-child()
i :nth-last-child()
. W ten sposób możesz wstępnie przefiltrować listę elementów podrzędnych, zanim An+B
wykona swoje działania.
W poniższej demonstracji logika 3n+1
jest stosowana tylko do małych lalek przez ich wstępne filtrowanie za pomocą metody of .small
. Użyj menu, aby dynamicznie zmieniać używany selektor.
Dowiedz się więcej o złożonych selektorach nth-*.
Zakres
Obsługa przeglądarek
- 118
- 118
- x
- 17,4
W Chrome 118 dodano obsługę reguły @scope
– reguły umożliwiającej dopasowanie selektora zakresu do określonego poddrzewa dokumentu. Dzięki stylowi o zakresie zakresu możesz bardzo precyzyjnie określać, które elementy wybierasz, bez konieczności pisania zbyt szczegółowych selektorów ani mocnego powiązania ich ze strukturą DOM.
Drzewo podrzędne z ograniczonym zakresem jest definiowane przez pierwiastek zakresu (górną granicę) i opcjonalny limit zakresu (dolna granica).
@scope (.card) { … } /* scoping root */
@scope (.card) to (.card__content) { … } /* scoping root + scoping limit*/
Reguły stylu umieszczone w bloku zakresu będą kierować reklamy tylko na elementy w wyciętym poddrzewie. Na przykład ta reguła stylu zakresu obejmuje tylko elementy <img>
znajdujące się między elementem .card
a dowolnym zagnieżdżonym komponentem pasującym do selektora [data-component]
.
@scope (.card) to ([data-component]) {
img { … }
}
W tej prezentacji elementy <img>
w komponencie karuzeli nie są dopasowane z powodu zastosowanego limitu zakresu.
Zrzut ekranu demonstracyjnego zakresu
Wersja demonstracyjna zakresu na żywo
Więcej informacji na temat parametru @scope
znajdziesz w artykule „Jak używać pola @scope
, aby ograniczać zasięg selektorów”. Z tego artykułu dowiesz się więcej o selektorze :scope
, sposobie obsługi szczegółowości, zakresach bez wstępu oraz o sposobie, w jaki @scope
wpływa na kaskadę.
Zagnieżdżanie
Przed zagnieżdżeniem trzeba osobno zadeklarować każdy selektor. Prowadzi to do powtarzania, zbiorczego tworzenia arkuszy stylów i rozproszenia procesu tworzenia. Teraz selektory można kontynuować, jeśli zgrupowane są powiązane reguły 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 */
}
Zagnieżdżanie screencasta
Prezentacja funkcji Nesting na żywo
Zagnieżdżanie pozwala zmniejszyć wagę arkusza stylów, zmniejszyć obciążenie powtarzających się selektorów i scentralizować style komponentów. Początkowo udostępniliśmy składnię z ograniczeniem, które wymagało używania funkcji &
w różnych miejscach. Później ją jednak znieśliśmy dzięki łagodnej aktualizacji składni.
Dowiedz się więcej o zagnieżdżaniu.
Podsiatka
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 stosowanie własnych wierszy i kolumn zewnętrznej siatki przy użyciu wartości subgrid
w wierszach i kolumnach siatki.
Subgrid Screencast
Prezentacja Subgrid
Podtabela jest szczególnie przydatna do dopasowywania treści równorzędnych do dynamicznych treści. Dzięki temu autorzy tekstu UX i tłumacze nie muszą próbować tworzyć tekstów, które pasują do układu strony. Dzięki subsiatce można dostosować układ, aby pasował do treści.
Dowiedz się więcej o subsiacie.
Typografia
W 2023 roku wprowadziliśmy kilka kluczowych zmian w typografii internetowej. Szczególnie przydatnym progresywnym ulepszeniem jest właściwość text-wrap
. Umożliwia dostosowywanie układu typograficznego tworzonego w przeglądarce bez konieczności pisania dodatkowych skryptów. Koniec z niezręczną długością wierszy i bardziej przewidywalną typografią.
Pierwsza litera
Na początku roku w Chrome 110 pojawiła się właściwość initial-letter
, mała, ale zaawansowana funkcja CSS, która określa styl rozmieszczenia pierwszych liter. Litery można umieszczać w pionie, zarówno w pionie, jak i w pionie. Właściwość akceptuje 2 argumenty: pierwszy wskazuje, jak głęboko upuścić literę w odpowiednim akapicie, a drugi wskazuje, jak głęboko upuścić literę w odpowiednim akapicie, a drugi sposób, by podnieść literę nad nią. Możesz nawet połączyć oba te tryby, tak jak w poniższej prezentacji.
Zrzut ekranu z inicjałem
Wersja demonstracyjna pierwszej litery
Dowiedz się więcej o pierwszym liście.
text-wrap: równowaga i estetyka
Deweloper nie znasz ostatecznego rozmiaru czcionki, rozmiaru czcionki, a nawet języka nagłówka czy akapitu. Wszystkie zmienne potrzebne do skutecznego i estetycznego zawijania tekstu są dostępne w przeglądarce. Przeglądarka zna wszystkie czynniki, takie jak rozmiar czcionki, język i przydzielony obszar, dlatego doskonale nadaje się do obsługi zaawansowanego układu tekstu o wysokiej jakości.
Właśnie tu do akcji wkraczają dwie nowe techniki zawijania tekstu – jedna o nazwie balance
, a druga pretty
. Wartość balance
ma na celu utworzenie harmonijnego bloku tekstu, natomiast pretty
zapobiega powstawaniu sieroci i zapewnia prawidłowe łączenie łączników. Tradycyjnie obie te czynności wykonuje się ręcznie, a praca uzależniona jest od tego, by przeglądarka działała w dowolnym przetłumaczonym języku.
Zawijaj tekst za pomocą screencasta
Prezentacja funkcji zawijania tekstu na żywo
Dowiedz się więcej o atrybucie text-wrap: Balance.
Kolor
Rok 2023 był pełen kolorów dla platformy internetowej. Dzięki nowym przestrzeniom kolorów i funkcjom, które umożliwiają dynamiczne dostosowywanie kolorów, możesz tworzyć żywe i pełne zieleni motywy, na które zasługują użytkownicy, oraz dostosowywać je do swoich potrzeb.
Przestrzenie kolorów HD (poziom kolorów 4)
Od sprzętu, przez oprogramowanie, przez usługę porównywania cen, po migające światła – nasze komputery potrzebują dużo pracy, by uatrakcyjnić ich obraz tak, jak widzą je ludzkie oko. W 2023 roku wprowadzimy nowe kolory, więcej kolorów, nowe przestrzenie i funkcje kolorów oraz nowe możliwości.
Funkcje CSS i kolor mogą:
– Sprawdzać, czy sprzęt użytkownika obsługuje kolory w szerokim zakresie kolorów HDR.
– Sprawdź, czy przeglądarka użytkownika rozpoznaje składnię kolorów, np. Oklch lub Display P3.
– Określanie kolorów HDR w Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ i innych.
– Tworzenie gradientów z kolorami HDR,
– Interpolacja gradientów w alternatywnych przestrzeniach kolorów.
- Mieszaj kolory: color-mix()
.
– Tworzenie wersji kolorystycznych ze względnej składni kolorów.
Kolor 4 screencast
Wersja demonstracyjna koloru 4
Dowiedz się więcej o kolorze 4 i przestrzeniach kolorów.
funkcja łączenia kolorów
Łączenie kolorów to klasyczne zadanie, a w 2023 r. usługi porównywania cen również sobie z tym poradzą. Możesz połączyć nie tylko kolor biały lub czarny, ale też przezroczystość – wszystko to możesz zrobić w dowolnej przestrzeni kolorów. Jest to jednocześnie podstawowa i zaawansowana funkcja kolorów.
Screencast z funkcją color-mix()
Wersja demonstracyjna color-mix()
Możesz traktować color-mix()
jako moment w czasie dzięki gradientowi. Gradient pokazuje wszystkie kroki potrzebne do przejścia z niebieskiego na biały, natomiast color-mix()
pokazuje tylko jeden krok. Gdy zaczniesz brać pod uwagę przestrzenie kolorów i dowiedzieć się, jak różne przestrzenie kolorów mogą odbiegać od uzyskanych wyników, sprawy stają się coraz bardziej zaawansowane.
Dowiedz się więcej o funkcji color-mix().
Składnia kolorów względnych
Składnia kolorów względnych (RCS) to metoda uzupełniająca w stosunku do metody color-mix()
służąca do tworzenia wariantów kolorystycznych. Ta metoda zapewnia trochę większą skuteczność niż color-mix(), ale daje też inną strategię pracy z kolorami. color-mix()
może łączyć kolor biały, aby rozjaśnić kolor, przy czym RCS zapewnia dokładny dostęp do kanału jasności oraz umożliwia użycie na kanale calc()
w celu automatycznego zmniejszania lub zwiększania jasności.
Screencast RCS
Prezentacja RCS na żywo
RCS umożliwia względne i bezwzględne manipulacje koloru. Względem zmiany bierzemy pod uwagę bieżącą wartość nasycenia lub jasności i zmodyfikujesz ją za pomocą funkcji calc()
. Zmiana bezwzględna polega na zastąpieniu wartości kanału zupełnie nową, np. przez ustawienie przezroczystości na 50%. Ta składnia zapewnia przydatne narzędzia do tworzenia motywów oraz warianty w odpowiednim czasie.
Dowiedz się więcej o składni kolorów względnych.
Elastyczne projektowanie stron
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 elastycznych stron internetowych, a także zaowocowały nowym modelem projektowania responsywnego opartego na komponentach. Połączenie zapytań dotyczących kontenera i elementów :has()
obsługuje komponenty, które mają swój styl elastyczny i logiczny na podstawie rozmiaru elementu nadrzędnego, a także obecności lub stanu 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 zapisać logikę, aby zawsze używać komponentu.
Sprawdzanie rozmiaru zapytań dotyczących kontenerów
Zamiast korzystać z globalnych informacji o rozmiarze widocznego obszaru do zastosowania stylów CSS, zapytania o kontenery obsługują zapytania dotyczące elementu nadrzędnego na stronie. Oznacza to, że styl komponentów można dostosowywać w sposób dynamiczny w wielu układach i widokach. W tym roku z okazji walentynek (14 lutego) zapytania o rozmiary kontenerów ustabilizowały się we wszystkich nowoczesnych przeglądarkach.
Aby skorzystać z tej funkcji, najpierw skonfiguruj powłokę elementu, którego dotyczy zapytanie, a potem, podobnie jak w przypadku zapytania o multimedia, użyj parametru @container
z parametrami rozmiaru, aby zastosować style. Wraz z zapytaniami dotyczącymi kontenerów otrzymujesz informacje o rozmiarach zapytań dotyczących kontenerów. W poniższej demonstracji do określenia rozmiaru nagłówka karty służy rozmiar zapytania o kontener cqi
(odzwierciedlający rozmiar kontenera wbudowanego).
@container Screencast
Wersja demonstracyjna @container
Dowiedz się więcej o korzystaniu z zapytań dotyczących kontenerów.
Style zapytań dotyczących kontenerów
Zapytania dotyczące stylu zostały częściowo wdrożone w Chrome 111. Obecnie zapytania dotyczące stylu umożliwiają wysyłanie zapytań o wartości właściwości niestandardowych w elemencie nadrzędnym, jeśli korzystasz z funkcji @container style()
. np. zapytanie, czy istnieje wartość właściwości niestandardowej lub jest ustawiona na określoną wartość, np. @container style(--rain: true)
.
Zrzut ekranu dotyczący zapytania dotyczącego stylu
Wersja demonstracyjna zapytania dotyczącego stylu
Choć brzmi to podobnie do nazw klas w CSS, zapytania dotyczące stylu mają kilka zalet. Po pierwsze, w przypadku zapytań dotyczących stylu możesz odpowiednio zaktualizować wartość w CSS w przypadku pseudostanów. W kolejnych wersjach implementacji będzie też można wysyłać zapytania o zakresy wartości, aby określić zastosowany styl (np. style(60 <= --weather <= 70)
) i styl na podstawie par właściwość-wartość, np. style(font-style: italic)
.
Dowiedz się więcej o korzystaniu z zapytań dotyczących stylu.
:has() – selektor
Od niemal 20 lat deweloperzy prosili o „selektor nadrzędny” w CSS. Jest to teraz możliwe dzięki selektorowi :has()
dostarczonemu w Chrome 105. Na przykład użycie elementu .card:has(img.hero)
spowoduje wybranie elementów .card
, które jako elementy podrzędne mają baner powitalny.
Zrzut ekranu z :has()
Demonstracja :has() na żywo
:has()
akceptuje jako argument względną listę selektora, więc możesz wybrać znacznie więcej niż element nadrzędny. Korzystając z różnych kombinatorów CSS, można nie tylko przejść w górę drzewa DOM, ale też wybrać boczne. Na przykład li:has(+ li:hover)
wybierze element <li>
, który poprzedza element <li>
, który aktualnie jest najeżdżany na kursor.
Screencast :has()
Wersja demonstracyjna funkcji :has()
Dowiedz się więcej o selektorze arkusza CSS :has()
.
Zaktualizuj zapytanie o multimedia
Zapytanie o multimedia update
umożliwia dostosowanie interfejsu do częstotliwości odświeżania urządzenia. Funkcja może zgłosić wartość fast
, slow
lub none
odnoszącą się do możliwości różnych urządzeń.
Większość urządzeń, na które projektujesz, prawdopodobnie będzie miała dużą 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 energooszczędne systemy płatności, mogą mieć niską częstotliwość odświeżania. Informacja o tym, że urządzenie nie jest w stanie obsłużyć animacji lub częstych aktualizacji, pozwala zaoszczędzić energię i ograniczyć nieprawidłowe aktualizacje widoku.
Zaktualizuj Screencast
Zaktualizuj wersję demonstracyjną
Dowiedz się więcej o elemencie @media (update).
Obsługa skryptów w zapytaniu o multimedia
Zapytanie o media w skryptach może służyć do sprawdzenia, czy kod JavaScript jest dostępny. To bardzo przydatna funkcja, jeśli chodzi o stopniowe ulepszanie. Wcześniej strategią wykrywania, czy JavaScript był dostępny, było umieszczenie klasy nojs
w kodzie HTML i usunięcie jej za pomocą JavaScriptu. Skrypty te można usunąć, ponieważ CSS ma teraz możliwość wykrywania kodu JavaScript i odpowiedniego dostosowywania treści.
Dowiedz się, jak włączyć i wyłączyć JavaScript na stronie do testowania za pomocą Narzędzi deweloperskich w Chrome.
Screencast ze skryptami
Wersja demonstracyjna obsługi skryptów
Pomyśl o przejściu motywu na stronie internetowej – zapytanie o media oparte na skryptach może pomóc w sposobie przejścia na preferencję systemową, ponieważ kod JavaScript nie jest dostępny. Możesz też rozważyć komponent przełącznika – jeśli JavaScript jest dostępny, można go przesunąć gestem, a nie po prostu włączać i wyłączać. Istnieje wiele świetnych możliwości uaktualnienia UX, jeśli dostępne są skrypty, przy jednoczesnym zapewnieniu dobrych wrażeń, gdy obsługa skryptów jest wyłączona.
Dowiedz się więcej o skrypcie.
Zapytania o multimedia o ograniczonej przejrzystości
Nieprzezroczyste interfejsy mogą powodować bóle głowy lub utrudniać wzrok w przypadku różnych rodzajów wad wzroku. Właśnie dlatego systemy Windows, macOS i iOS mają preferencje systemowe, które mogą zmniejszać lub usuwać przezroczystość interfejsu użytkownika. To zapytanie o media w przypadku elementu prefers-reduced-transparency
dobrze pasuje do innych zapytań o multimedia, które pozwalają wykazać się kreatywnością, a jednocześnie dostosowywać się do potrzeb użytkowników.
Screencast o zmniejszonej przezroczystości
Wersja demonstracyjna zmniejszonej przejrzystości
W niektórych przypadkach możesz udostępnić alternatywny układ, w którym treść nie będzie nakładać się na inne treści. W innych przypadkach przezroczystość koloru można ustawić na nieprzezroczystość lub prawie nieprzezroczystość. W poniższym poście znajdziesz więcej inspirujących prezentacji, które dostosowują się do preferencji użytkownika. Zobacz je, jeśli interesują Cię momenty, w których to zapytanie o media jest wartościowe.
Dowiedz się więcej o elemencie @media (prefers-reduced-transparency).
Interakcje
Interakcja to podstawa wrażeń cyfrowych. Pomaga użytkownikom zebrać opinie o tym, co kliknęli i gdzie się znajdują w wirtualnej przestrzeni. W tym roku wprowadziliśmy wiele ciekawych funkcji, które ułatwią tworzenie i wdrażanie interakcji, a także usprawniają korzystanie z internetu.
Wyświetlanie przejść
Przejścia widoku mają ogromny wpływ na wrażenia użytkowników strony. Za pomocą interfejsu View Transitions API możesz tworzyć wizualne przejścia między 2 stanami strony w aplikacji jednostronicowej. Mogą to być przejścia na całą stronę lub mniejsze elementy na stronie, takie jak dodanie lub usunięcie nowego elementu do listy.
Główną częścią interfejsu View Transitions API jest funkcja document.startViewTranstion
. Przekaż funkcję, która aktualizuje DOM do nowego stanu, a interfejs API zajmie się wszystkim za Ciebie. Odbywa się to przez zrobienie zrzutu ekranu „przed” i „po”, a następnie przełączanie się między nimi. Za pomocą CSS możesz kontrolować przechwytywane dane i opcjonalnie dostosowywać sposób animowania tych zrzutów.
Nagranie ekranu VT
Wersja demonstracyjna VT
Interfejs View Transitions API dla aplikacji jednostronicowych udostępniany w Chrome 111. Dowiedz się więcej o wyświetlaniu przejść.
Funkcja wygładzania liniowego
Obsługa przeglądarek
- 113
- 113
- 112
- 17.2
Niech nazwa tej funkcji Cię nie zmyli. Funkcja linear()
(nie mylić ze słowem kluczowym linear
) umożliwia łatwe tworzenie złożonych funkcji wygładzania, co zmniejsza precyzję.
Przed usługą linear()
, która została udostępniona w Chrome 113, nie można było tworzyć w CSS efektów odbijania ani wiosen. Dzięki linear()
wygładzanie można uzyskać w przybliżeniu przez upraszczanie ich do postaci serii punktów, a następnie interpolację liniową między tymi punktami.
Screencast z wygładzaniem liniowym
Wersja demonstracyjna wygładzania liniowego
Dowiedz się więcej o linear()
. Aby utworzyć krzywe linear()
, użyj generatora wygładzania liniowego.
Koniec przewijania
Wiele interfejsów zawiera interakcje z przewijaniem i czasami interfejs musi synchronizować informacje związane z bieżącym położeniem przewijania lub pobierać dane na podstawie bieżącego stanu. Przed zdarzeniem scrollend
trzeba było użyć metody, która nie przekroczyła limitu czasu i uniemożliwiała uruchamianie palca użytkownika nieruchomo na ekranie. Zdarzenie scrollend
zapewnia idealnie zaplanowane zdarzenie przewijania w celu ustalenia, czy użytkownik nadal wykonuje gest.
Screencast z przewijanego ekranu
Wersja demonstracyjna przewijania
To było ważne dla przeglądarki, ponieważ JavaScript nie jest w stanie śledzić obecności palców na ekranie podczas przewijania, a informacje są po prostu niedostępne. Fragmenty nieprecyzyjnego kodu, który próbował doprowadzić do końca przewijania, można teraz usunąć i zastąpić zdarzeniem o wysokiej precyzji w przeglądarce.
Dowiedz się więcej o funkcji przewijania.
Animacje wyświetlane po przewinięciu
Animacje przewijane to ekscytująca funkcja dostępna w Chrome 115. Pozwalają one wykorzystać istniejącą animację CSS lub animację utworzoną za pomocą interfejsu Web Animations API i połączyć je z przesunięciem przewijania w przypadku przewijania. Gdy przewijasz w górę i w dół lub w lewo i w prawo w poziomym przewijaniu w poziomie, połączona animacja przewija się do przodu i do tyłu w reakcji bezpośredniej.
Za pomocą ScrollTimeline możesz śledzić ogólny postęp działania przewijania, co pokazano w poniższej demonstracji. Gdy przewijasz do końca strony, tekst stopniowo pojawia się na ekranie.
Screencast SDA
Wersja demonstracyjna SDA
Dzięki osi czasu widoku możesz śledzić elementy, które przecinają obszar przewijania. Działa to podobnie do śledzenia elementu IntersectionObserver. W tej prezentacji każdy obraz ukazuje się od momentu wejścia do portu przewijania, aż do znalezienia się pośrodku.
Screencast demonstracyjny SDA
Prezentacja SDA na żywo
Animacje oparte na przewijaniu działają z animacjami CSS i interfejsem Web Animations API, więc możesz czerpać korzyści ze wszystkich zalet tych interfejsów API. Obejmuje to możliwość ich wyświetlania poza głównym wątkiem. Teraz możesz korzystać z jedwabnych animacji opartych na przewijaniu i wychodzących z głównego wątku przy użyciu zaledwie kilku wierszy dodatkowego kodu. Co Ci się nie podoba?
Aby dowiedzieć się więcej o animacjach przewijanych, zapoznaj się ze wszystkimi informacjami w tym artykule lub wejdź na stronę Scroll-driven-animations.style, która zawiera wiele wersji demonstracyjnych.
Odroczony załącznik z osią czasu
Podczas stosowania animacji wyświetlanej po przewinięciu przy użyciu CSS mechanizm wyszukiwania w celu znalezienia przewijającego w górę zawsze przechodzi w górę drzewa DOM. W tym przypadku ogranicza się tylko do przewijania elementów nadrzędnych. Często jednak element, który ma być animowany, nie jest elementem podrzędnym mechanizmu przewijania, lecz elementem znajdującym się w zupełnie innym poddrzewie.
Aby umożliwić animowanemu elementowi znalezienie nazwanej osi czasu przewijania elementu nadrzędnego, użyj właściwości timeline-scope
we wspólnym elemencie nadrzędnym. Dzięki temu można do niej dołączyć zdefiniowane elementy scroll-timeline
lub view-timeline
z tą nazwą, co zwiększa ich zakres. Dzięki temu każdy element podrzędny tego współużytkowanego rodzica może używać osi czasu o tej nazwie.
Screencast demonstracyjny
Prezentacja na żywo
Dowiedz się więcej o timeline-scope
.
Animacje właściwości dyskretnych
Kolejną nową funkcją w 2023 roku jest możliwość animowania dyskretnych animacji, takich jak animowanie do i z display: none
. Od Chrome 116 możesz używać w regułach klatek kluczowych elementów display
i content-visibility
. Możesz też przenieść dowolną właściwość dyskretną w punkcie 50% zamiast w punkcie 0%. Użyjesz do tego właściwości transition-behavior
, używając słowa kluczowego allow-discrete
lub używając skrótu właściwości transition
.
Oddzielna animacja. Screencast
Oddzielna animacja. Wersja demonstracyjna
Dowiedz się więcej o przechodzeniu dyskretnych animacji.
@starting-style,
Reguła CSS @starting-style
wykorzystuje nowe funkcje internetowe do animowania treści w domenie display: none
i z niej. Ta reguła pozwala nadać elementowi styl „before-open”, który przeglądarka może wyszukać, zanim element zostanie otwarty na stronie. Jest to bardzo przydatne w przypadku animacji we wpisach lub w elementach takich jak wyskakujące okienko lub okno dialogowe. Ta funkcja może być przydatna, gdy tworzysz element, w którym chcesz mieć możliwość pojawienia się w nim animacji. Z poniższego przykładu wynika, że atrybut popover
(patrz następna sekcja) pojawia się płynnie w górnej warstwie, gdy znajduje się poza widocznym obszarem.
@starting-style Screencast
Wersja demonstracyjna @starting-style
Dowiedz się więcej o tagu @starting-style i innych animowanych wpisach.
Nakładka
Możesz dodać do przejścia nową właściwość CSS overlay
, aby umożliwić płynne animowanie elementów ze stylami górnej warstwy, np. popover
i dialog
. Jeśli nie zastosujesz nakładki przejściowej, Twój element zostanie natychmiast przycięty, przekształcony i zakryty, a przejście nie będzie widoczne. Podobnie parametr overlay
dodany do elementu górnej warstwy umożliwia ::backdrop
płynną animację.
Nakładka screencast
Prezentacja nakładki na żywo
Dowiedz się więcej o nakładce i innych animacjach wyjściowych.
Komponenty
Rok 2023 był ważnym rokiem, jeśli chodzi o łączenie stylów i komponentów HTML. Docelowo popover
wykonano wiele pracy z pozycjonowaniem zakotwiczenia oraz przyszłością menu stylów. Komponenty te ułatwiają tworzenie typowych wzorców interfejsu bez konieczności korzystania z dodatkowych bibliotek czy każdorazowego tworzenia od podstaw własnych systemów zarządzania stanem.
Popowet
Interfejs Popover API pomaga w tworzeniu elementów, które nakładają się na pozostałą część strony. Mogą to być menu, opcje wyboru i etykietki. Możesz utworzyć proste okienko wyskakujące, dodając do wyskakującego elementu atrybuty popover
i id
, a potem łącząc atrybut id
z przyciskiem wywołującym za pomocą funkcji popovertarget="my-popover"
. Popover API obsługuje:
- Promocja na górną warstwę. Wyskakujące okienka pojawiają się w oddzielnej warstwie nad pozostałymi obszarami strony, więc nie musisz się tym przejmować.
- Funkcja zamykania lampkami. Kliknięcie poza obszarem wyskakującego okienka spowoduje zamknięcie wyskakującego okienka i powrót do niego.
- Domyślne zarządzanie fokusem. Otwarcie wyskakującego okienka sprawia, że następna karta się w nim zatrzymuje.
- Ułatwienia dostępu w postaci wiązań klawiatury. Naciśnięcie klawisza
esc
lub dwukrotne przełączenie spowoduje zamknięcie wyskakującego okienka i powrócenie zaznaczenia. - Powiązania ułatwień dostępu. Łączenie elementu wyskakującego okienka z wyzwalaniem wyskakującego okienka w sposób semantyczny.
Popover Screencast
Popover – prezentacja na żywo
Reguły poziome w zaznaczonym polu
Kolejną niewielką zmianą w kodzie HTML, którą wprowadziliśmy w tym roku w Chrome i Safari, jest możliwość dodawania poziomych reguł (tagów <hr>
) do elementów <select>
, aby wizualnie dzielić treści. Wcześniej umieszczenie tagu <hr>
w zaznaczeniu po prostu nie renderowało się. Jednak w tym roku zarówno Safari, jak i Chrome obsługują tę funkcję, co pozwala na lepsze odseparowanie treści w elementach <select>
.
Wybierz Zrzut ekranu
Wybierz wersję demonstracyjną na żywo
Dowiedz się więcej o używaniu używania godziny w zaznaczeniu.
:prawidłowe i nieprawidłowe pseudoklasy
Elementy :user-valid
i :user-invalid
, które są stabilne we wszystkich przeglądarkach w tym roku, działają podobnie do pseudoklas :valid
i :invalid
, ale dopasowują się do opcji formularza dopiero po znacznej interakcji użytkownika z danymi wejściowymi. Element sterujący formularza, który jest wymagany i pusty, będzie pasował do elementu :invalid
, nawet jeśli użytkownik nie rozpoczął interakcji ze stroną. Ten sam element sterujący nie będzie pasować do elementu :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 trzeba już pisać kodu stanowego, aby śledzić dane wejściowe zmienione przez użytkownika.
:użytkownik-* Screencast
:user-* Pokaz na żywo
Dowiedz się więcej o używaniu pseudoelementów walidacji formularza „user-*”.
Wyjątkowy akordeon
Obsługa przeglądarek
- 120
- 120
- x
- 17.2
Typowym wzorcem UI w internecie jest komponent akordeon. Aby zaimplementować ten wzorzec, łączysz kilka elementów <details>
. Często scalasz je wizualnie w sposób, który wskazuje, że należą do siebie.
Nowość w Chrome 120: obsługa atrybutu name
w elementach <details>
. Gdy używasz tego atrybutu, wiele elementów <details>
z tą samą wartością name
tworzy grupę semantyczną. Jednocześnie można otworzyć nie więcej niż 1 element w grupie: po otwarciu jednego z elementów <details>
z grupy automatycznie zamknie się ten wcześniej otwarty. Ten rodzaj akordeonu jest nazywany akordeonem dostępnym tylko na wyłączność.
Elementy <details>
, które są częścią wyłącznej akordeonu, nie muszą być elementami równorzędnymi. Mogą być rozrzucone w całym dokumencie.
Usługa porównywania cen przeżyła swój renesans w ostatnich kilku latach, zwłaszcza w 2023 roku. Jeśli dopiero zaczynasz korzystać z CSS lub po prostu chcesz odświeżyć sobie podstawowe informacje, zapoznaj się z naszym bezpłatnym kursem Learn CSS oraz innymi bezpłatnymi kursami dostępnymi na stronie web.dev.
Życzymy szczęśliwego sezonu świątecznego i mamy nadzieję, że wkrótce uda Ci się włączyć do swojej pracy niektóre z tych świetnych nowych funkcji CSS i interfejsu.
▶ Zespół DevRel ds. Chrome,