CSS-Wrapping: 2023!

CSS Wrapped: 2023!

Direkt zum Inhalt:

• Architekturgrundlagen
• Trigonometrische Funktionen
• Komplexe Auswahl des n-ten Elements
• Ebene
• Verschachtelung

• Typografie
• Anfangsbuchstabe
• Ausrichtung/Lesbarkeit des Textumbruchs

• Farbe
• Farbebene 4
• Funktion „Farbmix“
• Syntax für relative Farben

• Responsives Webdesign
• Containerabfragen
• Stilabfragen
• :has-Selektor
• Mediaabfrage aktualisieren
• Scripting Media Query
• Transparenz-Medienabfrage

• Interaktion
• Übergänge ansehen
• Lineare Ease-Funktion
• Scrollend
• Scroll-basierte Animationen
• Anhang zur verzögerten Zeitachse
• Diskrete Property-Übergänge
• Regel für den Anfangsstil
• Overlay-Animation

• Komponenten
• Pop-up
• Stunde in Auswahl
• Gültige/ungültige Pseudoklassen für Nutzer
• Exklusives Akkordeon

Wow! 2023 war ein wichtiges Jahr für CSS.

Von #Interop2023 bis hin zu vielen neuen Landings im Bereich Preisvergleichsportale und UI, die Entwickler von Funktionen unterstützen, die auf der Webplattform einst für unmöglich gehalten wurden. Jetzt unterstützen alle modernen Browser Containerabfragen, das Subgrid, die :has()-Auswahl und eine ganze Reihe neuer Farbräume und Funktionen. In Chrome werden scrollbasierte Animationen, die nur aus CSS bestehen, und Übergänge zwischen Ansichten unterstützt. Und zu guter Letzt gibt es so viele neue Primitives, die die Arbeit für Entwickler erleichtern, wie CSS-Verschachtelung und Stile mit Gültigkeitsbereich.

Was für ein Jahr! Zum Abschluss dieses Meilensteinjahres möchten wir die harte Arbeit der Browserentwickler und der Web-Community würdigen, die dies alles möglich gemacht haben.

Achten Sie auf die neuen Logos für Baselines neben den Funktionsüberschriften. Weitere Informationen

• = Neu in allen stabilen Versionen der wichtigsten Browser verfügbar.

• = Teilweise Verfügbarkeit in gängigen Browsern.

Architektonische Grundlagen

Beginnen wir mit den Aktualisierungen der CSS-Sprache und ‑Funktionen. Dies sind Funktionen, die grundlegend für die Art und Weise sind, wie Sie Stile verfassen und organisieren, und die dem Entwickler viel Potenzial verleihen.

Trigonometrische Funktionen

Unterstützte Browser

• 111
• 111
• 108
• 15.4

Quelle

In Chrome 111 wurde die Unterstützung für die trigonometrischen Funktionen sin(), cos(), tan(), asin(), acos(), atan() und atan2() hinzugefügt. Sie sind jetzt in allen gängigen Engines verfügbar. Diese Funktionen sind bei Animationen und Layout sehr nützlich. Zum Beispiel ist es jetzt viel einfacher, Elemente auf einem Kreis um einen ausgewählten Mittelpunkt herum anzuordnen.

Demo zu trigonometrischen Funktionen

Weitere Informationen zu trigonometrischen Funktionen in CSS

Komplexe Auswahl des n-ten Elements

Unterstützte Browser

• 111
• 111
• 113
• 9

Mit dem Pseudoklassen-Selektor :nth-child() können Elemente im DOM anhand ihres Index ausgewählt werden. 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 Auswahlliste an :nth-child() und :nth-last-child() übergeben. So können Sie die Liste der Kinder vorfiltern, bevor An+B seine Arbeit beginnt.

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-down-Menüs können Sie die verwendete Auswahl dynamisch ändern.

Demo für die komplexe Auswahl des n-ten Elements

Weitere Informationen zu komplexen Auswahlen vom Typ „n-te“*

Ebene

Unterstützte Browser

• 118
• 118
• 
• 17.4

Quelle

In Chrome 118 wird jetzt @scope unterstützt, eine At-Regel, mit der eine Bereichsauswahl mit einer bestimmten Unterstruktur des Dokuments abgeglichen werden kann. Mit einem begrenzten Stil können Sie genau festlegen, welche Elemente Sie auswählen, ohne übermäßig spezifische Selektoren schreiben oder sie eng mit der DOM-Struktur verknüpfen zu müssen.

