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*

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 precyzyjnie wybierać elementy bez konieczności pisania zbyt szczegółowych 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

Prezentacja na żywo o zakresie

.

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

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.

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ą

Wersja demonstracyjna pierwszej litery

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. Obie te czynności tradycyjnie są wykonywane ręcznie. Cieszę się, że można to zrobić w przeglądarce, tak by działała z każdym przetłumaczonym językiem.

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

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 mogą teraz: - 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. – Określ 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.

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

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.

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.

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

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

:has() na żywo

.

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

Dowiedz 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 ograniczyć ryzyko częstych aktualizacji widoku.

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.

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.

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

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.

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

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.

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.

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.

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.

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 liczne wersje demonstracyjne.

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.

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.

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 również przydatne za każdym razem, 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.

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.

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

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.

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

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.

Dowiedz się więcej o używaniu pseudoelementów służących do weryfikacji formularza*.

Wyjątkowy akordeon

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.