Trigonometrische Funktionen

In Chrome 111 wurde Unterstützung für die trigonometrischen Funktionen sin(), cos(), tan(), asin(), acos(), atan() und atan2() hinzugefügt, sodass sie in allen wichtigen Engines verfügbar sind. Diese Funktionen sind sehr praktisch für Animationen und Layouts. So ist es jetzt viel einfacher, Elemente auf einem Kreis um ein ausgewähltes Zentrum anzuordnen.

Weitere Informationen zu den trigonometrischen Funktionen in CSS

Komplexe nth-* Auswahl

Mit dem Pseudoklassenselektor :nth-child() lassen sich Elemente im DOM anhand ihres Index auswählen. Mit der An+B-Mikrosyntax können Sie genau festlegen, welche Elemente ausgewählt werden sollen.

Standardmäßig werden bei den :nth-*()-Pseudos alle untergeordneten Elemente berücksichtigt. Ab Chrome 111 können Sie optional eine Selektorliste in :nth-child() und :nth-last-child() übergeben. So können Sie die Liste der untergeordneten Elemente vorfiltern, bevor An+B seine Arbeit erledigt.

In der folgenden Demo wird die 3n+1-Logik nur auf die kleinen Puppen angewendet, indem sie mit of .small herausgefiltert werden. Über die Drop-downs können Sie den verwendeten Selektor dynamisch ändern.

Weitere Informationen zu komplexen nth-*-Auswahlen

Ebene

In Chrome 118 wurde Unterstützung für @scope hinzugefügt, eine At-Regel, mit der Sie die Selektorübereinstimmung auf einen bestimmten Teilbaum des Dokuments beschränken können. Mit dem eingeschränkten Styling können Sie sehr genau festlegen, welche Elemente Sie auswählen möchten, ohne übermäßig spezifische Selektoren schreiben oder sie eng an die DOM-Struktur koppeln zu müssen.

Ein eingeschränkter Teilbaum wird durch einen Bereichsroot (die obere Grenze) und ein optionales Bereichslimit (die untere Grenze) definiert.

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

Styleregeln, die in einem Bereichsblock platziert werden, beziehen sich nur auf Elemente innerhalb des ausgeschnittenen Teilbaums. Die folgende Styleregel mit Bereichsangabe bezieht sich beispielsweise nur auf <img>-Elemente, die sich zwischen dem .card-Element und einer beliebigen verschachtelten Komponente befinden, die dem [data-component]-Selektor entspricht.

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

In der folgenden Demo werden die <img>-Elemente in der Karussellkomponente aufgrund der angewendeten Bereichsbegrenzung nicht abgeglichen.

Screenshot der Bereichsdemo

Live-Demo zu Umfang

Weitere Informationen zu @scope finden Sie im Artikel „Mit @scope die Reichweite von Selektoren einschränken“. In diesem Artikel erfahren Sie mehr über die :scope-Auswahl, die Verarbeitung von Spezifität, Bereiche ohne Prelude und die Auswirkungen von@scopeauf die Kaskade.

Verschachtelung

Vor der Verschachtelung musste jeder Selektor explizit und separat deklariert werden. Das führte zu Wiederholungen, einem aufgeblähten Stylesheet und einer unübersichtlichen Erstellung. Jetzt können Selektoren fortgesetzt werden, wobei zugehörige Stilregeln gruppiert werden.

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

Durch das Verschachteln kann das Gewicht eines Stylesheets reduziert, der Aufwand für das Wiederholen von Selektoren verringert und Komponentenstile zentralisiert werden. Die Syntax wurde ursprünglich mit einer Einschränkung veröffentlicht, die die Verwendung von & an verschiedenen Stellen erforderte. Diese Einschränkung wurde jedoch mit einem Update der Syntax für das Einbetten aufgehoben.

Weitere Informationen zum Verschachteln

Unterraster