Ein untergeordneter Knoten mit Bereich wird durch einen Begrenzungsknoten (die Obergrenze) und ein optionales Begrenzungslimit (die Untergrenze) definiert.

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

Stilregeln, die in einem Bereichsblock platziert werden, beziehen sich nur auf Elemente innerhalb des herausgeschnittenen untergeordneten Knotens. Die folgende Style-Regel mit Bereich richtet sich beispielsweise nur an <img>-Elemente, die sich zwischen dem .card-Element und einer verschachtelten Komponente befinden, die mit der [data-component]-Auswahl übereinstimmt.

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

In der folgenden Demo werden die <img>-Elemente in der Karussellkomponente aufgrund des angewandten Gültigkeitsbereichslimits nicht abgeglichen.

Screenshot der Scope-Demo

Scope (Live-Demo)

CSS-@scopeDemo

Weitere Informationen zu @scope finden Sie im Artikel Mit @scope die Reichweite Ihrer Auswahlen einschränken. In diesem Artikel erfahren Sie mehr über die :scope-Auswahl, die Verarbeitung von Spezifität, Bereiche ohne Präludium und die Auswirkungen von @scope auf die Kaskade.

Verschachtelung

Unterstützte Browser

• 120
• 120
• 117
• 17.2

Quelle

Vor der Verschachtelung musste jeder Selektor explizit und separat deklariert werden. Dies führt zu Wiederholungen, einem großen Stylesheet-Volumen und einer unübersichtlichen Autorenansicht. Selektoren können jetzt fortgesetzt werden, wenn zugehörige Stilregeln gruppiert sind.

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

Screencast verschachteln

Nesting-Live-Demo

Den Sieger des Rennens mithilfe der lockeren Schachtelauswahl bestimmen

Durch Verschachtelung kann das Gewicht eines Stylesheets reduziert, der Overhead wiederholter Selectors verringert und Komponentenstile zentralisiert werden. Die Syntax wurde ursprünglich mit einer Einschränkung veröffentlicht, die die Verwendung von & an verschiedenen Stellen erforderte, aber seitdem durch eine Aktualisierung der gelockerten Verschachtelungssyntax verbessert wurde.

Weitere Informationen zum Verschachteln

Subgrid

Unterstützte Browser

• 117
• 117
• 71
• 16

Quelle

Mit CSS subgrid können Sie komplexere Raster mit besserer Ausrichtung zwischen untergeordneten Layouts erstellen. So kann ein Raster, das sich in einem anderen Raster befindet, die Zeilen und Spalten des äußeren Rasters als eigene übernehmen, indem subgrid als Wert für Rasterzeilen oder ‑spalten verwendet wird.

Screencast zu Subgrid

Live-Demo für untergeordnete Raster

Kopf-, Text- und Fußzeilen werden an die dynamischen Größen ihrer gleichgeordneten Elemente angepasst.

Das untergeordnete Raster ist besonders nützlich, um Geschwisterelemente aneinander auszurichten. So müssen Texter, UX-Schreibende und Übersetzer nicht mehr versuchen, Projekttext zu erstellen, der in das Layout „passt“. Mit Subgrid kann das Layout an den Inhalt angepasst werden.

Weitere Informationen zu Subgrid

Typografie

2023 gab es einige wichtige Updates bei der Webtypografie. Eine besonders schöne progressive Verbesserung ist die Eigenschaft text-wrap. Mit dieser Eigenschaft können Sie das typografische Layout anpassen, das im Browser ohne zusätzliches Scripting erstellt wird. Schluss mit komplizierten Linienlängen und einer besser vorhersehbaren Typografie!

Anfangsbuchstabe

Unterstützte Browser

• 110
• 110
• x
• 9

Quelle

Die Eigenschaft initial-letter wurde Anfang des Jahres in Chrome 110 eingeführt. Sie ist eine kleine, aber leistungsstarke CSS-Funktion, mit der das Styling für die Platzierung von Anfangsbuchstaben festgelegt wird. Sie können Buchstaben entweder abgesenkt oder erhöht positionieren. Die -Eigenschaft akzeptiert zwei Argumente: das erste für die Tiefe des Buchstabens im entsprechenden Absatz und das zweite dafür, wie stark der Buchstabe darüber angehoben werden soll. Sie können auch eine Kombination aus beiden verwenden, wie in der folgenden Demo.

Screenshot mit Anfangsbuchstaben

