CSS-Wrapping: 2023!

CSS-Umbruch-Header

CSS Wrapped: 2023

Direkt zum Inhalt:

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

Von #Interop2023 bis hin zu vielen neuen Landingpages im Bereich CSS und UI, die Funktionen ermöglichen, die Entwickler auf der Webplattform einst für unmöglich hielten. 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.

Architektonische Grundlagen

Beginnen wir mit den Aktualisierungen der CSS-Sprache und -Funktionen. Diese Funktionen sind die Grundlage für die Erstellung und Organisation von Stilen und bieten Entwicklern große Möglichkeiten.

Trigonometrische Funktionen

Unterstützte Browser

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 108.
  • Safari: 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 sehr praktisch für Animationen und Layouts. So ist es jetzt beispielsweise viel einfacher, Elemente in einem Kreis um einen ausgewählten Mittelpunkt anzuordnen.

Demo zu trigonometrischen Funktionen

Weitere Informationen zu trigonometrischen Funktionen in CSS

Komplexe Auswahl des n-ten Elements

Unterstützte Browser

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 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

  • Chrome: 118.
  • Edge: 118.
  • Firefox: hinter einer Flagge.
  • Safari: 17.4.

Quelle

In Chrome 118 wurde die Unterstützung für @scope hinzugefügt, eine At-Rule, mit der Sie die Auswahlabgleiche auf einen bestimmten untergeordneten Knoten des Dokuments beschränken können. 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

Referenzscreenshot für die @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

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 117.
  • Safari: 17.2.

Quelle

Vor dem Verschachteln musste jeder Selektor separat deklariert werden. Dies führt zu Wiederholungen, einem großen Stylesheet-Volumen und einer unübersichtlichen Autorenansicht. Jetzt können Auswählte Elemente mit zugehörigen Stilregeln fortgesetzt werden, die darin 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 */
}

Verschachtelung von Screencasts

Verschachtelung (Live-Demo)

Auswahl für die lockere Verschachtelung ändern, um den Gewinner des Rennens zu ermitteln

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. Diese Einschränkung wurde jedoch durch ein Update der Syntax für das Verschachteln aufgehoben.

Weitere Informationen zum Verschachteln

Unterraster

Unterstützte Browser

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 71.
  • Safari: 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

Kopfzeile, Textkörper und Fußzeilen werden an die dynamischen Größen ihrer Geschwisterelemente 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 einem untergeordneten Raster kann das Layout an die Inhalte angepasst werden.

Weitere Informationen zum 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 unpassenden Zeilenlängen – jetzt wird die Typografie vorhersehbarer.

Anfangsbuchstabe

Unterstützte Browser

  • Chrome: 110.
  • Edge: 110.
  • Firefox: Nicht unterstützt.
  • Safari: 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. Das Attribut akzeptiert zwei Argumente: das erste gibt an, wie weit der Buchstabe in den entsprechenden Absatz eingerückt werden soll, und das zweite, wie weit er darüber hinausragen soll. Sie können auch eine Kombination aus beiden verwenden, wie in der folgenden Demo.

Screenshot mit Anfangsbuchstaben

Screenshot der Demo für Anfangsbuchstaben

Demo für Anfangsbuchstaben

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

Weitere Informationen zu „initial-letter“

text-wrap: balance and pretty

Als Entwickler kennen Sie die endgültige Größe, Schriftgröße oder sogar die Sprache einer Überschrift oder eines Absatzes nicht. Alle Variablen, die für eine effektive und ästhetische Textumbruchbehandlung 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 bisher manuell erledigt. Es ist erstaunlich, dass diese Aufgabe jetzt dem Browser zugewiesen werden kann und 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 Farbe 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

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Quelle

Unterstützte Browser

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 15.

Quelle

Von der Hardware über die Software bis hin zum CSS und den blinkenden LEDs: Es kann viel Arbeit kosten, Farben so darzustellen, dass sie für das menschliche Auge gut sichtbar sind. 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. – 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() kombinieren – 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

color-mix-Funktion

Unterstützte Browser

  • Chrome: 111.
  • Edge: 111.
  • Firefox: 113.
  • Safari: 16.2.

Quelle

Das Mischen von Farben ist eine klassische Aufgabe und 2023 kann das auch mit CSS erledigt werden. 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 an. 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 hilfreiche Tools für Designs und Just-in-Time-Varianten.

