Zaktualizowane usługi CSS: 2023 r.
Przejdź do treści:
- Elastyczne projektowanie stron
- Zapytania dotyczące kontenerów
- Zapytania dotyczące stylu
- :zawiera selektor
- Zaktualizuj zapytanie o multimedia
- Zapytanie o multimedia w skrypcie
- Zapytanie o multimedia dotyczące przejrzystości
Niesamowite! 2023 rok był przełomowy dla usług porównywania cen.
Od #Interop2023 po wiele nowych stron docelowych w obszarze usług porównywania cen i interfejsów, które umożliwiają programistom funkcje, które kiedyś wydawały się niemożliwe na platformie internetowej. Obecnie każda nowoczesna przeglądarka obsługuje zapytania dotyczące kontenerów, siatkę podrzędną, selektor :has()
oraz mnóstwo nowych przestrzeni kolorów i funkcji. Chrome obsługuje tylko animacje oparte na przewijaniu (tylko CSS) i płynne animowanie między wyświetleniami witryny za pomocą przejść. Co więcej, jest wiele nowych podstawowych elementów, które poprawiają wrażenia programistów, takie jak zagnieżdżanie CSS i style zakresowe.
Co to był za rok! Dlatego chcemy zakończyć ten rok, świętując i podziękując za ciężką pracę programistów przeglądarek oraz społeczności internetowej, która przyczyniła się do realizacji tego przedsięwzięcia.
Podstawy architektoniczne
Zacznijmy od aktualizacji podstawowego języka i funkcji CSS. Są to funkcje, które są fundamentem dla sposobu tworzenia i porządkowania stylów. Dzięki nim programiści mają do dyspozycji duże możliwości.
Funkcje trygonometryczne
W Chrome 111 dodaliśmy obsługę funkcji trygonometrycznych sin()
, cos()
, tan()
, asin()
, acos()
, atan()
i atan2()
, dzięki czemu są one dostępne we wszystkich popularnych wyszukiwarkach. Te funkcje są bardzo przydatne przy tworzeniu animacji i układów. Na przykład łatwiej jest teraz rozmieszczać elementy na okręgu wokół wybranego środka.
Dowiedz się więcej o funkcjach trygonometrycznych w CSS.
Złożony wybór n-tego*
Obsługa przeglądarek
- 111
- 111
- 113
- 9
Za pomocą selektora pseudoklasy :nth-child()
można wybierać elementy DOM według ich indeksu. Mikroskładnia An+B
pozwala precyzyjnie wybierać elementy.
Domyślnie pseudo :nth-*()
uwzględniają wszystkie elementy podrzędne. Od Chrome 111 możesz opcjonalnie przekazać listę selektora do usług :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 tej prezentacji logika 3n+1
jest stosowana tylko w przypadku małych lalek przez odfiltrowanie ich za pomocą filtra of .small
. Za pomocą menu możesz dynamicznie zmieniać używany selektor.
Dowiedz się więcej o złożonym wyborze nth-*.
Zakres
W Chrome 118 dodaliśmy obsługę reguły @scope
, która umożliwia dopasowanie selektora zakresu do konkretnego poddrzewa dokumentu. Styl ograniczony pozwala dokładnie określić, które elementy należy wybrać, bez konieczności pisania zbyt specyficznych selektorów czy ś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 stylu umieszczone wewnątrz bloku zakresu będą kierować reklamy tylko na elementy w wyciętym poddrzewie. Na przykład ta reguła stylu o ograniczonym zakresie jest kierowana tylko na elementy <img>
, które znajdują 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ą dopasowywane z powodu zastosowanego limitu zakresu.
Zrzut ekranu demonstracyjny zakresu
![Zrzut ekranu z demonstracją @scope Zrzut ekranu z demonstracją @scope](https://developer.chrome.google.cn/static/blog/css-wrapped-2023/image/at-scope.png?authuser=6&hl=pl)
Prezentacja na żywo o zakresie
@scope
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 szczegółów, zakresach bez wstępów i wpływie @scope
na kaskadę.
Umieszczanie
Przed zagnieżdżeniem każdy selektor musiał zostać jawnie zadeklarowany, niezależnie od siebie. Powoduje to konieczność powtórzeń, masowego tworzenia arkuszy stylów i rozproszenia procesu tworzenia. Teraz możesz kontynuować selektory z powiązanymi regułami stylu zgrupowanymi w grupie.
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 na żywo dotycząca zagnieżdżania
Zagnieżdżanie może zmniejszyć wagę arkusza stylów, ograniczyć konieczność powtarzających się selektorów i 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, ale został on zmodyfikowany przez zagnieżdżoną aktualizację składni o swobodnej atmosferze.
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 wiersze i kolumny z zewnętrznej siatki jako własną, przy użyciu parametru subgrid
jako wartości dla wierszy i kolumn siatki.
Subgrid Screencast
Subgrid – prezentacja na żywo
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 autorzy tekstów, osoby pracujące w środowisku UX i tłumacze nie mogą próbować tworzyć tekstów, które „pasują” do projektu do układu. Dzięki siatce podrzędnej układ można dostosować do treści.
Więcej informacji o siatce podrzędnej.
Typografia
W 2023 r. wprowadziliśmy kilka ważnych zmian w typografii stron internetowych. Szczególnie przydatnym ulepszeniem progresywnym jest właściwość text-wrap
. Ta właściwość umożliwia dostosowanie układu typograficznego za pomocą przeglądarki bez konieczności pisania dodatkowych skryptów. Koniec z nietypową długością wierszy i skorzystaj z bardziej przewidywalnej typografii.
Pierwsza litera
Na początku roku w Chrome 110 pojawia się właściwość initial-letter
, czyli mała, ale zaawansowana funkcja CSS, która określa styl umieszczenia liter początkowych. Możesz ułożyć litery w stanie upuszczonym lub podniesionym. Właściwość akceptuje 2 argumenty: pierwszy określa, jak głęboko upuść literę w odpowiednim akapicie, a drugi to poziom podniesienia litery nad nią. Możesz nawet połączyć oba te elementy, tak jak w poniższej prezentacji.
Zrzut ekranu z pierwszym literą
![Zrzut ekranu przedstawiający wersję demonstracyjną listu](https://developer.chrome.google.cn/static/blog/css-wrapped-2023/image/initial-letter.png?authuser=6&hl=pl)
Wersja demonstracyjna pierwszej litery
initial-letter
dla pseudoelementu ::first-letter
, aby obserwować zmiany.Dowiedz się więcej o literze początkowej.
text-wrap: równowaga i ładny
Jako programista nie znasz ostatecznego rozmiaru, czcionki ani nawet języka nagłówka lub akapitu. Wszystkie zmienne potrzebne do skutecznego i estetycznego traktowania zawijania tekstu są dostępne w przeglądarce. Przeglądarka zna wszystkie czynniki, takie jak rozmiar czcionki, język i przydzielony obszar, dlatego świetnie nadaje się do obsługi zaawansowanych, wysokiej jakości układu tekstu.
Zostały tu wprowadzone 2 nowe techniki zawijania tekstu: jedna o nazwie balance
, a druga pretty
. Wartość balance
służy do utworzenia harmonicznego bloku tekstu, a pretty
służy do zapobiegania sierotom i zapewnienia zdrowego łącznika. Oba te zadania są wykonywane ręcznie, ale niesamowite super, jeśli można to zrobić w przeglądarce, tak by działała z każdym przetłumaczonym językiem.
Zawijaj tekst Screencast
Prezentacja na żywo o zawijaniu tekstu
balance
i pretty
w nagłówku i akapicie. Spróbuj przetłumaczyć prezentację na inny język.Dowiedz się więcej o metodzie text-wrap: Balance.
Kolor
Rok 2023 był kolorowym rokiem platformy internetowej. Dzięki nowym przestrzeniom kolorów i funkcjom, które umożliwiają dynamiczne dobieranie kolorów, nic nie powstrzyma Cię przed tworzeniem żywych i bujnych motywów, na które zasługują użytkownicy, i możliwości ich dostosowania.
Przestrzenie kolorów HD (poziom kolorów 4)
Od sprzętu, przez oprogramowanie, po usługi CSS i migające światła. może być bardzo pracochłonne, bo nasze komputery starają się przedstawić kolory tak dobre, jak są widoczne dla ludzkiego oczu. W 2023 roku mamy nowe kolory, więcej kolorów, nowe przestrzenie kolorów, funkcje kolorów i nowe możliwości.
CSS i kolory:
- Sprawdź, czy ekran użytkownika obsługuje szeroki zakres kolorów HDR.
– Sprawdź, czy przeglądarka użytkownika rozpoznaje składnię kolorów, taką jak Oklch lub Display P3.
– Ustaw kolory HDR w aplikacjach Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ i innych.
- Tworzenie gradientów w kolorach HDR,
- Interpolowanie gradientów w alternatywnych przestrzeniach kolorów.
– Mieszaj kolory za pomocą funkcji color-mix()
.
- Tworzenie wariantów kolorów ze względnej składni kolorów.
Screencast koloru 4
Wersja demonstracyjna koloru 4
Dowiedz się więcej o kolorach 4 i przestrzeniach kolorów.
funkcja mieszania kolorów
Łączenie kolorów to klasyczne zadanie. W 2023 roku może się to również stać w przypadku CSS. Możesz nie tylko połączyć biel lub czerń z kolorem, ale także przezroczystość. Wszystko to możesz zrobić w dowolnej przestrzeni kolorów. Jest to jednocześnie podstawowa opcja kolorystyczna i zaawansowana kolorowa.
color-mix() Screencast
Wersja demonstracyjna funkcji color-mix()
color-mix()
można wyobrazić sobie jako chwilę w czasie na podstawie gradientu. Gdzie gradient pokazuje wszystkie kroki potrzebne do zmiany koloru z niebieskiego na biały, a color-mix()
pokazuje tylko jeden krok. Gdy zaczniesz uwzględniać przestrzenie kolorów i dowiedzieć się, jak różni się ona w odniesieniu do wyników, proces staje się bardziej zaawansowany.
Dowiedz się więcej o funkcji color-mix().
Względna składnia kolorów
Względna składnia kolorów (RCS) jest metodą uzupełniającą tę funkcję color-mix()
przy tworzeniu wersji kolorystycznych. Funkcja ta jest nieco skuteczniejsza niż funkcja color-mix(), ale zapewnia też 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
Demonstracja RCS na żywo
RCS pozwala na wprowadzanie zmian względnych i bezwzględnych w odniesieniu do koloru. Zmiana względna to taka, w której zmieniasz bieżącą wartość nasycenia lub jasności, modyfikując ją za pomocą funkcji calc()
. Zmiana bezwzględna polega na zastępowaniu wartości kanału całkowicie nową, np. ustawieniem przezroczystości na 50%. Dzięki tej składni masz m.in. przydatne narzędzia do tworzenia tematów – tylko do wariantów czasowych.
Dowiedz się więcej o względnej składni kolorów.
Projektowanie responsywne
Elastyczne projektowanie stron zmieniło się w 2023 roku. Ten przełomowy rok zapewnił wprowadzenie nowych funkcji, które całkowicie zmieniły sposób tworzenia elastycznych stron internetowych, i zapoczątkowaliśmy nowy model responsywnego projektowania stron opartego na komponentach. Połączenie zapytań dotyczących kontenera z elementem :has()
obsługuje komponenty, które mają styl elastyczny i logiczny, zależnie od rozmiaru elementu nadrzędnego oraz obecności lub stanu elementów podrzędnych. Oznacza to, że w końcu możesz oddzielić układ na poziomie strony od układu na poziomie komponentu i utworzyć logikę, która posłuży do powtórnego korzystania z komponentu.
Zapytania dotyczące rozmiaru kontenera
Zamiast używać informacji o rozmiarze globalnym widocznego obszaru do stosowania stylów CSS, zapytania kontenera obsługują zapytania dotyczące elementu nadrzędnego na stronie. Oznacza to, że komponenty mogą być dynamicznie stylizowane w różnych układach i w wielu widokach. Zapytania dotyczące rozmiaru kontenera stały się stabilne we wszystkich nowoczesnych przeglądarkach w tym roku w Walentynki (14 lutego).
Aby korzystać z tej funkcji, najpierw skonfiguruj ograniczenia dla elementu, którego dotyczy zapytanie, a potem, podobnie jak w przypadku zapytania o multimedia, użyj właściwości @container
z parametrami rozmiaru, aby zastosować style. Wraz z zapytaniami o kontenery otrzymasz informacje o rozmiarach zapytań dotyczących kontenerów. W poniższej prezentacji rozmiar zapytania kontenera cqi
(reprezentujący rozmiar wbudowanego kontenera) jest używany do określania rozmiaru nagłówka karty.
Screencast @container
Wersja demonstracyjna @container
Dowiedz się więcej o korzystaniu z zapytań dotyczących kontenerów.
Ustawianie stylu zapytań w kontenerach
Zapytania dotyczące stylu zostały częściowo wdrożone 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 wysłać zapytanie, czy wartość właściwości niestandardowej istnieje lub została ustawiona na określoną wartość, taką jak @container style(--rain: true)
.
Zrzut ekranu z zapytaniem o styl
![Zrzut ekranu z prezentacją kart pogodowych dotyczących zapytań w kontenerze stylu](https://developer.chrome.google.cn/static/blog/css-wrapped-2023/image/stylecq.png?authuser=6&hl=pl)
Wersja demonstracyjna zapytania o styl
Choć brzmi to podobnie do używania nazw klas w kodzie CSS, zapytania dotyczące stylu mają pewne zalety. Po pierwsze, w zapytaniach dotyczących stylu można zaktualizować wartość w CSS odpowiednio do potrzeb dla pseudo stanów. Dodatkowo w kolejnych wersjach implementacji będzie można tworzyć zapytania obejmujące zakresy wartości w celu określenia zastosowanego stylu, np. style(60 <= --weather <= 70)
, oraz stylu na podstawie par właściwość-wartość, np. style(font-style: italic)
.
Dowiedz się więcej o korzystaniu z zapytań stylu.
:has() selektor
Od niemal 20 lat deweloperzy prosili o „selektora rodziców” w CSS. Jest to teraz możliwe dzięki selektorowi :has()
, który był dostępny w Chrome 105. Na przykład użycie funkcji .card:has(img.hero)
spowoduje wybranie elementów .card
, które w czasie dziecka mają baner powitalny.
Zrzut ekranu wersji demonstracyjnej :has()
![Zrzut ekranu z demonstracją funkcji :has() Zrzut ekranu z demonstracją funkcji :has()](https://developer.chrome.google.cn/static/blog/css-wrapped-2023/image/has-demo-1.png?authuser=6&hl=pl)
:has() na żywo
:has()
: karta bez lub z obrazemJako argument :has()
akceptuje listę selektory względnych, więc możesz wybrać znacznie więcej opcji niż element nadrzędny. Korzystając z różnych kombinacji kombinatorów CSS, można nie tylko przejść w górę drzewa DOM, ale też dokonać zaznaczeń z boku. Na przykład li:has(+ li:hover)
wybierze element <li>
, który poprzedza element <li>
, który był aktualnie najeżdżany kursorem.
Screencast
Wersja demonstracyjna funkcji :has()
:has()
: DockDowiedz się więcej o selektorze arkusza CSS :has()
.
Zaktualizuj zapytanie o multimedia
Zapytanie o multimedia update
pozwala dostosować interfejs użytkownika do częstotliwości odświeżania urządzenia. Funkcja może zgłaszać wartości fast
, slow
lub none
, które odnoszą się do możliwości różnych urządzeń.
Większość urządzeń, które projektujesz, ma prawdopodobnie dużą częstotliwość odświeżania. Dotyczy to komputerów i większości urządzeń mobilnych. Czytniki e-booków i urządzenia (np. systemy płatności o niskim zużyciu energii) mogą mieć małą częstotliwość odświeżania. Wiedząc, że urządzenie nie obsługuje animacji ani częstych aktualizacji, możesz zmniejszyć zużycie baterii lub uniknąć częstych aktualizacji widoku.
Zaktualizuj Screencast
Zaktualizuj wersję demonstracyjną
Dowiedz się więcej o @media (update).
Zapytanie o multimedia w skrypcie
Zapytanie o media skryptowe może posłużyć do sprawdzenia, czy dostępny jest JavaScript. To dobry sposób na stopniowe ulepszenie. Wcześniej, przy użyciu tego zapytania o multimedia, strategia dotycząca wykrywania dostępności JavaScriptu polegała na umieszczeniu klasy nojs
w kodzie HTML i usunięciu jej za pomocą JavaScriptu. Skrypty te można usuwać, ponieważ CSS wykrywa teraz kod JavaScript i odpowiednio go dostosowuje.
Dowiedz się, jak włączyć i wyłączyć JavaScript na stronie na potrzeby testowania za pomocą Narzędzi deweloperskich w Chrome.
Screencast skryptu
Wersja demonstracyjna skryptów
Rozważmy zmianę motywu w witrynie. Zapytanie o media dotyczące skryptów może pomóc w przeprowadzeniu zmiany zgodnie z preferencjami systemowymi, ponieważ nie jest dostępny kod JavaScript. Możesz też użyć komponentu przełącznika – jeśli jest dostępny JavaScript, przełącznik można przesuwać gestem, zamiast go włączać i wyłączać. Jeśli obsługa skryptów jest dostępna, można skorzystać z wielu świetnych podstaw, jeśli obsługa skryptów jest wyłączona.
Dowiedz się więcej o skrypcie.
Zapytanie o multimedia o zmniejszonej przejrzystości
Nieprzezroczysty interfejs może powodować ból głowy lub utrudniać wzrok w przypadku różnych rodzajów wad wzroku. Dlatego w systemach Windows, macOS i iOS obowiązują preferencje systemowe, które mogą zmniejszyć lub usunąć przezroczystość interfejsu. To zapytanie o multimedia dla zapytania prefers-reduced-transparency
dobrze pasuje do innych zapytań o multimedia, dzięki czemu masz większą kreatywność, a jednocześnie dostosowuje się do użytkowników.
Screencast o zmniejszonej przezroczystości
Wersja demonstracyjna zmniejszonej przejrzystości
W niektórych przypadkach dostępny jest układ alternatywny, w którym treść nie nakłada się na inne treści. W innych przypadkach przezroczystość koloru może zostać ustawiona jako nieprzezroczysta lub prawie nieprzezroczysta. W poniższym poście na blogu znajdziesz więcej inspirujących demonstracji, które dostosowują się do preferencji użytkowników. Obejrzyj je, jeśli chcesz poznać okresy, w których dane zapytanie o media jest wartościowe.
Dowiedz się więcej o @media (prefers-reduced-transparency).
Interakcja
Interakcja to podstawa doświadczeń cyfrowych. Pomaga to użytkownikom uzyskać informacje o tym, co kliknęli i gdzie się znajdują w przestrzeni wirtualnej. W tym roku pojawiło się wiele ciekawych funkcji, które ułatwiły tworzenie i wdrażanie interakcji, zapewniając użytkownikom płynniejsze doświadczenia i lepsze wrażenia z korzystania z internetu.
Wyświetlanie przejść
Procesy wyświetlania mają ogromny wpływ na wygodę użytkowników strony. Za pomocą interfejsu View Migrates API możesz tworzyć wizualne przejścia między dwoma stanami stron w aplikacji jednostronicowej. Mogą to być przejścia na całą stronę lub mniejsze elementy na stronie, takie jak dodanie nowego elementu do listy lub usunięcie go.
Podstawą interfejsu View Przenoszenies API jest funkcja document.startViewTranstion
. Przekaż funkcję, która aktualizuje DOM do nowego stanu, a interfejs API zajmie się wszystkim za Ciebie. Robi to, wykonując zdjęcie przed i po, a następnie przechodzące między nimi. Za pomocą CSS możesz kontrolować, co ma być rejestrowane, i opcjonalnie dostosować sposób animacji tych zrzutów.
Screencast VT
Wersja demonstracyjna VT
Interfejs View Migrates API dla aplikacji na jednej stronie dostępny w Chrome 111. Dowiedz się więcej o widokach 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 tworzenie złożonych funkcji wygładzania w prosty sposób, przy zachowaniu pewnej precyzji.
Przed linear()
(udostępnioną w Chrome 113) nie można było tworzyć w CSS efektów odbijania sprężyn ani odbijania się wiadomości. linear()
umożliwia przybliżenie tych wygładzania przez uproszczenie ich do serii punktów, a następnie interpolację liniową między tymi punktami.
linear()
wykorzystuje te punkty i interpoluje między nimi liniowo.Screencast z wygładzaniem liniowym
Wersja demonstracyjna wygładzania liniowego
linear()
.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. 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żyć nieprawidłowej metody czasu oczekiwania, która mogła zostać uruchomiona, gdy użytkownik wciąż znajduje się na ekranie. Zdarzenie scrollend
pozwala utworzyć zdarzenie przewijania w odpowiednim momencie, które wykrywa, czy użytkownik wciąż wykonuje gest.
Screencast przewijania Scrollend
Wersja demonstracyjna Scrollend
Ta informacja jest ważna dla przeglądarki, ponieważ JavaScript nie może śledzić obecności palców na ekranie podczas przewijania – informacje po prostu nie są dostępne. Fragmenty niedokładnego kodu na końcu przewijania można teraz usuwać i zastępować zdarzeniem o wysokiej precyzji należącym do przeglądarki.
Dowiedz się więcej o funkcji scrollend.
Animacje przewijane
Animacje przewijane to świetna funkcja dostępna w Chrome 115. Dzięki nim możesz wykorzystać istniejącą animację CSS lub animację utworzoną przy użyciu interfejsu Web Animations API i połączyć je z przesunięciem przewijania w ramach elementu 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. Podczas przewijania do końca strony tekst ujawnia się znak po znaku.
Screencast SDA
Wersja demonstracyjna SDA
Dzięki osi czasu widoku możesz śledzić element, który przecina obszar przewijania. Działa to podobnie jak IntersectionObserver śledzi element. W tej prezentacji każdy obraz ujawnia się od momentu umieszczenia w obszarze przewijania do momentu, aż znajdzie się na jego środku.
Screencast demonstracyjny SDA
Demonstracja SDA na żywo
Animacje przewijane działają z animacjami CSS i interfejsem Web Animations API, więc możesz korzystać ze wszystkich zalet tych interfejsów API. Dotyczy to także możliwości wyświetlania takich animacji poza głównym wątkiem. Teraz możesz uzyskać jedwabiście płynne animacje, które są napędzane przez przewijanie i wykraczają poza główny wątek za pomocą kilku linijek dodatkowego kodu. A co w tym wszystkim?
Aby dowiedzieć się więcej o animacjach przewijanych, przeczytaj ten artykuł ze wszystkimi szczegółami lub wejdź na stronę Scroll-driven-animations.style, która zawiera wiele wersji demonstracyjnych.
Załącznik z odroczoną osią czasu
Gdy w kodzie CSS pojawia się animacja z przewijaniem, 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 ma być animowany, nie jest elementem podrzędnym elementu przewijania, 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. Umożliwia to powiązanie z nią zdefiniowanej właściwości scroll-timeline
lub view-timeline
o tej nazwie, co zwiększa jej zakres. Dzięki temu każde konto podrzędne udostępnianego elementu nadrzędnego będzie mogło używać osi czasu o tej nazwie.
![Wizualizacja poddrzewa DOM z zakresem na osi czasu, z której korzysta udostępniony element nadrzędny Wizualizacja poddrzewa DOM z zakresem na osi czasu, z której korzysta udostępniony element nadrzędny](https://developer.chrome.google.cn/static/blog/css-wrapped-2023/image/defferedtimeline.png?authuser=6&hl=pl)
timeline-scope
w udostępnionym elemencie nadrzędnym, element scroll-timeline
zadeklarowany w komponencie przewijającym może zostać znaleziony przez element, który używa go jako animation-timeline
.Demo Screencast
Prezentacja na żywo
Dowiedz się więcej o timeline-scope
.
Odrębne animacje właściwości
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ż przenieść dowolną właściwość dyskretną w punkcie 50%, a nie w punkcie 0%. Jest to możliwe dzięki właściwości transition-behavior
za pomocą słowa kluczowego allow-discrete
lub we właściwości transition
w postaci skrótu.
Dyskretne zwierzę. Screencast
Dyskretne zwierzę. Wersja demonstracyjna
Dowiedz się więcej o przenoszeniu osobnych animacji.
@starting-style
Reguła CSS @starting-style
opiera się na nowych możliwościach animacji do display: none
i z powrotem. Ta reguła umożliwia nadanie elementowi stanu „przed otwarciem” stylu dostępnego dla przeglądarki, 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 przydatne również wtedy, gdy tworzysz element i chcesz dać mu możliwość jego animacji. W poniższym przykładzie pokazujemy, że atrybut popover
(patrz następna sekcja) płynnie animuje atrybut popover
, gdy jest widoczny i płynnie pojawia się w górnej warstwie.
Screencast @starting-style
@starting-style Demonstracja
Dowiedz się więcej o @starting-style i innych animacjach wpisów.
Nakładka
Do przejścia można dodać 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 użyjesz nakładki przejścia, element natychmiast zostanie przycięty, przekształcony i zasłonięty, a przejście nie będzie widoczne. Podobnie overlay
umożliwia płynne animowanie elementu ::backdrop
po dodaniu do elementu najwyższego poziomu.
Nakładanie screencasta
Prezentacja na żywo z nakładką
Dowiedz się więcej o nakładce i innych animacjach wyjścia.
Komponenty
Rok 2023 był wielkim przełomem pod względem przecięcia się stylu i komponentów HTML. Na stronie docelowej popover
przeprowadzono wiele działań związanych z pozycjonowaniem zakotwiczonych i przyszłością menu stylów. Ułatwiają one tworzenie typowych wzorców UI bez konieczności korzystania z dodatkowych bibliotek czy budowania od podstaw własnych systemów zarządzania stanem za każdym razem.
Wyskakujące okienko
Popover API pomaga tworzyć elementy nakładane na pozostałą część strony. Mogą to być menu, zaznaczenie i etykietki. Możesz utworzyć proste wyskakujące okienko, dodając atrybuty popover
i id
do wyskakującego elementu oraz łącząc jego atrybut id
z przyciskiem wywołującego za pomocą popovertarget="my-popover"
. Interfejs Popover API obsługuje:
- Awans do najwyższej warstwy. 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 lekkiego zamknięcia. Kliknięcie poza obszarem wyskakującego okienka spowoduje jego zamknięcie i przywrócenie zaznaczenia.
- Domyślne zarządzanie ostrością. Otwarcie wyskakującego okienka powoduje, że następna karta zostaje zatrzymana.
- Dostępne powiązania klawiszy. Naciśnięcie klawisza
esc
lub podwójne przełączenie powoduje zamknięcie wyskakującego okienka i powrót fokusu. - Dostępne powiązania komponentów. Łączenie elementu wyskakującego z wywołaniem okienka w sposób semantyczny.
Popover screencast
Prezentacja Popover na żywo
Reguły poziome w wyborze
Kolejną małą zmianą w języku HTML, która pojawiła się w tym roku w Chrome i Safari, jest możliwość dodania poziomych elementów reguły (tagów <hr>
) do elementów <select>
, które pozwalają wizualnie podzielić treści. Wcześniej umieszczenie tagu <hr>
w polu wyboru nie powodowało renderowania. Jednak w tym roku tę funkcję obsługują zarówno Safari, jak i Chrome, co umożliwia lepsze oddzielenie treści w obrębie elementów <select>
.
Wybierz zrzut ekranu
![zrzut ekranu przedstawiający godziny w trybie wyboru z jasnym i ciemnym motywem w Chrome](https://developer.chrome.google.cn/static/blog/css-wrapped-2023/image/hrselect.jpg?authuser=6&hl=pl)
Wybierz prezentację na żywo
Dowiedz się więcej o korzystaniu z godziny w wyborze
:user-valid i nieprawidłowe pseudoklasy
Jest stabilna we wszystkich przeglądarkach w tym roku. :user-valid
i :user-invalid
działają podobnie do pseudoklas :valid
i :invalid
, ale pasują do ustawienia formularza tylko wtedy, gdy użytkownik wszedł w interakcję z danymi wejściowymi. Wymagany i pusty element sterujący formularza będzie miał wartość :invalid
, nawet jeśli użytkownik nie rozpoczął jeszcze interakcji ze stroną. Ten sam element sterujący nie będzie zgodny z :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 w celu śledzenia zmian wprowadzonych przez użytkownika.
:user-* Screencast
:user-* Demonstracja na żywo
Dowiedz się więcej o używaniu pseudoelementów służących do weryfikacji formularza*.
Wyjątkowy akordeon
Obsługa przeglądarek
- 120
- 120
- x
- 17.2
Typowym wzorcem interfejsu w internecie jest komponent akordeonu. 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 grupie może być otwarty maksymalnie 1 element naraz: gdy otworzysz jeden z elementów <details>
z grupy, ten, który został otwarty wcześniej, zostanie automatycznie zamknięty. Taki rodzaj akordeonu nazywamy akordeonem wyłącznym.
Elementy <details>
, które wchodzą w skład akordeonu wyłącznego, nie muszą być równorzędne. Mogą być rozproszone po całym dokumencie.
Usługa porównywania cen przeżyła ogromny renesans w ciągu ostatnich kilku lat, a zwłaszcza w 2023 r. Jeśli nie masz doświadczenia z CSS lub chcesz przypomnieć sobie podstawowe informacje, zapoznaj się z naszym bezpłatnym kursem Learn CSS oraz innymi bezpłatnymi kursami dostępnymi na stronie web.dev.
Życzymy Wesołych Świąt i mamy nadzieję, że już wkrótce zaczniesz korzystać z tych świetnych nowych funkcji CSS i interfejsu.
✓ Zespół ds. programowania interfejsu Chrome OS