Demo des ersten Briefs

Ändern Sie die Werte von initial-letter für das Pseudo-Element ::first-letter, um die Verschiebung zu beobachten.

Weitere Informationen zum Anfangsbuchstaben

Textumbruch: Ausgeglichen und hübsch

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

Hier kommen zwei neue Textumbruchtechniken ins Spiel: balance und pretty. Mit dem Wert balance soll ein harmonischer Textblock erstellt werden, während mit pretty Waisenzeilen vermieden und eine sinnvolle Silbentrennung gewährleistet werden sollen. Beide Aufgaben wurden traditionell von Hand erledigt und es ist toll, wenn der Browser die Aufgabe übernimmt und sie für jede übersetzte Sprache funktioniert.

Screencast mit Textumbruch

Live-Demo für Textumbruch

In der folgenden Demo können Sie die Auswirkungen von balance und pretty auf eine Überschrift und einen Absatz vergleichen, indem Sie den Schieberegler ziehen. Probieren Sie, die Demo in eine andere Sprache zu übersetzen.

Weitere Informationen zu „text-wrap: balance“

Farbe

2023 war das Jahr der Farben für die Webplattform. Mit neuen Farbräumen und Funktionen, die dynamische Farbthemen ermöglichen, können Sie die lebendigen, üppigen Themen erstellen, die Ihre Nutzer verdienen, und sie auch noch individuell anpassen.

HD-Farbräume (Farbebene 4)

Unterstützte Browser

• 111
• 111
• 113
• 15

Quelle

Unterstützte Browser

• 111
• 111
• 113
• 15

Quelle

Von der Hardware bis hin zur Software, dem CSS und den blinkenden Lichtern – es kann eine Menge Arbeit für unsere Computer erfordern, Farben so gut darzustellen, wie unser menschliches Auge sieht. 2023 gibt es neue Farben, mehr Farben, neue Farbräume, Farbfunktionen und neue Funktionen.

Mit CSS und Farben können Sie jetzt Folgendes tun: – Prüfen, ob die Bildschirmhardware des Nutzers HDR-Farben mit großem Farbraum unterstützt. - Überprüfen Sie, ob der Browser des Nutzers Farbsyntax wie Oklch oder Display P3 unterstützt. – HDR-Farben für Oklab, Oklch, HWB, Display P3, Rec.2020, XYZ und weitere Formate festlegen. – Verläufe mit HDR-Farben erstellen, – Verläufe in alternativen Farbräumen interpolieren. – Kombiniere Farben mit color-mix(). – Farbvarianten mit relativer Farbsyntax erstellen

Color 4 – Screencast

Color 4-Demo

In der folgenden Demo können Sie die Auswirkungen von „balance“ und „pretty“ auf eine Überschrift und einen Absatz vergleichen, indem Sie den Schieberegler ziehen. Probieren Sie, die Demo in eine andere Sprache zu übersetzen.

Weitere Informationen zu Color 4 und Farbräumen

Funktion „Farbmix“

Unterstützte Browser

• 111
• 111
• 113
• 16.2

Quelle

Das Mischen von Farben ist eine klassische Aufgabe, die ab 2023 auch mit CSS möglich ist. Sie können nicht nur Weiß oder Schwarz mit einer Farbe mischen, sondern auch Transparenz. All dies ist in einem beliebigen Farbraum möglich. Es ist gleichzeitig eine grundlegende und eine erweiterte Farbfunktion.

Screencast zu color-mix()

Demo für „color-mix()“

In der Demo können Sie mit einer Farbauswahl zwei Farben, den Farbraum und die Dominanz der einzelnen Farben auswählen.

Sie können sich color-mix() als einen bestimmten Moment in einem Farbverlauf vorstellen. Während ein Farbverlauf alle Schritte zeigt, die erforderlich sind, um von Blau zu Weiß zu gelangen, zeigt color-mix() nur einen Schritt. Es wird noch interessanter, wenn Sie Farbräume berücksichtigen und herausfinden, wie unterschiedlich der Mischfarbraum die Ergebnisse beeinflussen kann.

Weitere Informationen zu color-mix()

Syntax für relative Farben

Die relative Farbsyntax (RCS) ist eine ergänzende Methode zu color-mix() zum Erstellen von Farbvarianten. Es ist etwas leistungsfähiger als „color-mix()“, aber auch eine andere Strategie für die Arbeit mit Farben. color-mix() kann die Farbe Weiß hinzufügen, um eine Farbe aufzuhellen. RCS bietet genauen Zugriff auf den Helligkeitskanal und die Möglichkeit, calc() auf dem Kanal zu verwenden, um die Helligkeit programmatisch zu verringern oder zu erhöhen.