Weitere Informationen zur Syntax für relative Farben

Responsives Design

Responsives Design wurde 2023 entwickelt. In diesem wegweisenden Jahr wurden neue Funktionen eingeführt, die die Art und Weise, wie wir responsive Websites erstellen, völlig verändern. Außerdem wurde 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

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 110.
  • Safari: 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 ein Begrenzungselement für das Element einrichten, das Sie abfragen möchten. Verwenden Sie dann ähnlich wie bei einer Medienabfrage @container mit den Größenparametern, um die Stile anzuwenden. Neben Containerabfragen sehen Sie auch die Größe der Containerabfragen. In der folgenden Demo wird die Größe der Containerabfrage cqi (die Größe des Inline-Containers) verwendet, um die Größe des Kartenheaders festzulegen.

@container Screencast

@container Demo

Weitere Informationen zur Verwendung von Containerabfragen

Abfragen für Stilcontainer

Unterstützte Browser

  • Chrome: 111.
  • Edge: 111.
  • Firefox: Nicht unterstützt.
  • Safari: 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 der Stilabfrage

Demo-Screenshot für Stilcontainerabfragen für Wetterkarten

Demo für Stilabfrage

Ä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

  • Chrome: 105.
  • Edge: 105.
  • Firefox: 121.
  • Safari: 15.4.

Quelle

Seit fast 20 Jahren haben Entwickler einen „übergeordneten Selektor“ in CSS gefordert. Mit der Auswahl :has(), die 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

Referenzscreenshot für die Demo von :has()

:has() – Live-Demo

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

Da :has() eine relative Selektorliste als Argument akzeptiert, können Sie viel mehr als nur das übergeordnete Element auswählen. Mit verschiedenen CSS-Kombinatoren können Sie nicht nur den DOM-Baum nach oben durchsuchen, sondern auch seitliche Auswahlen vornehmen. Mit li:has(+ li:hover) wird beispielsweise das <li>-Element ausgewählt, das dem aktuell angetippten <li>-Element vorausgeht.

:has() Screencast

:has()-Demo

CSS :has()-Demo: Dock

Weitere Informationen zum CSS-Selektor :has()

Mediaabfrage aktualisieren

Unterstützte Browser

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 102.
  • Safari: 17.

Quelle

Mit der update-Medienabfrage können Sie die Benutzeroberfläche an die Bildwiederholrate 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 entwerfen, haben wahrscheinlich eine hohe Bildwiederholrate. 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 reduzieren.

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

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 113.
  • Safari: 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 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 gute 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

  • Chrome: 118.
  • Edge: 118.
  • Firefox: hinter einer Flagge.
  • Safari: Nicht unterstützt.

Quelle

Nicht opake Oberflächen können bei verschiedenen Arten von Sehschwäche Kopfschmerzen verursachen oder die Sicht 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 mit 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 Nutzern, Feedback dazu zu erhalten, worauf sie geklickt 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

  • Chrome: 111.
  • Edge: 111.
  • Firefox: Nicht unterstützt.
  • Safari: 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.

Die document.startViewTranstion-Funktion ist der Kern der View Transitions API. Übergeben Sie eine Funktion, die das DOM auf den neuen Status aktualisiert, und die API erledigt alles für Sie. Dazu werden ein Vorher- und ein Nachher-Snapshot aufgenommen und dann zwischen den beiden Bildern hin- und hergewechselt. 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

  • Chrome: 113.
  • Edge: 113.
  • Firefox: 112.
  • Safari: 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 eingeführt wurde, war es nicht möglich, in CSS Sprung- oder Federeffekte 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.

Diagramm einer Sprung-Entschleunigungskurve mit mehreren hinzugefügten Punkten
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

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 109.
  • Safari: Nicht unterstützt.

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 mussten Sie eine ungenaue Zeitüberschreitungsmethode verwenden, die ausgelöst werden konnte, während sich der Finger des Nutzers noch auf dem Display befand. 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.

Scrollender Screencast

Scrollende 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, den Scrollendepunkt 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

  • Chrome: 115.
  • Edge: 115.
  • Firefox: hinter einer Flagge.
  • Safari: Nicht unterstützt.

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 für scrollbasierte CSS-Animationen: Scrollzeitachse

