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 głównych silnikach. Te funkcje są bardzo przydatne do animacji i układu. Na przykład teraz o wiele łatwiej jest rozmieszczać elementy na okręgu wokół wybranego środka.

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

Złożony wybór n-tego elementu

Za pomocą selektora pseudoklasy :nth-child() można wybierać elementy w DOM według ich indeksu. Za pomocą An+Bmikroskładni możesz precyzyjnie określić, które elementy chcesz wybrać.

Domyślnie pseudoklasy :nth-*() uwzględniają wszystkie elementy podrzędne. Od Chrome 111 możesz opcjonalnie przekazywać listę selektorów do funkcji :nth-child() i :nth-last-child(). W ten sposób możesz wstępnie odfiltrować listę dzieci, zanim An+B wykona swoje zadanie.

W poniższym przykładzie 3n+1 jest stosowany tylko do małych lalek, które są wstępnie odfiltrowywane za pomocą 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, która umożliwia ograniczenie dopasowywania selektora do określonego poddrzewa dokumentu. Dzięki stylowi o ograniczonym zakresie możesz bardzo precyzyjnie określać, które elementy chcesz wybrać, bez konieczności pisania zbyt szczegółowych selektorów lub ścisłego powiązania ich ze strukturą DOM.

Poddrzewo o ograniczonym zakresie jest definiowane przez korzeń zakresu (górną granicę) i opcjonalny limit zakresu (dolną granicę).

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

Reguły stylu umieszczone w bloku zakresu będą kierowane tylko na elementy w wydzielonym poddrzewie. Na przykład ta reguła stylu o ograniczonym zakresie kieruje reklamy 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 poniższym przykładzie elementy <img> w komponencie karuzeli nie są dopasowywane z powodu zastosowanego limitu zakresu.

Zrzut ekranu wersji demonstracyjnej zakresu

Scope – prezentacja na żywo

Więcej informacji o @scope znajdziesz w artykule „Jak używać @scope do ograniczania zasięgu selektorów”. Dowiesz się z niego, czym jest selektor :scope, jak jest obsługiwana specyficzność, czym są zakresy bez preludium i jak na kaskadę wpływa @scope.

Zagnieżdżanie

Przed zagnieżdżeniem każdy selektor musiał być zadeklarowany osobno. Prowadzi to do powtórzeń, dużej ilości arkuszy stylów i rozproszonego środowiska tworzenia. Teraz selektory można kontynuować, grupując w nich 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 może zmniejszyć wagę arkusza stylów, ograniczyć narzut związany z powtarzaniem selektorów i scentralizować style komponentów. Składnia początkowo miała ograniczenie, które wymagało używania znaku & w różnych miejscach, ale zostało ono zniesione dzięki aktualizacji składni zagnieżdżania.

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

Subgrid

CSS subgrid umożliwia tworzenie bardziej złożonych siatek z lepszym wyrównaniem układów podrzędnych. Umożliwia to siatce znajdującej się w innej siatce przyjęcie wierszy i kolumn siatki zewnętrznej jako własnych, używając subgrid jako wartości wierszy lub kolumn siatki.

Podsiatka jest szczególnie przydatna do wyrównywania elementów podrzędnych względem dynamicznej zawartości innych elementów podrzędnych. Dzięki temu copywriterzy, specjaliści ds. UX writingu i tłumacze nie muszą tworzyć tekstów, które „pasują” do układu projektu. W przypadku podsiatki układ można dostosować do treści.

Dowiedz się więcej o podsiatce.

Initial-letter

Wprowadzona na początku roku w Chrome 110 właściwość initial-letter to niewielka, ale przydatna funkcja CSS, która określa styl umieszczania pierwszych liter. Litery można umieścić w pozycji obniżonej lub podwyższonej. Właściwość przyjmuje 2 argumenty: pierwszy określa, jak głęboko w odpowiednim akapicie ma być umieszczona litera, a drugi – o ile ma być podniesiona ponad nią. Możesz też połączyć obie metody, jak w poniższym przykładzie.

