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 do tworzenia animacji i układów. Teraz łatwiej jest na przykład rozmieszczać elementy w kółku wokół wybranego punktu środkowego.

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

Zaznaczenie złożone n-ty*

Dzięki selektorowi pseudoklasy :nth-child() można wybierać elementy w DOM według ich indeksu. Dzięki mikroskładnikom An+B możesz dokładnie określić, które elementy chcesz wybrać.

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 odfiltrować listę dzieci, zanim An+B wykona swoje zadanie.

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

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.

Poddrzewo ograniczone jest zdefiniowane przez węzeł ograniczający (górna granica) i opcjonalny limit ograniczający (dolna granica).

@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 tym pokazie elementy <img> w komponencie karuzeli nie są dopasowywane ze względu na zastosowany limit zakresu.

Zrzut ekranu wersji demonstracyjnej

Prezentacja na żywo funkcji Scope

Więcej informacji o @scope znajdziesz w artykule „Jak za pomocą @scope ograniczyć zasięg selektorów”. 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. Początkowo ta składnia została wydana z ograniczeniem wymagającym użycia & w różnych miejscach, ale to ograniczenie zostało zniesione w ramach aktualizacji składnia umożliwiającej zagnieżdżanie.

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, która znajduje się wewnątrz innej siatki, przyjęcie wierszy i kolumn zewnętrznej siatki jako własnych, używając wartości subgrid jako wartości wierszy lub kolumn siatki.

Subgrid jest szczególnie przydatny do dopasowywania elementów siostrzanych do ich dynamicznych treści. 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. Litery możesz ustawić w pozycji obniżonej lub podniesionej. 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ą

Demo z pierwszą literą

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

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 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 oraz zapewniać prawidłowe dzielenie wyrazów. Oba te zadania były tradycyjnie wykonywane ręcznie, więc to wspaniałe, że można je zlecić przeglądarce i że działa ona w przypadku dowolnego przetłumaczonego języka.

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 je widzimy. 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(). – tworzenie wariantów kolorów za pomocą względnej składni kolorów;

Dowiedz się więcej o kolorach 4 i przestrzeniach barw.

Funkcja color-mix

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

Składnia koloru względnego

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 mieszać kolor biały, aby rozjaśnić kolor, a RCS zapewnia precyzyjny dostęp do kanału jasności i możliwość korzystania z calc() na tym kanale w celu zmniejszenia lub zwiększenia jasności w sposób programowy.

RCS umożliwia wykonywanie względnych i bezwzględnych manipulacji kolorem. 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 to taka, w której zastępujesz wartość kanału zupełnie nową, np. ustawiasz przezroczystość na 50%. Ta składnia udostępnia 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ć do stylów CSS informacje o globalnym 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 używaniu zapytań dotyczących kontenerów.

Zapytania dotyczące kontenera stylów

Zapytania o styl zostały częściowo zaimplementowane w Chrome 111. W przypadku zapytań dotyczących stylów możesz obecnie wysyłać zapytania o wartość właściwości niestandardowych w elemencie nadrzędnym, gdy używasz @container style(). 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 zapytaniem 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. W przyszłych wersjach implementacji będzie można też wysyłać zapytania o zakresy wartości, aby określić zastosowany styl (np. style(60 <= --weather <= 70)), oraz styl na podstawie pary „właściwość–wartość” (np. style(font-style: italic)).

Dowiedz się więcej o używaniu zapytań dotyczących stylów.

:has()

Od prawie 20 lat programiści prosili o wprowadzenie w CSS „selekcjonera nadrzędnego”. 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 funkcji :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 kombinatoró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 poprzedza element <li> nad którym znajduje się kursor.

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

Aktualizowanie zapytania dotyczącego mediów

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 jest powiązana z możliwościami 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 strategia wykrywania dostępności JavaScriptu polegała na umieszczeniu w pliku HTML klasy nojs i usuwaniu jej za pomocą JavaScriptu. Te skrypty można usunąć, ponieważ CSS ma teraz możliwość wykrywania JavaScriptu 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 JavaScript jest dostępny, przełącznik można aktywować gestem, zamiast tylko włączać i wyłączać. Jeśli skrypty są wyłączone, możesz stworzyć użyteczne środowisko podstawowe.

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 dostosowują reklamy 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.

