Funkcje trygonometryczne

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

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

Zaznaczenie złożone n-ty*

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

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

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

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

Zakres

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

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

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

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

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

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

Zrzut ekranu wersji demonstracyjnej

Prezentacja na żywo funkcji Scope

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

Umieszczanie

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

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

  dd {
    /* dl dd styles */
  }
}

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

dl dt {
  /* dl dt styles */
}

dl dd {
  /* dl dd styles */
}

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

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

Podsiatka

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.

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

Dowiedz się więcej o subgridzie.

Pierwsza litera

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

Zrzut ekranu z pierwszą literą

Wersja demonstracyjna z pierwszą literą

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

text-wrap: balance and pretty

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

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

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

Kolory HD (poziom kolorów 4)

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

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

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

funkcja mieszania kolorów

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

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

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

Względna składnia kolorów

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

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

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

Zapytania dotyczące kontenera z rozmiarami

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

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

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

Zapytania dotyczące kontenera stylów

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

Zrzut ekranu z zapytania o styl

Demo zapytania o styl

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

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

:has()

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

Zrzut ekranu wersji demonstracyjnej :has()

:has() Prezentacja na żywo

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

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

Zaktualizuj zapytanie o media

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

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

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

Skryptowanie zapytania o multimedia

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

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

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

Dowiedz się więcej o skrypcie.

Zapytanie o multimedia z ograniczoną przejrzystością

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

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

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

Wyświetlanie przejść

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

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

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

Funkcja łagodnego przejścia liniowego

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

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

Dowiedz się więcej o linear(). Aby utworzyć linear() krzywe, użyj generatora wypełnienia 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żywać nieprecyzyjnej metody limitowania czasu, która mogła się aktywować, gdy palec użytkownika nadal znajdował się na ekranie. Dzięki zdarzeniu scrollend masz zdarzenie scrollend o idealnym czasie, które określa, czy użytkownik nadal wykonuje gest.

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

Dowiedz się więcej o scrollend.

Animacje sterowane przewijaniem

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

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

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

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

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

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

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

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

Dowiedz się więcej o timeline-scope.

Animacje właściwości dyskretnych

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

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

@styl-start

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

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

Nakładka

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

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

Menu

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

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

Reguły poziome w wybranych

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

Wybierz zrzut ekranu

Wybierz prezentację na żywo

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

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

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

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

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

Wyjątkowy akordeon

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

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

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