Mit einer Ansichtszeitachse können Sie ein Element verfolgen, während es den Scrollbereich durchläuft. 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 scrollgesteuerten Animationen finden Sie in diesem Artikel oder in scroll-driven-animations.style, das viele Demos enthält.

Anhang zur verzögerten Zeitachse

Unterstützte Browser

  • Chrome: 116.
  • Edge: 116.
  • Firefox: Nicht unterstützt.
  • Safari: Nicht unterstützt.

Quelle

Wenn Sie eine scrollgesteuerte Animation über CSS anwenden, durchsucht der Suchmechanismus zum Finden des steuernden Scrollers immer den DOM-Baum nach oben, sodass die Animation nur auf die Scrollvorfahren beschränkt ist. Sehr oft ist das zu animierende Element jedoch kein untergeordnetes Element des Scrollers, sondern ein Element, das sich in einem ganz anderen untergeordneten Knoten 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.

Visualisierung eines DOM-Unterbaums mit Zeitachse, die für ein gemeinsames übergeordnetes Element verwendet wird
Wenn timeline-scope im gemeinsamen übergeordneten Element deklariert ist, kann das Element, das es als animation-timeline verwendet, das im Scroller deklarierte scroll-timeline finden.

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 diskrete Property bei 50% statt bei 0% ä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 zu Übergängen zwischen einzelnen Animationen

@starting-style

Unterstützte Browser

  • Chrome: 117.
  • Edge: 117.
  • Firefox: 129.
  • Safari: 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 stufenlos in den Blick und in die oberste Ebene animiert.

@starting-style Screencast

Demo für @starting-style

Weitere Informationen zu@starting-style und anderen Eintrittsanimationen

Overlay

Unterstützte Browser

  • Chrome: 117.
  • Edge: 117.
  • Firefox: Nicht unterstützt.
  • Safari: Nicht unterstützt.

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 Overlay für die Übergänge verwendest, wird dein Element sofort wieder zugeschnitten, transformiert und verdeckt. Der Übergang ist dann nicht zu sehen. Ähnlich ermöglicht overlay eine reibungslose Ausblendung von ::backdrop, 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 dass Sie auf zusätzliche Bibliotheken zurückgreifen oder jedes Mal von Grund auf eigene Systeme zur Zustandsverwaltung entwickeln müssen.

Pop-up

Unterstützte Browser

  • Chrome: 114.
  • Edge: 114.
  • Firefox: 125.
  • Safari: 17.

Quelle

Mit der Popover API können Sie Elemente erstellen, die über dem Rest der Seite liegen. Dazu gehören Menüs, Auswahlmöglichkeiten und Kurzinfos. Sie können ein einfaches Pop-over erstellen, indem Sie dem Pop-over-Element das popover-Attribut und ein id hinzufügen und das id-Attribut mit einer Auslöseschaltfläche über popovertarget="my-popover" verknüpfen. 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.
  • Funktion zum Schließen des Pop-ups 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 Tastaturbelegungen Wenn Sie die Taste esc drücken oder das Pop-up 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. In diesem Jahr unterstützen jedoch sowohl Safari als auch Chrome diese Funktion, was eine bessere Trennung von Inhalten innerhalb von <select>-Elementen ermöglicht.

Screenshot auswählen

Screenshot von HR in der Auswahl mit einem hellen und einem dunklen Design in Chrome

„Live-Demo“ auswählen

Weitere Informationen zur Verwendung von hr in Auswahl

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

Unterstützte Browser

  • Chrome: 119.
  • Edge: 119.
  • Firefox: 88.
  • Safari: 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. Sie werden einem Formularkontrollelement jedoch erst dann zugeordnet, 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. Das gleiche Steuerelement stimmt erst mit :user-invalid überein, wenn der Nutzer die Eingabe geändert und in einem 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.

:user-* Screencast

:user-* Live-Demo

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

Exklusives Akkordeon

Unterstützte Browser

  • Chrome: 120.
  • Edge: 120.
  • Firefox: 130.
  • Safari: 17.2.

Ein gängiges UI-Muster im Web ist die Akkordeonkomponente. Um dieses Muster zu implementieren, kombinieren Sie einige <details>-Elemente und gruppieren sie oft visuell, 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 mit CSS noch nicht vertraut sind oder sich einfach nur die Grundlagen in Erinnerung rufen möchten, sehen Sie sich unseren kostenlosen Kurs CSS lernen und 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