Zrzut ekranu z pierwszą literą

Wersja demonstracyjna inicjału

Dowiedz się więcej o właściwości initial-letter.

text-wrap: balance and pretty

Jako programista nie znasz ostatecznego rozmiaru, rozmiaru czcionki ani nawet języka nagłówka lub akapitu. Wszystkie zmienne potrzebne do skutecznego i estetycznego zawijania tekstu znajdują się 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 i wysokiej jakości układu tekstu.

W tym przypadku przydadzą się 2 nowe techniki zawijania tekstu: balance i pretty. Wartość balance ma na celu utworzenie harmonijnego bloku tekstu, a wartość pretty zapobiega sierotom i zapewnia prawidłowe dzielenie wyrazów. Oba te zadania były tradycyjnie wykonywane ręcznie, więc przekazanie ich przeglądarce i możliwość korzystania z nich w przypadku dowolnego przetłumaczonego języka to niesamowite osiągnięcie.

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

Przestrzenie kolorów HD (poziom koloru 4)

Od sprzętu po oprogramowanie, od CSS po migające światła – komputery muszą się sporo napracować, aby odwzorować kolory tak dobrze, jak widzą je nasze oczy. 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 mogą teraz:color-mix()- sprawdzać, czy sprzęt ekranu użytkownika obsługuje kolory HDR o szerokiej gamie;color-mix()- sprawdzać, czy przeglądarka użytkownika rozumie składnię kolorów, np. Oklch lub Display P3;color-mix()- określać kolory HDR w Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ i innych;color-mix()- tworzyć gradienty z kolorami HDR;color-mix()- interpolować gradienty w alternatywnych przestrzeniach kolorów;color-mix()- mieszać kolory za pomocą funkcji color-mix();color-mix()- tworzyć warianty kolorów za pomocą składni kolorów względnych.

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

funkcja mieszania kolorów,

Mieszanie kolorów to klasyczne zadanie, które w 2023 roku można wykonać za pomocą CSS. Możesz nie tylko mieszać biały lub czarny z kolorem, ale także zmieniać jego przezroczystość. Wszystko to możesz robić w dowolnej przestrzeni kolorów. Jest to jednocześnie podstawowa i zaawansowana funkcja kolorów.

color-mix() to moment w czasie na gradientie. Gradient pokazuje wszystkie kroki przejścia od niebieskiego do białego, a color-mix() tylko jeden. Sprawy się komplikują, gdy zaczynasz brać pod uwagę przestrzenie kolorów i dowiadujesz się, jak bardzo przestrzeń mieszania kolorów może różnić się od wyników.

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

Składnia koloru względnego

Składnia koloru względnego (RCS) to metoda uzupełniająca color-mix() do tworzenia wariantów kolorystycznych. Jest nieco bardziej zaawansowana niż funkcja color-mix(), ale też stanowi inną strategię pracy z kolorami. color-mix() może mieszać kolor biały, aby rozjaśnić kolor, podczas gdy RCS zapewnia precyzyjny dostęp do kanału jasności i możliwość używania calc() w kanale w celu programowego zmniejszania lub zwiększania jasności.

RCS umożliwia wykonywanie względnych i bezwzględnych manipulacji kolorem. Zmiana względna polega na pobraniu bieżącej wartości nasycenia lub jasności i zmodyfikowaniu jej za pomocą calc(). Zmiana bezwzględna polega na zastąpieniu wartości kanału zupełnie nową wartością, np. ustawieniu krycia na 50%. Ta składnia zapewnia przydatne narzędzia do tworzenia motywów, wariantów just in time i innych funkcji.

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

Zapytania o rozmiar kontenera