Mit CSS subgrid können Sie komplexere Grids mit einer besseren Ausrichtung zwischen untergeordneten Layouts erstellen. Damit kann ein Grid, das sich in einem anderen Grid befindet, die Zeilen und Spalten des äußeren Grids übernehmen, indem subgrid als Wert für Grid-Zeilen oder -Spalten verwendet wird.

Das Subgrid ist besonders nützlich, um untergeordnete Elemente an den dynamischen Inhalten der jeweils anderen auszurichten. So müssen Texter, UX-Schreibende und Übersetzer nicht versuchen, Projekttexte zu erstellen, die in das Layout „passen“. Mit Subgrid kann das Layout an den Inhalt angepasst werden.

Weitere Informationen zum Unterraster

Initial-letter

Die initial-letter-Eigenschaft, die Anfang des Jahres in Chrome 110 eingeführt wurde, ist eine kleine, aber leistungsstarke CSS-Funktion, mit der das Styling für die Platzierung von Initialen festgelegt wird. Sie können Buchstaben entweder tief- oder hochstellen. Für die Eigenschaft werden zwei Argumente akzeptiert: das erste gibt an, wie tief der Buchstabe in den entsprechenden Absatz abgesenkt werden soll, das zweite, wie weit er darüber angehoben werden soll. Sie können auch beides kombinieren, wie im folgenden Demovideo zu sehen ist.

Screenshot mit dem Anfangsbuchstaben

Demo für Initialbuchstaben

Weitere Informationen zur CSS-Eigenschaft „initial-letter“

text-wrap: balance and pretty

Als Entwickler kennen Sie die endgültige Größe, Schriftgröße oder sogar Sprache einer Überschrift oder eines Absatzes nicht. Alle Variablen, die für eine effektive und ästhetische Behandlung des Zeilenumbruchs erforderlich sind, sind im Browser verfügbar. Da der Browser alle Faktoren wie Schriftgröße, Sprache und zugewiesener Bereich kennt, eignet er sich hervorragend für die Verarbeitung von anspruchsvollen und hochwertigen Textlayouts.

Hier kommen zwei neue Techniken für den Zeilenumbruch ins Spiel: balance und pretty. Mit dem Wert balance soll ein harmonischer Textblock erstellt werden, während mit pretty verhindert werden soll, dass einzelne Wörter in einer Zeile stehen, und für eine gute Silbentrennung gesorgt werden soll. Beide Aufgaben wurden bisher manuell erledigt. Es ist erstaunlich, dass der Browser diese Aufgabe für jede übersetzte Sprache übernehmen kann.

Weitere Informationen zu „text-wrap: balance“

HD-Farbräume (Farbstufe 4)

Von der Hardware über die Software bis hin zum CSS und den blinkenden Lichtern – es kann viel Arbeit für unsere Computer bedeuten, Farben so gut wie unsere Augen darzustellen. 2023 haben wir neue Farben, mehr Farben, neue Farbräume, Farbfunktionen und neue Funktionen.

Mit CSS und Farben können Sie jetzt: – prüfen, ob die Bildschirmhardware des Nutzers HDR-Farben mit großem Farbumfang unterstützt. – prüfen, ob der Browser des Nutzers Farbsyntax wie Oklch oder Display P3 unterstützt. – HDR-Farben in Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ und mehr angeben. – Verläufe mit HDR-Farben erstellen. – Verläufe in alternativen Farbräumen interpolieren. – Farben mit color-mix() mischen. – Farbvarianten mit relativer Farbsyntax erstellen.

Weitere Informationen zu Color 4 und Farbräumen

Farbmischfunktion

Farben mischen ist eine klassische Aufgabe, die seit 2023 auch mit CSS möglich ist. Sie können einer Farbe nicht nur Weiß oder Schwarz, sondern auch Transparenz hinzufügen. Das ist in jedem beliebigen Farbraum möglich. Es ist gleichzeitig ein einfaches und ein erweitertes Farb-Feature.