RCS-Screencast

RCS-Live-Demo

Ändern Sie die Farbe, ändern Sie die Szenen. Bei beiden wird die relative Farbsyntax verwendet, um Varianten der Grundfarbe zu erstellen.

Mit RCS können Sie relative und absolute Manipulationen an einer Farbe vornehmen. Bei einer relativen Änderung wird der aktuelle Wert für Sättigung oder Helligkeit mit calc() geändert. Bei einer absoluten Änderung ersetzen Sie einen Kanalwert durch einen völlig neuen Wert, z. B. indem Sie die Deckkraft auf 50 % festlegen. Diese Syntax bietet unter anderem nützliche Tools für Designs und Just-in-Time-Varianten.

Weitere Informationen zur Syntax für relative Farben

Responsives Design

Responsives Design wurde 2023 entwickelt. Dieses wegweisende Jahr hat neue Funktionen ermöglicht, die die Art und Weise, wie wir responsive Websites erstellen, völlig verändern, und ein neues Modell für komponentenbasiertes responsives Design eingeführt. Die Kombination aus Containerabfragen und :has() unterstützt Komponenten, die ein responsives und logisches Design haben, das auf der Größe des übergeordneten Elements sowie der Anwesenheit oder dem Status der untergeordneten Elemente basiert. Das bedeutet, dass Sie das Layout auf Seitenebene endlich vom Layout auf Komponentenebene trennen und die Logik einmal schreiben können, um die Komponente überall zu verwenden.

Containerabfragen skalieren

Unterstützte Browser

• 105
• 105
• 110
• 16

Quelle

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 in mehreren Layouts und in mehreren Ansichten gestaltet werden können. Containerabfragen nach Größe sind seit dem Valentinstag (14. Februar) in allen modernen Browsern stabil.

Wenn Sie diese Funktion verwenden möchten, müssen Sie zuerst das Element einrichten, für das Sie eine Abfrage stellen. Verwenden Sie dann, ähnlich wie bei einer Medienabfrage, @container mit den Größenparametern, um die Stile anzuwenden. Neben Containerabfragen erhalten Sie auch Containerabfragegrößen. In der folgenden Demo wird die Containerabfragegröße cqi (die die Größe des Inline-Containers darstellt) verwendet, um die Größe der Kartenüberschrift anzupassen.

@container Screencast

@container Demo

Weitere Informationen zur Verwendung von Containerabfragen

Abfragen für Stilcontainer

Unterstützte Browser

• 111
• 111
• x
• 18

Quelle

Stilabfragen wurden in Chrome 111 teilweise implementiert. Mit Stilabfragen können Sie derzeit den Wert benutzerdefinierter Properties für ein übergeordnetes Element abfragen, wenn Sie @container style() verwenden. Sie können beispielsweise prüfen, ob ein benutzerdefinierter Property-Wert vorhanden ist oder auf einen bestimmten Wert wie @container style(--rain: true) festgelegt ist.

Screenshot einer Stilabfrage

Demo für Stilabfragen

Ändern Sie die Farbe, ändern Sie die Szenen. Bei beiden wird die relative Farbsyntax verwendet, um Varianten der Grundfarbe zu erstellen.

Das klingt zwar ähnlich wie die Verwendung von Klassennamen in CSS, aber Stilabfragen haben einige Vorteile. Erstens: Mit Stilabfragen können Sie den Wert in CSS nach Bedarf für Pseudozustände aktualisieren. In zukünftigen Versionen der Implementierung können Sie auch Wertebereiche abfragen, um den angewendeten Stil zu ermitteln, z. B. style(60 <= --weather <= 70), und den Stil basierend auf Attribut/Wert-Paaren wie style(font-style: italic).

Weitere Informationen zur Verwendung von Designabfragen

:has()-Auswahl

Unterstützte Browser

• 105
• 105
• 121
• 15.4

Quelle

Seit fast 20 Jahren haben Entwickler einen „übergeordneten Selektor“ in CSS gefordert. Mit dem :has()-Auswahltool, das 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-Image als untergeordnetes Element haben.

:has() – Demoscreenshot

:has() – Live-Demo

CSS :has()-Demo: Karte ohne/mit Bild