Zamiast używać globalnych informacji o rozmiarze obszaru wyświetlania do stosowania stylów CSS, zapytania o kontener obsługują wysyłanie zapytań do elementu nadrzędnego na stronie. Oznacza to, że komponenty można dynamicznie stylizować w wielu układach i widokach. Zapytania o rozmiar kontenera stały się stabilne we wszystkich nowoczesnych przeglądarkach w Walentynki tego roku (14 lutego).

Aby użyć tej funkcji, najpierw skonfiguruj ograniczenie w elemencie, o który wysyłasz zapytanie, a następnie, podobnie jak w przypadku zapytania o media, użyj @container z parametrami rozmiaru, aby zastosować style. Oprócz zapytań o kontenery otrzymujesz rozmiary zapytań o kontenery. W poniższym przykładzie rozmiar zapytania o kontener cqi (reprezentujący rozmiar kontenera wbudowanego) jest używany do określania rozmiaru nagłówka karty.

Dowiedz się więcej o używaniu zapytań o kontener.

Zapytania o style kontenera

Zapytania o style zostały częściowo wdrożone w Chrome 111. Obecnie za pomocą zapytań o style możesz sprawdzać wartość właściwości niestandardowych w elemencie nadrzędnym, gdy używasz funkcji @container style(). Możesz na przykład wysłać zapytanie, czy wartość właściwości niestandardowej istnieje lub czy jest ustawiona na określoną wartość, np. @container style(--rain: true).

Zrzut ekranu z zapytaniem o styl

Wersja demonstracyjna zapytania o styl

Chociaż brzmi to podobnie do używania nazw klas w CSS, zapytania o style mają pewne zalety. Po pierwsze, w przypadku zapytań o styl możesz w razie potrzeby zaktualizować wartość w CSS dla stanów pozornych. W przyszłych wersjach implementacji będzie też można wysyłać zapytania o zakresy wartości, aby określić zastosowany styl, np. style(60 <= --weather <= 70), oraz określać styl na podstawie par właściwość-wartość, np. style(font-style: italic).

Dowiedz się więcej o używaniu zapytań o styl.

Selektor:has()

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

Zrzut ekranu wersji demonstracyjnej funkcji :has()

Prezentacja na żywo funkcji :has()

Funkcja :has() przyjmuje jako argument listę selektorów względnych, więc możesz wybrać znacznie więcej niż tylko element nadrzędny. Używając różnych kombinatorów CSS, można nie tylko przechodzić w górę drzewa DOM, ale też dokonywać selekcji w bok. Na przykład li:has(+ li:hover) wybierze element <li>, który poprzedza aktualnie wskazywany element <li>.

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

Aktualizowanie zapytania o media

Zapytanie o media 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 wysoką częstotliwość odświeżania. Dotyczy to komputerów stacjonarnych i większości urządzeń mobilnych. Czytniki e-booków i urządzenia takie jak systemy płatności o niskim poborze mocy mogą mieć niską częstotliwość odświeżania. Wiedza o tym, że urządzenie nie obsługuje animacji ani częstych aktualizacji, pozwala oszczędzać wykorzystanie baterii i zapobiegać nieprawidłowemu odświeżaniu widoku.

Więcej informacji o @media (update)

Skryptowe zapytanie o media

Zapytanie o multimedia dotyczące skryptów może służyć do sprawdzania, czy JavaScript jest dostępny. Jest to bardzo przydatne w przypadku progresywnego ulepszania. Wcześniej, aby wykryć, czy JavaScript jest dostępny, umieszczano w HTML-u klasę nojs i usuwano ją za pomocą JavaScriptu. Te skrypty można teraz usunąć, ponieważ CSS ma możliwość wykrywania JavaScriptu i odpowiedniego dostosowywania się.

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

Weźmy pod uwagę przełącznik motywu w witrynie. Zapytanie o media w skrypcie może pomóc w przełączeniu motywu wbrew ustawieniom systemowym, ponieważ JavaScript nie jest dostępny. Możesz też wziąć pod uwagę komponent przełącznika – jeśli JavaScript jest dostępny, przełącznik można przesuwać gestem, a nie tylko włączać i wyłączać. Jeśli skrypt jest dostępny, istnieje wiele możliwości ulepszenia UX, a jeśli jest wyłączony, można zapewnić podstawowe działanie.