color-mix() kann als Moment in einem Farbverlauf betrachtet werden. Während ein Farbverlauf alle Schritte von Blau zu Weiß zeigt, zeigt color-mix() nur einen Schritt. Die Sache wird komplizierter, wenn Sie Farbräume berücksichtigen und feststellen, wie unterschiedlich der Mischfarbraum und die Ergebnisse sein können.

Weitere Informationen zu color-mix()

Syntax für relative Farben

Die relative Farbsyntax (Relative Color Syntax, RCS) ist eine ergänzende Methode zu color-mix() zum Erstellen von Farbvarianten. Sie ist etwas leistungsfähiger als „color-mix()“, aber auch eine andere Strategie für die Arbeit mit Farben. Bei color-mix() kann die Farbe Weiß beigemischt werden, um eine Farbe aufzuhellen. Bei RCS haben Sie präzisen Zugriff auf den Helligkeitskanal und können calc() auf den Kanal anwenden, um die Helligkeit programmatisch zu verringern oder zu erhöhen.

Mit RCS können Sie relative und absolute Änderungen an einer Farbe vornehmen. Bei einer relativen Änderung wird der aktuelle Wert für die Sättigung oder Helligkeit mit calc() geändert. Bei einer absoluten Änderung wird ein Channel-Wert durch einen völlig neuen Wert ersetzt, z. B. wenn die Deckkraft auf 50 % festgelegt wird. Diese Syntax bietet Ihnen nützliche Tools für das Theming, Just-in-Time-Varianten und mehr.

Weitere Informationen zur relativen Farbsyntax

Größencontainerabfragen

Anstatt die globalen Größeninformationen des Viewports zum Anwenden von CSS-Stilen zu verwenden, unterstützen Containerabfragen die Abfrage eines übergeordneten Elements auf der Seite. Das bedeutet, dass Komponenten dynamisch über mehrere Layouts und in mehreren Ansichten hinweg gestaltet werden können. Containerabfragen für die Größe sind seit dem 14. Februar dieses Jahres in allen modernen Browsern stabil.

Um diese Funktion zu verwenden, müssen Sie zuerst die Eindämmung für das Element einrichten, das Sie abfragen. Verwenden Sie dann ähnlich wie bei einer Media-Query @container mit den Größenparametern, um die Stile anzuwenden. Zusammen mit Containerabfragen erhalten Sie Containerabfragegrößen. In der folgenden Demo wird die Containerabfragegröße cqi (die die Größe des Inline-Containers darstellt) verwendet, um die Größe des Kartenheaders festzulegen.

Weitere Informationen zur Verwendung von Containerabfragen

Containerabfragen formatieren

Stilabfragen wurden mit teilweiser Implementierung in Chrome 111 eingeführt. Derzeit können Sie mit Stilabfragen den Wert von benutzerdefinierten Attributen für ein übergeordnetes Element abfragen, wenn Sie @container style() verwenden. Sie können beispielsweise abfragen, ob ein benutzerdefinierter Eigenschaftswert vorhanden ist oder auf einen bestimmten Wert wie @container style(--rain: true) festgelegt ist.

Screenshot der Stilabfrage

Demo für Stilabfrage

Das klingt zwar ähnlich wie die Verwendung von Klassennamen in CSS, aber Style-Abfragen haben einige Vorteile. Erstens können Sie mit Style-Abfragen den Wert in CSS nach Bedarf für Pseudostatus aktualisieren. Zweitens können Sie in zukünftigen Versionen der Implementierung Wertebereiche abfragen, um den angewendeten Stil zu bestimmen, z. B. style(60 <= --weather <= 70), und den Stil basierend auf Eigenschaft-Wert-Paaren wie style(font-style: italic) festlegen.

Weitere Informationen zur Verwendung von Stilabfragen

:has()-Selektor

Fast 20 Jahre lang haben Entwickler einen „übergeordneten Selektor“ in CSS gefordert. Mit dem :has()-Selektor, der in Chrome 105 eingeführt wurde, ist das jetzt möglich. Wenn Sie beispielsweise .card:has(img.hero) verwenden, werden die .card-Elemente ausgewählt, die ein Hero-Bild als untergeordnetes Element haben.