Da :has() eine relative Selektorliste als Argument annimmt, können Sie viel mehr auswählen als das übergeordnete Element. Wenn Sie verschiedene CSS-Kombinatoren verwenden, ist es möglich, nicht nur den DOM-Baum nach oben zu gehen, sondern auch eine seitliche Auswahl zu treffen. Mit li:has(+ li:hover) wird beispielsweise das <li>-Element ausgewählt, das vor dem <li>-Element steht, auf das sich aktuell der Mauszeiger befindet.

:has() Screencast

:has()-Demo

CSS :has()-Demo: Dock

Weitere Informationen zum CSS-Selektor :has()

Mediaabfrage aktualisieren

Unterstützte Browser

• 113
• 113
• 102
• 17

Quelle

Mit der Medienabfrage update kannst du die Benutzeroberfläche an die Aktualisierungsrate eines Geräts anpassen. Die Funktion kann den Wert fast, slow oder none zurückgeben, der sich auf die Funktionen verschiedener Geräte bezieht.

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

Screencast aktualisieren

Demo aktualisieren

Wählen Sie eine Optionsschaltfläche aus, um einen Wert für die Aktualisierungsgeschwindigkeit zu simulieren und zu sehen, wie sich das auf die Ente auswirkt.

Weitere Informationen zu@media (Update)

Scripting Media Query

Unterstützte Browser

• 120
• 120
• 113
• 17

Quelle

Mit der Scripting-Medienabfrage lässt sich prüfen, ob JavaScript verfügbar ist. Das ist sehr gut für die progressive Verbesserung geeignet. Vor dieser Mediaabfrage wurde JavaScript mithilfe einer nojs-Klasse in der HTML-Datei erkannt und mit JavaScript wieder entfernt. Diese Scripts können entfernt werden, da CSS jetzt JavaScript erkennen und entsprechend anpassen kann.

Weitere Informationen zum Aktivieren und Deaktivieren von JavaScript auf einer Seite für Tests mit den Chrome-Entwicklertools

Scripting für Screencast

Scripting-Demo

Angenommen, Sie möchten auf einer Website das Design wechseln. Die Scripting-Mediaabfrage kann dabei helfen, den Wechsel gegen die Systemeinstellung auszuführen, da kein JavaScript verfügbar ist. Oder denken Sie an eine Schalterkomponente: Wenn JavaScript verfügbar ist, kann der Schalter durch Wischen mit einer Geste aktiviert und deaktiviert werden. Es gibt viele Möglichkeiten, die UX zu verbessern, wenn Scripting verfügbar ist, und gleichzeitig eine sinnvolle Grundlage zu bieten, wenn Scripting deaktiviert ist.

Weitere Informationen zu script

Medienabfrage mit reduzierter Transparenz

Unterstützte Browser

• 118
• 118
• 
• x

Quelle

Nicht undurchsichtige Oberflächen können bei verschiedenen Arten von Sehbeeinträchtigungen Kopfschmerzen verursachen oder erschweren. Aus diesem Grund haben Windows, macOS und iOS Systemeinstellungen, mit denen die Transparenz der Benutzeroberfläche reduziert oder entfernt werden kann. Diese Mediaabfrage für prefers-reduced-transparency passt gut zu den anderen Mediaabfragen für Präferenzen. So können Sie kreativ sein und gleichzeitig Anpassungen für Nutzer vornehmen.

Screencast zu reduzierter Transparenz

Demo: Verringerte Transparenz

In einigen Fällen können Sie ein alternatives Layout angeben, bei dem keine Inhalte über andere gelegt werden. In anderen Fällen kann die Deckkraft einer Farbe so eingestellt werden, dass sie blickdicht oder fast blickdicht ist. Im folgenden Blogpost finden Sie weitere inspirierende Demos, die sich an die Nutzereinstellungen anpassen. Sehen Sie sich diese an, wenn Sie wissen möchten, wann diese Mediaabfrage sinnvoll ist.

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

Interaktion

Interaktion ist ein Eckpfeiler der digitalen Welt. Sie hilft Nutzenden, Feedback dazu zu erhalten, was sie angeklickt haben und wo sie sich in einem virtuellen Raum befinden. In diesem Jahr wurden viele spannende Funktionen eingeführt, mit denen sich Interaktionen einfacher erstellen und implementieren lassen. So können Nutzer die Website reibungslos nutzen und die Weberfahrung wird optimiert.

Übergänge ansehen

Unterstützte Browser