Dowiedz się więcej o skrypcie.

Zapytanie o media o zmniejszonej przejrzystości

Nieprzezroczyste interfejsy mogą powodować bóle głowy lub być trudne w odbiorze dla osób z różnymi rodzajami wad wzroku. Dlatego systemy Windows, macOS i iOS mają preferencje systemowe, które mogą zmniejszyć lub usunąć przezroczystość interfejsu. To zapytanie o media prefers-reduced-transparency dobrze pasuje do innych zapytań o media dotyczących preferencji, które pozwalają na kreatywność, a jednocześnie dostosowują się do użytkowników.

W niektórych przypadkach możesz podać alternatywny układ, w którym treści nie nakładają się na inne treści. W innych przypadkach można dostosować krycie koloru, aby był nieprzezroczysty lub prawie nieprzezroczysty. Więcej inspirujących wersji demonstracyjnych, które dostosowują się do preferencji użytkownika, znajdziesz w tym poście na blogu. Jeśli chcesz dowiedzieć się, kiedy to zapytanie o media jest przydatne, zapoznaj się z nim.

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

Przejścia widoków

Przejścia widoku mają ogromny wpływ na wrażenia użytkownika związane ze stroną. 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 między całymi stronami lub mniejsze zmiany na stronie, np. dodawanie lub usuwanie nowego elementu z listy.

Podstawą interfejsu View Transitions API jest funkcja document.startViewTranstion. Przekaż funkcję, która aktualizuje DOM do nowego stanu, a interfejs API zajmie się resztą. W tym celu robi zdjęcie przed i po, a następnie przechodzi między nimi. Za pomocą CSS możesz określić, co ma być rejestrowane, i opcjonalnie dostosować animację tych migawek.

Interfejs View Transitions API dla aplikacji jednostronicowych został udostępniony w Chrome 111. Dowiedz się więcej o przejściach widoku.

Funkcja liniowego łagodzenia

Nie daj się zwieść nazwie tej funkcji. Funkcja linear() (nie mylić ze słowem kluczowym linear) umożliwia łatwe tworzenie złożonych funkcji wygładzania z pewnym kompromisem w postaci utraty precyzji.

Przed wprowadzeniem funkcji linear() w Chrome 113 nie można było tworzyć w CSS efektów odbicia ani sprężyny. Dzięki linear() można przybliżyć te funkcje, upraszczając je do serii punktów, a następnie interpolując liniowo między nimi.

Dowiedz się więcej: linear(). Aby utworzyć krzywe linear(), użyj generatora liniowego wygładzania.

Koniec przewijania

Wiele interfejsów zawiera interakcje przewijania, a czasami interfejs musi synchronizować informacje związane z bieżącą pozycją przewijania lub pobierać dane na podstawie bieżącego stanu. Przed wprowadzeniem zdarzenia scrollend trzeba było używać niedokładnej metody limitu czasu, która mogła się uruchomić, gdy palec użytkownika nadal znajdował się na ekranie. Dzięki zdarzeniu scrollend masz zdarzenie scrollend, które jest idealnie dopasowane w czasie i rozpoznaje, czy użytkownik nadal wykonuje gest.

Było to ważne dla przeglądarki, ponieważ JavaScript nie może śledzić obecności palca na ekranie podczas przewijania – te informacje po prostu nie są dostępne. Fragmenty kodu, który nieprawidłowo określa koniec przewijania, można teraz usunąć i zastąpić precyzyjnym zdarzeniem należącym do przeglądarki.

Dowiedz się więcej o scrollend.

Animacje oparte na przewijaniu