:has()-Demoscreenshot

:has() Live-Demo

Da :has() eine Liste relativer Selektoren als Argument akzeptiert, können Sie viel mehr als nur das übergeordnete Element auswählen. Mit verschiedenen CSS-Kombinatoren können Sie nicht nur im DOM-Baum nach oben, sondern auch seitwärts navigieren. Beispiel: li:has(+ li:hover) wählt das <li>-Element aus, das dem aktuell mit dem Mauszeiger berührten <li>-Element vorangestellt ist.

Weitere Informationen zum :has()-Selektor für Preisvergleichsportale

Media-Query aktualisieren

Mit der Media-Anfrage update können Sie die Benutzeroberfläche an die Aktualisierungsrate eines Geräts anpassen. Das Feature kann einen Wert von fast, slow oder none zurückgeben, der sich auf die Funktionen verschiedener Geräte bezieht.

Die meisten Geräte, für die Sie entwickeln, haben wahrscheinlich eine schnelle Aktualisierungsrate. Dazu gehören Computer und die meisten Mobilgeräte. E-Reader und Geräte wie Zahlungssysteme mit geringem Stromverbrauch haben möglicherweise eine langsame Aktualisierungsrate. Wenn Sie wissen, dass das Gerät keine Animationen oder häufigen Updates verarbeiten kann, können Sie die Akkunutzung oder fehlerhafte Ansichtsaktualisierungen vermeiden.

Weitere Informationen zu@media (update)

Media-Query für Scripting

Mit der Mediaanfrage für Scripting lässt sich prüfen, ob JavaScript verfügbar ist. Das ist sehr praktisch für die progressive Optimierung. Vor dieser Mediaanfrage bestand eine Strategie zum Erkennen der Verfügbarkeit von JavaScript darin, eine nojs-Klasse in den HTML-Code einzufügen und sie mit JavaScript zu entfernen. Diese Skripts können entfernt werden, da CSS jetzt eine Möglichkeit bietet, JavaScript zu erkennen und entsprechend anzupassen.

Hier erfahren Sie, wie Sie JavaScript auf einer Seite für Tests über die Chrome-Entwicklertools aktivieren und deaktivieren.

Wenn Sie das Design einer Website ändern möchten, kann die Media-Query für das Scripting helfen, die Änderung entsprechend der Systemeinstellung vorzunehmen, da kein JavaScript verfügbar ist. Oder Sie verwenden eine Schalterkomponente. Wenn JavaScript verfügbar ist, kann der Schalter per Wischgeste statt nur durch Ein- und Ausschalten bedient werden. Es gibt viele Möglichkeiten, die Nutzerfreundlichkeit zu verbessern, wenn Scripting verfügbar ist. Gleichzeitig wird eine sinnvolle Grundlage geschaffen, wenn Scripting deaktiviert ist.

Weitere Informationen zu Skripts.

Media-Abfrage mit reduzierter Transparenz

Nicht transparente Oberflächen können bei verschiedenen Arten von Sehschwächen zu Kopfschmerzen führen oder visuell anstrengend sein. Aus diesem Grund bieten Windows, macOS und iOS Systemeinstellungen, mit denen die Transparenz der Benutzeroberfläche reduziert oder entfernt werden kann. Diese Media-Query für prefers-reduced-transparency passt gut zu den anderen Media-Queries für Einstellungen, mit denen Sie kreativ sein und gleichzeitig auf die Bedürfnisse der Nutzer eingehen können.

In einigen Fällen können Sie ein alternatives Layout bereitstellen, in dem keine Inhalte andere Inhalte überlagern. In anderen Fällen kann die Deckkraft einer Farbe so angepasst werden, dass sie undurchsichtig oder nahezu undurchsichtig ist. Im folgenden Blogpost finden Sie weitere inspirierende Demos, die sich an die Nutzereinstellung anpassen. Sehen Sie sich diese an, wenn Sie wissen möchten, wann diese Media-Query nützlich ist.