• 111
• 111
• x
• 18

Quelle

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 Seitenzuständen Ihrer Single-Page-Anwendung erstellen. Diese Übergänge können sich auf eine ganze Seite oder auf kleinere Elemente auf einer Seite beziehen, z. B. das Hinzufügen oder Entfernen eines neuen Elements aus einer Liste.

Den Kern der View Transitions API bildet die document.startViewTranstion-Funktion. Übergeben Sie eine Funktion, die das DOM auf den neuen Status aktualisiert, und die API erledigt alles für Sie. Dazu wird ein Vorher-Nachher-Snapshot erstellt und dann zwischen den beiden gewechselt. Mit CSS können Sie festlegen, was erfasst wird, und optional anpassen, wie diese Snapshots animiert werden sollen.

VT-Screencast

VT-Demo

Demo zu Übergängen ansehen

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

Lineare Ease-Funktion

Unterstützte Browser

• 113
• 113
• 112
• 17:2

Lassen Sie sich vom Namen dieser Funktion nicht täuschen. Mit der Funktion linear() (nicht zu verwechseln mit dem Schlüsselwort linear) können Sie auf einfache Weise komplexe Ease-In-/Ease-Out-Funktionen erstellen. Allerdings geht dabei etwas Präzision verloren.

Vor linear(), das in Chrome 113 verfügbar war, war es nicht möglich, Bounce- oder Frühlingseffekte in CSS zu erstellen. Mit linear() lassen sich diese Übergänge approximieren, indem sie in eine Reihe von Punkten vereinfacht und dann linear zwischen diesen Punkten interpoliert werden.

Die ursprüngliche Sprungkurve in Blau wird durch eine Reihe von Schlüsselpunkten vereinfacht, die grün dargestellt sind. Die linear()-Funktion verwendet diese Punkte und interpoliert linear zwischen ihnen.

Screencast mit linearer Überblendung

Demo für lineare Übergänge

CSS linear()-Demo

Weitere Informationen zu linear() Verwenden Sie den Generator für lineare Übergänge, um linear()-Kurven zu erstellen.

Scroll-Ende

Unterstützte Browser

• 114
• 114
• 109
• x

Quelle

Viele Oberflächen umfassen Scroll-Interaktionen. Manchmal muss die Oberfläche Informationen synchronisieren, die für die aktuelle Scrollposition relevant sind, oder Daten basierend auf dem aktuellen Status abrufen. Vor dem scrollend-Ereignis musste eine falsche Zeitüberschreitungsmethode verwendet werden, die ausgelöst werden konnte, während der Finger noch auf dem Bildschirm war. Mit dem Ereignis scrollend können Sie ein perfekt getimtes Scrollereignis erfassen, das erkennt, ob ein Nutzer noch in der Mitte einer Geste ist oder nicht.

Screencast gescrollt

Gescrollte Demo

Das war wichtig für den Browser, da JavaScript die Präsenz eines Fingers auf dem Display beim Scrollen nicht verfolgen kann. Die Informationen sind einfach nicht verfügbar. Code für fehlerhafte Versuche, das Ende des Scrollens zu ermitteln, kann jetzt gelöscht und durch ein Ereignis mit hoher Präzision ersetzt werden, das dem Browser gehört.

Weitere Informationen zu scrollend

Scroll-basierte Animationen

Unterstützte Browser

• 115
• 115
• 
• x

Quelle

Scrollangetriebene Animationen sind eine spannende Funktion, die seit Chrome 115 verfügbar ist. So 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 nach oben und unten oder bei einem horizontalen Scroller nach links und rechts scrollen, wird die verknüpfte Animation direkt vor- und zurückgespult.

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 nach und nach sichtbar.

SDA-Screencast

SDA-Demo

Demo zu scrollbaren CSS-Animationen: Scroll-Zeitachse

Mit einer ViewTimeline können Sie ein Element erfassen, während es den Scrollport überschreitet. Das funktioniert ähnlich wie bei IntersectionObserver, der ein Element verfolgt. In der folgenden Demo wird jedes Bild von dem Moment an angezeigt, in dem es den Scrollbereich betritt, bis es sich in der Mitte befindet.

SDA-Demo-Screencast

SDA-Livedemo

Demo für scrollbasierte CSS-Animationen: Zeitachse ansehen

Da scrollbare 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 über den Hauptthread auszuführen. Mit nur wenigen zusätzlichen Codezeilen können Sie jetzt flüssige, vom Scrollen gesteuerte Animationen im Hauptthread ausführen. Was gibt es da nicht zu mögen?