Animacje oparte na przewijaniu to interesująca funkcja dostępna od Chrome 115. Umożliwia ona powiązanie istniejącej animacji CSS lub animacji utworzonej za pomocą interfejsu Web Animations API z przesunięciem przewijania elementu przewijanego. Podczas przewijania w górę i w dół lub w lewo i w prawo w przypadku przewijania w poziomie powiązana animacja będzie przewijana do przodu i do tyłu w bezpośredniej reakcji na przewijanie.

Za pomocą ScrollTimeline możesz śledzić ogólny postęp przewijania, jak pokazano w tym przykładzie. Podczas przewijania do końca strony tekst pojawia się znak po znaku.

Za pomocą ViewTimeline możesz śledzić element, gdy przekracza on obszar przewijania. Działa to podobnie do sposobu, w jaki IntersectionObserver śledzi element. W poniższym filmie demonstracyjnym każdy obraz pojawia się od momentu, gdy znajdzie się w obszarze przewijania, aż do momentu, gdy znajdzie się na środku.

Animacje oparte na przewijaniu działają z animacjami CSS i interfejsem Web Animations API, więc możesz korzystać ze wszystkich zalet tych interfejsów. Obejmuje to możliwość uruchamiania tych animacji poza głównym wątkiem. Teraz możesz mieć płynne animacje oparte na przewijaniu, które działają poza wątkiem głównym za pomocą zaledwie kilku dodatkowych wierszy kodu. Czego tu nie lubić?

Więcej informacji o animacjach opartych na przewijaniu znajdziesz w tym artykule lub na stronie scroll-driven-animations.style, na której znajdziesz wiele wersji demonstracyjnych.

Załącznik z opóźnionym harmonogramem

Podczas stosowania animacji opartej na przewijaniu za pomocą CSS mechanizm wyszukiwania, który znajduje kontrolujący element przewijany, zawsze przechodzi w górę drzewa DOM, co ogranicza go tylko do elementów przewijanych będących przodkami. Bardzo często jednak element, który ma być animowany, nie jest elementem podrzędnym elementu przewijanego, ale elementem znajdującym się w całkowicie innym poddrzewie.

Aby umożliwić elementowi animowanemu znalezienie nazwanej osi przewijania, która nie jest elementem nadrzędnym, użyj właściwości timeline-scope w przypadku wspólnego elementu nadrzędnego. Dzięki temu zdefiniowany scroll-timeline lub view-timeline o tej nazwie może się do niego dołączyć, co zwiększa jego zakres. Gdy to zrobisz, każde dziecko tego wspólnego rodzica będzie mogło korzystać z osi czasu o tej nazwie.

Dowiedz się więcej: timeline-scope.

Animacje właściwości dyskretnych

Kolejną nową funkcją w 2023 r. jest możliwość animowania dyskretnych animacji, np. animowania do i z display: none. Od Chrome 116 możesz używać display i content-visibility w regułach klatek kluczowych. Możesz też przechodzić między dowolnymi właściwościami dyskretnymi w 50% zamiast w 0%. Możesz to zrobić za pomocą właściwości transition-behavior z użyciem słowa kluczowego allow-discrete lub w właściwości transition jako skrótu.

Dowiedz się więcej o przekształcaniu animacji dyskretnych.

@starting-style

Reguła CSS @starting-style korzysta z nowych funkcji internetowych do animowania do i z display: none. Ta reguła umożliwia nadanie elementowi stylu „przed otwarciem”, który przeglądarka może wyszukać, zanim element zostanie otwarty na stronie. Jest to bardzo przydatne w przypadku animacji wejść i animowania elementów, takich jak wyskakujące okienko czy okno dialogowe. Może się też przydać, gdy tworzysz element i chcesz dodać do niego animację. Rozważmy przykład, w którym atrybut popover (patrz następna sekcja) jest animowany tak, aby płynnie pojawiał się w widocznym obszarze i na górnej warstwie z zewnątrz widocznego obszaru.

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

Nakładka