Weitere Informationen zu@media (prefers-reduced-transparency)

Übergänge ansehen

Ansichtsübergänge haben einen großen Einfluss auf die Nutzerfreundlichkeit einer Seite. Mit der View Transitions API können Sie visuelle Übergänge zwischen zwei Seitenstatus Ihrer Single-Page-Anwendung erstellen. Diese Übergänge können Seitenübergänge oder kleinere Änderungen auf einer Seite sein, z. B. das Hinzufügen oder Entfernen eines neuen Elements in einer Liste.

Das Herzstück der View Transitions API ist die Funktion document.startViewTranstion. Übergeben Sie eine Funktion, die das DOM auf den neuen Status aktualisiert. Die API erledigt den Rest. Dazu wird ein Snapshot vor und nach der Änderung aufgenommen und dann zwischen den beiden Snapshots überblendet. Mit CSS können Sie festlegen, was erfasst wird, und optional anpassen, wie diese Momentaufnahmen animiert werden sollen.

Die View Transitions API für Single-Page-Anwendungen wurde in Chrome 111 eingeführt. Weitere Informationen zu View Transitions

Lineare Easing-Funktion

Lassen Sie sich nicht vom Namen dieser Funktion täuschen. Mit der Funktion linear() (nicht zu verwechseln mit dem Keyword linear) können Sie auf einfache Weise komplexe Easing-Funktionen erstellen, wobei Sie jedoch etwas an Präzision verlieren.

Vor linear(), das in Chrome 113 eingeführt wurde, war es nicht möglich, in CSS Sprung- oder Federeffekte zu erstellen. Dank linear()lassen sich diese Ein- und Ausblendeeffekte annähern, indem sie in eine Reihe von Punkten vereinfacht und dann linear zwischen diesen Punkten interpoliert werden.

Weitere Informationen zu linear() Verwenden Sie zum Erstellen von linear()-Kurven den Generator für lineare Übergänge.

Scroll-Ende

Viele Benutzeroberflächen umfassen Scroll-Interaktionen. Manchmal müssen Informationen, die für die aktuelle Scroll-Position relevant sind, synchronisiert oder Daten basierend auf dem aktuellen Status abgerufen werden. Vor dem scrollend-Ereignis mussten Sie eine ungenaue Timeout-Methode verwenden, die ausgelöst werden konnte, während der Finger des Nutzers noch auf dem Bildschirm war. Mit dem scrollend-Ereignis haben Sie ein perfekt getimtes „scrollend“-Ereignis, das erkennt, ob ein Nutzer noch eine Geste ausführt oder nicht.

Das war wichtig, weil JavaScript nicht erfassen kann, ob sich ein Finger während des Scrollens auf dem Bildschirm befindet. Diese Informationen sind einfach nicht verfügbar. Abschnitte mit ungenauem Code für das Ende des Scrollens können jetzt gelöscht und durch ein hochpräzises Ereignis des Browsers ersetzt werden.

Weitere Informationen zu „scrollend“

Scrollgesteuerte Animationen

Scrollgesteuerte Animationen sind eine interessante Funktion, die ab Chrome 115 verfügbar ist. Damit können Sie eine vorhandene CSS-Animation oder eine mit der Web Animations API erstellte Animation mit dem Scroll-Offset eines Scrollers verknüpfen. Wenn Sie in einem horizontalen Scroller nach oben und unten oder nach links und rechts scrollen, wird die verknüpfte Animation direkt vorwärts und rückwärts abgespielt.

Mit einer ScrollTimeline können Sie den Gesamtfortschritt eines Scrollers verfolgen, wie in der folgenden Demo gezeigt. Wenn Sie zum Ende der Seite scrollen, wird der Text Zeichen für Zeichen angezeigt.