Interfejs View Transitions API opiera się na funkcji document.startViewTranstion. Przekaż funkcję, która aktualizuje 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 Transitions API do aplikacji jednostronicowych wprowadzony w Chrome 111. Dowiedz się więcej o przejściach między widokami.

Funkcja 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 kosztach precyzji.

Przed wprowadzeniem funkcji linear() w wersji 113 przeglądarki Chrome tworzenie efektów odbicia i odskoków w CSS było niemożliwe. Dzięki linear()można przybliżać te łagodne przejścia, upraszczając je do serii punktów, a następnie liniowo interpolować między tymi punktami.

Dowiedz się więcej o linear(). Aby utworzyć krzywe linear(), użyj generatora wykładniczego liniowego.

Koniec przewijania

Wiele interfejsów zawiera interakcje związane z przewijaniem, a czasami interfejs musi zsynchronizować informacje dotyczące bieżącej pozycji 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. Zdarzenie scrollend pozwala na śledzenie zakończenia przewijania w idealnym momencie, niezależnie od tego, 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łowej 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 paska przewijania. Gdy przewijasz w górę i w dół lub w lewo i w prawo, połączona animacja będzie odtwarzać się do przodu i do tyłu.

Za pomocą ScrollTimeline możesz śledzić ogólny postęp scrollera, jak pokazano w tym filmie demonstracyjnym. 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 pojawia się od momentu, gdy wejdzie do obszaru przewijania, do momentu, gdy znajdzie się w środku.

Animacje sterowane przewijaniem 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.

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

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

Podczas stosowania animacji sterowanej przez przewijanie za pomocą kodu CSS mechanizm wyszukiwania kontrolującego scroller zawsze przechodzi w górę drzewa DOM, co powoduje, że jest on ograniczony tylko do przodków 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 umożliwić animowanemu elementowi znalezienie nazwanej osi czasu przewijania nieprzodka, użyj właściwości timeline-scope w przypadku udostępnionego elementu nadrzędnego. 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. W takim przypadku każda jednostka podrzędna tej udostępnionej jednostki nadrzędnej może korzystać z tej osi czasu.

Dowiedz się więcej o timeline-scope.

Animacje właściwości dyskretnych

Kolejną nową funkcją w 2023 r. jest możliwość animowania oddzielnych animacji, np. animacji do i z display: none. Od wersji 116 przeglądarki Chrome możesz używać w regułach kluczowych klatek wartości 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.

@starting-style

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”, który przeglądarka może sprawdzić, zanim element zostanie otwarty na stronie. Jest to bardzo przydatne w przypadku animacji wejścia i animacji elementów takich jak wyskakujące okienka czy okna dialogowe. Może się to przydać również wtedy, gdy tworzysz element i chcesz go animować. Weź pod uwagę poniższy przykład, w którym atrybut popover (patrz następna sekcja) jest animowany i płynnie przemieszczany 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, a następnie 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. Pop-upy będą wyświetlane w osobnej warstwie nad resztą strony, więc nie musisz bawić się wartością wskaźnika z-index.
• Funkcja odrzucenia bez wyświetlania powiadomienia. Kliknięcie poza obszarem wyskakującego okienka spowoduje jego zamknięcie i przywrócenie fokusu.
• 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. Semantyczne łączenie elementu wyskakującego okienka z jego aktywatorem

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 tagu <hr> w elemencie select po prostu nie powodowało 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-*.

Ekskluzywny harmonijka

Typowym wzorcem interfejsu użytkownika w internecie jest komponent harmonijka. Aby zastosować ten wzór, połącz kilka elementów <details>, często grupowanych wizualnie, aby wskazać, ż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. Ten typ harmonijki nazywa się harmonijką wyłączną.

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