Nową właściwość CSS overlay można dodać do przejścia, aby umożliwić płynne animowanie elementów ze stylami najwyższej warstwy, takich jak popover i dialog. Jeśli nie zastosujesz przejścia do nakładki, element natychmiast wróci do stanu, w którym jest przycięty, przekształcony i zakryty, a przejście nie będzie widoczne. Podobnie właściwość overlay umożliwia płynne animowanie elementu ::backdrop po dodaniu go do elementu najwyższej warstwy.

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

Wyskakujące okienko

Interfejs Popover API pomaga tworzyć elementy, które znajdują się na wierzchu reszty strony. Mogą to być menu, wybór i etykietki. Aby utworzyć proste wyskakujące okienko, dodaj atrybut popover i atrybut id do elementu, który ma się pojawiać, a następnie połącz atrybut id z przyciskiem wywołującym za pomocą atrybutu popovertarget="my-popover". Interfejs Popover API obsługuje:

• Promowanie do najwyższej warstwy: wyskakujące okienka będą wyświetlane w osobnej warstwie nad resztą strony, więc nie musisz się martwić o wskaźnik z-index.
• Funkcja lekkiego zamykania: kliknięcie poza obszarem wyskakującego okienka spowoduje jego zamknięcie i przywrócenie fokusu.
• Domyślne zarządzanie skupieniem uwagi Otwarcie wyskakującego okienka powoduje, że następny punkt zatrzymania tabulatora znajduje się w tym okienku.
• Dostępne skróty klawiszowe. Naciśnięcie klawisza esc lub dwukrotne przełączenie spowoduje zamknięcie wyskakującego okienka i przywrócenie zaznaczenia.
• Powiązania komponentów z ułatwieniami dostępu Semantyczne łączenie elementu wyskakującego z elementem wywołującym.

Linie poziome w polu wyboru

Kolejna niewielka zmiana w HTML, która pojawiła się w tym roku w Chrome i Safari, to możliwość dodawania elementów linii poziomej (tagów <hr>) do elementów <select>, aby wizualnie rozdzielać treści. Wcześniej umieszczenie tagu <hr> w elemencie select po prostu nie powodowało jego wyświetlenia. W tym roku jednak zarówno Safari, jak i Chrome obsługują tę funkcję, co umożliwia lepsze rozdzielanie treści w elementach <select>.

Wybierz zrzut ekranu

Wybierz Prezentacja na żywo

Dowiedz się więcej o używaniu hr w select

:user-valid i invalid pseudo classes

Stabilne w tym roku we wszystkich przeglądarkach pseudoklasy :user-valid i :user-invalid działają podobnie do pseudoklas :valid i :invalid, ale pasują do elementu sterującego formularza dopiero po tym, jak użytkownik znacząco wejdzie z nim w interakcję. Wymagany i pusty element formularza będzie pasować do wzorca :invalid, nawet jeśli użytkownik nie zaczął 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 stanu, aby śledzić zmiany wprowadzone przez użytkownika.

Dowiedz się więcej o używaniu pseudoelementów sprawdzania poprawności formularza user-*.

Ekskluzywny akordeon

Popularnym wzorcem interfejsu w internecie jest komponent akordeonu. Aby wdrożyć ten wzorzec, połącz kilka elementów <details>, często grupując je wizualnie, aby wskazać, że należą do siebie.

Nowością w Chrome 120 jest obsługa atrybutu name w elementach <details>. Gdy ten atrybut jest używany, wiele elementów <details> o tej samej wartości name tworzy grupę semantyczną. W grupie może być otwarty tylko 1 element naraz: gdy otworzysz jeden z elementów <details> z grupy, poprzednio otwarty element zostanie automatycznie zamknięty. Ten typ akordeonu nazywa się akordeonem wyłącznym.

Elementy <details>, które wchodzą w skład ekskluzywnego akordeonu, nie muszą być elementami równorzędnymi. Mogą być rozproszone w dokumencie.