Mit einer ViewTimeline können Sie ein Element verfolgen, während es den Scrollport durchläuft. Das funktioniert ähnlich wie beim Tracking eines Elements mit IntersectionObserver. In der folgenden Demo wird jedes Bild ab dem Moment angezeigt, in dem es in den Scrollport eintritt, bis es sich in der Mitte befindet.

Da scrollgesteuerte Animationen mit CSS-Animationen und der Web Animations API funktionieren, können Sie alle Vorteile dieser APIs nutzen. Dazu gehört auch die Möglichkeit, diese Animationen außerhalb des Hauptthreads auszuführen. Mit nur wenigen zusätzlichen Codezeilen können Sie jetzt flüssige, scrollgesteuerte Animationen außerhalb des Hauptthreads ausführen.

Weitere Informationen zu scrollgesteuerten Animationen und viele Demos

Verzögerter Anhang für Zeitachse

Wenn Sie eine scrollgesteuerte Animation über CSS anwenden, wird der DOM-Baum immer nach oben durchlaufen, um den steuernden Scroller zu finden. Die Suche ist also auf Scroll-Ancestors beschränkt. Sehr oft ist das Element, das animiert werden muss, jedoch kein untergeordnetes Element des Scrollers, sondern ein Element in einem völlig anderen Unterbaum.

Damit das animierte Element eine benannte Scroll-Timeline eines Nicht-Vorgängers finden kann, verwenden Sie die Eigenschaft timeline-scope für ein gemeinsames übergeordnetes Element. Dadurch kann die definierte scroll-timeline oder view-timeline mit diesem Namen angehängt werden, wodurch sie einen größeren Umfang erhält. Wenn das der Fall ist, kann jedes Kind dieses Elternteils die Zeitachse mit diesem Namen verwenden.

Weitere Informationen zu timeline-scope

Animationen für diskrete Eigenschaften

Eine weitere neue Funktion im Jahr 2023 ist die Möglichkeit, diskrete Animationen zu animieren, z. B. von und nach display: none. Ab Chrome 116 können Sie display und content-visibility in Keyframe-Regeln verwenden. Sie können auch jede diskrete Eigenschaft am 50‑%-Punkt anstelle des 0‑%‑Punkts überblenden. Dies wird mit der transition-behavior-Property mit dem allow-discrete-Schlüsselwort oder in der transition-Property als Kurzform erreicht.

Weitere Informationen zum Überblenden von diskreten Animationen

@starting-style

Die CSS-Regel @starting-style basiert auf neuen Webfunktionen für Animationen von und nach display: none. Mit dieser Regel können Sie einem Element einen „before-open“-Stil zuweisen, den der Browser abrufen kann, bevor das Element auf der Seite geöffnet wird. Das ist sehr nützlich für Einblendanimationen und für das Animieren von Elementen wie Pop-overs oder Dialogfeldern. Das kann auch nützlich sein, wenn Sie ein Element erstellen und es animieren möchten. Im folgenden Beispiel wird ein popover-Attribut (siehe nächsten Abschnitt) animiert, sodass es von außerhalb des Darstellungsbereichs sanft in den Darstellungsbereich und in die oberste Ebene gelangt.

Weitere Informationen zu@starting-style und anderen Einstiegsanimationen

Overlay

Die neue CSS-Eigenschaft overlay kann Ihrer Übergangsanweisung hinzugefügt werden, damit Elemente mit Top-Layer-Stilen wie popover und dialog reibungslos aus dem Top-Layer animiert werden. Wenn Sie keinen Übergang für das Overlay festlegen, wird das Element sofort wieder abgeschnitten, transformiert und verdeckt. Der Übergang ist dann nicht zu sehen. Ebenso ermöglicht overlay, dass ::backdrop beim Hinzufügen zu einem Element der obersten Ebene reibungslos animiert wird.

Weitere Informationen zu Overlays und anderen Abgangsanimationen

Popover