Weitere Informationen zu scrollbasierten Animationen finden Sie in diesem Artikel oder auf der Seite „scroll-driven-animations.style“, auf der viele Demos zu sehen sind.

Anhang zur verzögerten Zeitachse

Unterstützte Browser

• 116
• 116
• x
• x

Quelle

Beim Anwenden einer Scroll-gesteuerten Animation über CSS geht der Suchmechanismus zum Finden des steuernden Scroller immer den DOM-Baum hoch, sodass dieser auf Scroll-Vorgänger beschränkt ist. Häufig ist das zu animierende Element jedoch kein untergeordnetes Element des Scrollers, sondern ein Element, das sich in einer völlig anderen Unterstruktur befindet.

Wenn das animierte Element eine benannte Scroll-Zeitachse eines nicht übergeordneten Elements finden soll, verwenden Sie die timeline-scope-Eigenschaft auf einem gemeinsamen übergeordneten Element. So kann die definierte scroll-timeline oder view-timeline mit diesem Namen angehängt werden, was ihr einen größeren Umfang verleiht. So kann jedes untergeordnete Element dieses übergeordneten Elements die Zeitachse mit diesem Namen verwenden.

Wenn timeline-scope als gemeinsam genutztes übergeordnetes Element deklariert ist, kann das im Scroller deklarierte scroll-timeline von dem Element gefunden werden, das es als animation-timeline verwendet.

Demo-Screencast

Live-Demo

Demo für scrollgesteuerte CSS-Animationen: Verzögerte Zeitachse

Weitere Informationen zu timeline-scope

Animationen für diskrete Eigenschaften

Eine weitere neue Funktion 2023 ist die Möglichkeit, diskrete Animationen zu erstellen, z. B. von und zu display: none. Ab Chrome 116 können Sie display und content-visibility in Keyframe-Regeln verwenden. Sie können auch jede beliebige Eigenschaft am 50-%-Punkt statt am 0-%-Punkt ändern. Das geht mit der transition-behavior-Property und dem Schlüsselwort allow-discrete oder als Kurzform in der transition-Property.

Diskrete Animation Screencast

Diskrete Animation Demo

Weitere Informationen zum Wechsel von diskreten Animationen

@starting-style

Unterstützte Browser

• 117
• 117
• 129
• 17.5

Quelle

Die CSS-Regel @starting-style basiert auf neuen Webfunktionen für die Animation von display: none zu und von display: none. Mit dieser Regel können Sie einem Element einen Stil vor dem Öffnen zuweisen, den der Browser abrufen kann, bevor das Element auf der Seite geöffnet wird. Dies ist sehr nützlich für Eintrittsanimationen und für die Animation von Elementen wie Pop-ups oder Dialogfeldern. Es kann auch nützlich sein, wenn Sie ein Element erstellen und es animieren möchten. Im folgenden Beispiel wird ein popover-Attribut (siehe nächster Abschnitt) von außerhalb des Darstellungsbereichs gleichmäßig in die oberste Ebene verschoben.

@starting-style Screencast

Demo für @starting-style

Weitere Informationen zu @starting-style und anderen Eintragsanimationen

Overlay

Unterstützte Browser

• 117
• 117
• x
• x

Quelle

Die neue CSS-Eigenschaft overlay kann dem Übergang hinzugefügt werden, damit Elemente mit Stilen der obersten Ebene wie popover und dialog reibungslos aus der obersten Ebene animiert werden können. Wenn du kein Übergangs-Overlay verwendest, wird dein Element sofort wieder zugeschnitten, umgewandelt und verdeckt und der Übergang wird nicht mehr angezeigt. Ähnlich kann mit overlay eine reibungslose Ausblendung von ::backdrop erreicht werden, wenn es einem Element der obersten Ebene hinzugefügt wird.

Overlay-Screencast

Overlay (Live-Demo)

Weitere Informationen zu Overlays und anderen Ausstiegsanimationen

Komponenten

2023 war ein wichtiges Jahr für die Kombination von Stil und HTML-Komponenten. popover wurde eingeführt und es wurde viel an der Positionierung von Ankern und der Zukunft des Stylings von Drop-down-Menüs gearbeitet. Mit diesen Komponenten lassen sich gängige UI-Muster einfacher erstellen, ohne auf zusätzliche Bibliotheken zurückgreifen oder jedes Mal eigene Systeme zur Zustandsverwaltung von Grund auf neu erstellen zu müssen.

