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

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

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

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.

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.

Dowiedz się więcej o atrybucie text-wrap: Balance.

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.

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.

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.

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.

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

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.

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.

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.

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.

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

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.

Interfejs View Transitions API dla aplikacji jednostronicowych udostępniany w Chrome 111. Dowiedz się więcej o wyświetlaniu przejść.

Funkcja wygładzania liniowego

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.

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.

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.

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.

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.

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.

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.

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

Dowiedz się więcej o nakładce i innych animacjach wyjściowych.

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.

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.

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

Wyjątkowy akordeon

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.