Mit der Popover API können Sie Elemente erstellen, die über dem Rest der Seite liegen. Dazu gehören Menüs, Auswahlmöglichkeiten und Tooltips. Sie können ein einfaches Pop-over erstellen, indem Sie dem Element, das eingeblendet werden soll, das Attribut popover und eine id hinzufügen und das Attribut id über popovertarget="my-popover" mit einem aufrufenden Button verknüpfen. Die Popover API unterstützt:

• Hochstufung in die oberste Ebene Pop-overs werden auf einer separaten Ebene über dem Rest der Seite angezeigt, sodass Sie nicht mit dem Z-Index arbeiten müssen.
• Funktion zum leichten Schließen: Wenn Sie außerhalb des Pop-over-Bereichs klicken, wird das Pop-over geschlossen und der Fokus wird zurückgegeben.
• Standardmäßige Fokusverwaltung: Wenn das Pop-over geöffnet wird, befindet sich der nächste Tabstopp im Pop-over.
• Barrierefreie Tastenkombinationen: Wenn Sie die Taste esc drücken oder zweimal umschalten, wird das Pop-over geschlossen und der Fokus wird zurückgegeben.
• Barrierefreie Komponentenbindungen: Popover-Element semantisch mit einem Popover-Trigger verbinden.

Horizontale Linien in der Auswahl

Eine weitere kleine Änderung an HTML, die dieses Jahr in Chrome und Safari eingeführt wurde, ist die Möglichkeit, horizontale Trennlinien (<hr>-Tags) in <select>-Elemente einzufügen, um Inhalte visuell zu trennen. Bisher wurde ein <hr>-Tag in einem Select-Element einfach nicht gerendert. Dieses Jahr unterstützen sowohl Safari als auch Chrome diese Funktion, sodass Inhalte in <select>-Elementen besser getrennt werden können.

Screenshot auswählen

„Live-Demo“ auswählen

Weitere Informationen zur Verwendung von „hr“ in „select“

:Gültige und ungültige Pseudoklassen für Nutzer

Die Pseudoklassen :user-valid und :user-invalid sind in diesem Jahr in allen Browsern stabil. Sie verhalten sich ähnlich wie die Pseudoklassen :valid und :invalid, stimmen aber nur dann mit einem Formularsteuerelement überein, wenn ein Nutzer erheblich mit der Eingabe interagiert hat. Ein Formularsteuerelement, das erforderlich und leer ist, stimmt mit :invalid überein, auch wenn ein Nutzer noch nicht mit der Seite interagiert hat. Dasselbe Steuerelement stimmt erst dann mit :user-invalid überein, wenn der Nutzer die Eingabe geändert und in einem ungültigen Zustand belassen hat.

Mit diesen neuen Selektoren ist es nicht mehr erforderlich, zustandsbehafteten Code zu schreiben, um Änderungen an der Eingabe eines Nutzers zu verfolgen.

Weitere Informationen zur Verwendung von Pseudoelementen zur Formularvalidierung

Exklusives Akkordeon

Ein häufiges UI-Muster im Web ist eine Akkordeonkomponente. Zur Implementierung dieses Musters kombinieren Sie mehrere <details>-Elemente und gruppieren sie oft visuell, um anzugeben, dass sie zusammengehören.

Neu in Chrome 120 ist die Unterstützung des Attributs name für <details>-Elemente. Wenn dieses Attribut verwendet wird, bilden mehrere <details>-Elemente mit demselben name-Wert eine semantische Gruppe. Es kann jeweils nur ein Element in der Gruppe geöffnet sein. Wenn Sie eines der <details>-Elemente aus der Gruppe öffnen, wird das zuvor geöffnete Element automatisch geschlossen. Diese Art von Akkordeon wird als exklusives Akkordeon bezeichnet.

Die <details>-Elemente, die Teil eines exklusiven Akkordeons sind, müssen nicht unbedingt gleichrangig sein. Sie können über das gesamte Dokument verteilt sein.