Popover

Unterstützte Browser

• 114
• 114
• 125
• 17

Quelle

Mit der Popover API können Sie Elemente erstellen, die über dem Rest der Seite platziert werden. Dazu gehören Menüs, Auswahlmöglichkeiten und Kurzinfos. Sie können ein einfaches Pop-over erstellen, indem Sie dem eingeblendeten Element das Attribut popover und ein id hinzufügen und das Attribut id mithilfe von popovertarget="my-popover" mit einer aufrufenden Schaltfläche verbinden. Die Popover API unterstützt:

• Beförderung in die oberste Schicht. Pop-ups werden auf einer separaten Ebene über dem Rest der Seite angezeigt, sodass Sie nicht mit dem Z-Index herumspielen müssen.
• Lichtabschaltung: Wenn Sie außerhalb des Pop-over-Bereichs klicken, wird das Pop-over geschlossen und der Fokus zurückgesetzt.
• Standardmäßige Fokusverwaltung Wenn Sie das Pop-up öffnen, wird der nächste Markierungsstopp im Pop-up angezeigt.
• Barrierefreie Tastaturbindungen Wenn Sie die Taste esc drücken oder das Pop-over zweimal antippen, wird es geschlossen und der Fokus wechselt zurück.
• Zugängliche Komponentenbindungen Semantische Verknüpfung eines Pop-up-Elements mit einem Pop-up-Trigger

Pop-over-Screencast

Pop-over (Live-Demo)

Horizontale Linien in Auswahl

Eine weitere kleine Änderung an HTML, die dieses Jahr in Chrome und Safari eingeführt wurde, ist die Möglichkeit, horizontale Linienelemente (<hr>-Tags) in <select>-Elemente einzufügen, um Inhalte visuell aufzuteilen. Bisher wurde ein <hr>-Tag in einem Auswahl-Tag nicht gerendert. Dieses Jahr wird diese Funktion jedoch sowohl in Safari als auch in Chrome unterstützt, wodurch Inhalte innerhalb von <select>-Elementen besser voneinander getrennt werden können.

Screenshot auswählen

„Live-Demo“ auswählen

Weitere Informationen zur Verwendung von hr in Auswahl

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

Unterstützte Browser

• 119
• 119
• 88
• 16,5

Quelle

:user-valid und :user-invalid sind in diesem Jahr in allen Browsern stabil und verhalten sich ähnlich wie die Pseudoklassen :valid und :invalid, stimmen aber erst dann mit einem Formularsteuerelement überein, wenn ein Nutzer signifikant mit der Eingabe interagiert hat. Ein Pflichtfeld, das leer ist, wird mit :invalid abgeglichen, 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 einen ungültigen Status belassen hat.

Mit diesen neuen Auswahlelementen müssen Sie keinen zustandsabhängigen Code mehr schreiben, um die Eingaben eines Nutzers im Blick zu behalten.

:nutzer-* Screencast

:user-* Live-Demo

Weitere Informationen zu den Pseudoelementen für die Formularvalidierung „user-*“

Exklusives Akkordeon

Unterstützte Browser

• 120
• 120
• 130
• 17.2

Ein gängiges UI-Muster im Web ist die Akkordeonkomponente. Um dieses Muster zu implementieren, kombinierst du einige <details>-Elemente. Oft werden sie visuell gruppiert, um anzuzeigen, dass sie zusammengehören.

In Chrome 120 wird das name-Attribut für <details>-Elemente unterstützt. 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.

Exklusive Akkordeon-Demo

Die <details>-Elemente, die zu einem ausschließenden Akkordeon gehören, müssen nicht unbedingt Geschwister sein. Sie können im Dokument verteilt sein.

Schlusswort

CSS hat in den letzten Jahren eine Renaissance erlebt, insbesondere 2023. Wenn Sie neu bei CSS sind oder einfach nur Ihr Wissen zu den Grundlagen auffrischen möchten, schauen Sie sich unseren kostenlosen Kurs CSS lernen sowie die anderen kostenlosen Kurse auf web.dev an.

Wir wünschen Ihnen frohe Feiertage und hoffen, dass Sie bald die Gelegenheit haben, einige dieser brillanten neuen CSS- und UI-Funktionen in Ihre Arbeit einfließen zu lassen.

Ihr Chrome UI DevRel-Team,

Una Kravets

Bramus

Adam Argyle