CSS-Wrapping: 2023!

Umschlossener CSS-Header

CSS Wrapped: 2023!

Direkt zum Inhalt:

Wow! 2023 war ein erfolgreiches Jahr für Preisvergleichsportale.

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. Heute unterstützt jeder moderne Browser Containerabfragen, Subgrid, den :has()-Selektor und eine Fülle von neuen Farbräumen und Funktionen. In Chrome werden nur für CSS spezifische scrollgesteuerte Animationen und die flüssige Animation zwischen Webansichten mit Ansichtsübergängen unterstützt. Außerdem gibt es so viele neue Primitive, die für eine bessere Entwicklungsumgebung wie CSS-Verschachtelungen und Bereichsbezogene Stile verfügbar sind.

Was für ein Jahr! Zum Abschluss dieses wichtigen Jahres möchten wir die harte Arbeit von Browserentwicklern und der Web-Community würdigen, die das alles möglich gemacht haben.

Architekturgrundlagen

Beginnen wir mit den Aktualisierungen der wichtigsten 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

  • Chrome: 111. <ph type="x-smartling-placeholder">
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: 108 <ph type="x-smartling-placeholder">
  • Safari: 15.4 <ph type="x-smartling-placeholder">

Quelle

In Chrome 111 werden jetzt die trigonometrischen Funktionen sin(), cos(), tan(), asin(), acos(), atan() und atan2() unterstützt, sodass sie in allen wichtigen Suchmaschinen verfügbar sind. Diese Funktionen sind bei Animationen und Layout sehr praktisch. 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 den trigonometrischen Funktionen in CSS

Komplexe n-*-Auswahl

Unterstützte Browser

  • Chrome: 111. <ph type="x-smartling-placeholder">
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: 113 <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Mit dem Pseudoklassenselektor :nth-child() ist es möglich, Elemente im DOM anhand ihres Index auszuwählen. Mit der An+B-Mikrosyntax können Sie genau steuern, welche Elemente ausgewählt werden sollen.

Standardmäßig berücksichtigen die :nth-*()-Pseudoen alle untergeordneten Elemente. Ab Chrome 111 können Sie optional eine Auswahlliste an :nth-child() und :nth-last-child() übergeben. Auf diese Weise können Sie die Liste der untergeordneten Elemente vorfiltern, bevor An+B die entsprechenden Aktionen durchführt.

In der folgenden Demo wird die 3n+1-Logik nur auf die kleinen Puppen angewendet, indem sie mit of .small vorgefiltert werden. Verwenden Sie die Drop-down-Menüs, um die verwendete Auswahl dynamisch zu ändern.

Komplexe Demo zur n-ten*-Auswahl

Weitere Informationen zur komplexen n-*-Auswahl

Ebene

Unterstützte Browser

  • Chrome: 118. <ph type="x-smartling-placeholder">
  • Edge: 118. <ph type="x-smartling-placeholder">
  • Firefox: hinter einer Flagge.
  • Safari: 17.4. <ph type="x-smartling-placeholder">

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 Bereichsstilen können Sie ganz genau angeben, welche Elemente Sie auswählen möchten, ohne übermäßig spezifische Selektoren zu schreiben oder diese eng mit der DOM-Struktur zu verknüpfen.

Eine Teilstruktur eines Bereichs wird durch einen Bereichsstamm (die obere Begrenzung) und eine optionale Umfangsgrenze (die Untergrenze) definiert.

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

Stilregeln, die in einem Bereichsblock platziert werden, zielen nur auf Elemente innerhalb der ausgeschnittenen Unterstruktur ab. Die folgende Stilregel auf einen Umfang zielt beispielsweise nur auf <img>-Elemente ab, die sich zwischen dem .card-Element und jeder verschachtelten Komponente befinden, die dem [data-component]-Selektor entspricht.

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

In der folgenden Demo stimmen die <img>-Elemente in der Karussellkomponente aufgrund des angewendeten Umfangs nicht überein.

Screenshot des Bereichs-Demos

Referenz-Screenshot für die @scope-Demo

Scope-Live-Demo

Preisvergleichsportal-@scope-Demo

Weitere Informationen zu @scope finden Sie im Artikel Mit @scope die Reichweite von Selektoren beschränken. In diesem Artikel erfahren Sie mehr über den :scope-Selektor, wie mit der Spezifität umgegangen wird, welche Bereiche vorläufig nicht verfügbar sind und wie sich @scope auf die Kaskade auswirkt.

Verschachtelung

Unterstützte Browser

  • Chrome: 120. <ph type="x-smartling-placeholder">
  • Edge: 120. <ph type="x-smartling-placeholder">
  • Firefox: 117 <ph type="x-smartling-placeholder">
  • Safari: 17.2 <ph type="x-smartling-placeholder">

Quelle

Vor der Verschachtelung musste jeder Selektor explizit und separat deklariert werden. Dies führt zu Wiederholungen, zu großen Mengen an Stylesheets und zu einer unübersichtlichen Erstellungserfahrung. 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 ermitteln

Durch Verschachtelung kann die Gewichtung eines Stylesheets reduziert, der Aufwand für wiederholte Selektoren reduziert 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 zu Verschachtelungen

Subgrid

Unterstützte Browser

  • Chrome: 117. <ph type="x-smartling-placeholder">
  • Edge: 117. <ph type="x-smartling-placeholder">
  • Firefox: 71. <ph type="x-smartling-placeholder">
  • Safari: 16. <ph type="x-smartling-placeholder">

Quelle

Mit der CSS-Datei subgrid kannst du komplexere Raster mit einer besseren Ausrichtung zwischen untergeordneten Layouts erstellen. Sie ermöglicht einem Raster, das sich in einem anderen Raster befindet, die Zeilen und Spalten des äußeren Rasters als eigenes zu übernehmen, indem subgrid als Wert für Rasterzeilen oder -spalten verwendet wird.

Subgrid-Screencast

Subgrid-Live-Demo

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

Subgrid ist besonders nützlich, um gleichgeordnete Elemente an den dynamischen Inhalten des jeweils anderen auszurichten. Das entlastet Texter, UX-Schreibende und Übersetzer von dem Versuch, „passende“ Projekttexte zu erstellen. in das Layout einfügen. Mit Subgrid kann das Layout an den Inhalt angepasst werden.

Weitere Informationen zu Subgrid

Typografie

Bei der Webtypografie wurden 2023 einige wichtige Aktualisierungen vorgenommen. Eine besonders schöne progressive Verbesserung ist die Eigenschaft text-wrap. Diese Eigenschaft ermöglicht die Anpassung typografischer Layouts im Browser, ohne dass zusätzliche Skripte erforderlich sind. Schluss mit komplizierten Linienlängen und einer besser vorhersehbaren Typografie!

Anfangsbuchstabe

Unterstützte Browser

  • Chrome: 110. <ph type="x-smartling-placeholder">
  • Edge: 110. <ph type="x-smartling-placeholder">
  • Firefox: nicht unterstützt <ph type="x-smartling-placeholder">
  • Safari: 9. <ph type="x-smartling-placeholder">

Quelle

Die initial-letter-Property wird zu Beginn des Jahres in Chrome 110 eingeführt. Sie ist eine kleine, aber leistungsstarke CSS-Funktion, mit der die Gestaltung der Anfangsbuchstaben festgelegt wird. Buchstaben können entweder entfernt oder angehoben werden. 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 sogar eine Kombination aus beiden erstellen, wie in der folgenden Demo gezeigt.

Screenshot mit Anfangsbuchstabe

Screenshot der Demo für den ersten Buchstaben

Demo des ersten Briefs

Ändere die Werte von initial-letter für das Pseudoelement ::first-letter, damit es sich ändert.

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 den zugewiesenen Bereich kennt, eignet er sich hervorragend für erweitertes und qualitativ hochwertiges Textlayout.

Hier kommen zwei neue Verfahren für den Textumbruch ins Spiel: balance und pretty. Der Wert balance versucht, einen harmonischen Textblock zu erstellen, während pretty versucht, Verwaisen zu vermeiden und für eine gesunde Bindestrichsetzung zu sorgen. Beide Aufgaben wurden traditionell von Hand erledigt und es ist toll, wenn der Browser die Aufgabe übernimmt und die Übersetzung für jede Sprache funktioniert.

Screencast mit Textumbruch

Live-Demo mit Textumbruch

In der folgenden Demo können Sie die Auswirkungen von balance und pretty auf eine Überschrift und einen Absatz durch Ziehen des Schiebereglers vergleichen. Versuche, die Demo in eine andere Sprache zu übersetzen.

Weitere Informationen zu Textumbruch: Balance

Farbe

2023 war das Jahr der Farben für die Webplattform. Mit den neuen Farbräumen und Funktionen, die dynamische Farbdesigns ermöglichen, sind Ihre Nutzer nicht mehr davon abgehalten, die lebendigen, üppigen Designs zu kreieren, die Ihre Nutzer verdienen. Außerdem können Sie sie individuell anpassen.

HD-Farbräume (Farbstufe 4)

Unterstützte Browser

  • Chrome: 111. <ph type="x-smartling-placeholder">
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: 113 <ph type="x-smartling-placeholder">
  • Safari: 15. <ph type="x-smartling-placeholder">

Quelle

Unterstützte Browser

  • Chrome: 111. <ph type="x-smartling-placeholder">
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: 113 <ph type="x-smartling-placeholder">
  • Safari: 15. <ph type="x-smartling-placeholder">

Quelle

Von der Hardware über die Software bis hin zu den blinkenden Lichtern Es kann eine Menge Arbeit für unsere Computer erfordern, Farben so gut darzustellen, wie unser menschliches Auge sieht. 2023 haben wir neue Farben, mehr Farben, neue Farbräume, Farbfunktionen und neue Funktionen eingeführt.

Mit CSS und Farben ist es jetzt möglich: – Prüfe, ob die Bildschirmhardware des Nutzers in der Lage ist, HDR-Farben mit weitreichenden Farben abzubilden. - Ü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. – Farbverläufe mit HDR-Farben, – Farbverläufe in alternativen Farbräumen interpolieren. – Kombiniere Farben mit color-mix(). – Farbvarianten mit relativer Farbsyntax erstellen.

Color 4-Screencast

Demo zu Farbe 4

In der folgenden Demo können Sie die Auswirkungen von „balance“ und „pretty“ auf eine Überschrift und einen Absatz durch Ziehen des Schiebereglers vergleichen. Versuche, die Demo in eine andere Sprache zu übersetzen.

Weitere Informationen zu Farbe 4 und Farbräumen

Funktion „Farbmix“

Unterstützte Browser

  • Chrome: 111. <ph type="x-smartling-placeholder">
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: 113 <ph type="x-smartling-placeholder">
  • Safari: 16.2 <ph type="x-smartling-placeholder">

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 zu einer Farbe, sondern auch Transparenz mischen und all dies in einem beliebigen Farbraum Ihrer Wahl tun. Es ist gleichzeitig eine einfache Farbfunktion und eine erweiterte Farbfunktion.

color-mix() Screencast

color-mix()-Demo

Im Demomodus kannst du über eine Farbauswahl zwei Farben, den Farbraum und den Anteil jeder Farbe auswählen, der in der Mischung dominant sein soll.

Sie können sich color-mix() als einen Moment aus einem Farbverlauf vorstellen. Während ein Farbverlauf alle Schritte darstellt, die nötig sind, um von Blau nach Weiß zu wechseln, zeigt color-mix() nur einen Schritt an. Wenn Sie anfangen, Farbräume zu berücksichtigen und zu erfahren, wie unterschiedlich der Farbraum von den Ergebnissen sein kann, werden die Dinge noch weiterentwickelt.

color-mix()

Relative Farbsyntax

Die relative Farbsyntax (RCS) ist eine ergänzende Methode zu color-mix() zum Erstellen von Farbvarianten. Sie ist etwas leistungsstärker als „color-mix()“, bietet aber auch eine andere Strategie für die Arbeit mit Farben. color-mix() kann die Farbe Weiß mischen, um eine Farbe aufzuhellen. Dabei ermöglicht RCS den genauen Zugriff auf den Helligkeitskanal und ermöglicht die Verwendung von calc() auf dem Kanal, um die Helligkeit programmatisch zu verringern oder zu erhöhen.

RCS-Screencast

RCS-Live-Demo

Ändere die Farbe oder die Szenerie. In jeder wird eine relative Farbsyntax verwendet, um Varianten aus der Grundfarbe zu erstellen.

Mit RCS können Sie relative und absolute Änderungen an einer Farbe vornehmen. Bei einer relativen Änderung nehmen Sie den aktuellen Wert für Sättigung oder Helligkeit mit calc(). Bei einer absoluten Änderung wird ein Kanalwert durch einen ganz neuen Wert ersetzt, beispielsweise durch Festlegen der Deckkraft auf 50%. Diese Syntax bietet Ihnen nützliche Tools für die Themenerstellung, Just-in-Time-Varianten und mehr.

Weitere Informationen zur relativen Farbsyntax

Responsives Webdesign

Responsives Webdesign wurde 2023 weiterentwickelt. In diesem bahnbrechenden Jahr wurden neue Funktionen eingeführt, die die Art und Weise, wie wir responsive Web-Erlebnisse entwickeln, grundlegend verändern. Daraus entstand ein neues Modell des komponentenbasierten responsiven Designs. Die Kombination aus Containerabfragen und :has() unterstützt Komponenten mit einem responsiven und logischen Stil basierend auf der Größe des übergeordneten Elements sowie dem Vorhandensein oder Status eines ihrer untergeordneten Elemente. Das bedeutet, dass Sie das Layout auf Seitenebene endlich vom Layout auf Komponentenebene trennen und die Logik einmal schreiben können, um Ihre Komponente überall zu verwenden.

Größe von Containerabfragen

Unterstützte Browser

  • Chrome: 105 <ph type="x-smartling-placeholder">
  • Edge: 105. <ph type="x-smartling-placeholder">
  • Firefox: 110 <ph type="x-smartling-placeholder">
  • Safari: 16. <ph type="x-smartling-placeholder">

Quelle

Statt die Informationen zur globalen Größe des Darstellungsbereichs zum Anwenden von CSS-Stilen zu verwenden, unterstützen Containerabfragen die Abfrage eines übergeordneten Elements innerhalb der Seite. Das bedeutet, dass Komponenten in mehreren Layouts und Ansichten auf dynamische Weise gestaltet werden können. Am Valentinstag dieses Jahres (14. Februar) sind Containerabfragen in Bezug auf die Größe in allen modernen Browsern stabil.

Wenn Sie diese Funktion verwenden möchten, richten Sie zuerst eine Begrenzung für das abgefragte Element ein. 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

Containerabfragen gestalten

Unterstützte Browser

  • Chrome: 111. <ph type="x-smartling-placeholder">
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: nicht unterstützt <ph type="x-smartling-placeholder">
  • Safari: 18. <ph type="x-smartling-placeholder">

Quelle

Stilabfragen wurden in Chrome 111 teilweise implementiert. Bei Stilabfragen können Sie derzeit den Wert von benutzerdefinierten Eigenschaften für ein übergeordnetes Element abfragen, wenn Sie @container style() verwenden. Sie können beispielsweise abfragen, ob ein Wert für eine benutzerdefinierte Eigenschaft vorhanden oder auf einen bestimmten Wert wie @container style(--rain: true) festgelegt ist.

Screenshot: Stilabfrage

Demo-Screenshot für Wetterkarten für Stilcontainerabfragen

Demo für Stilabfragen

Ändere die Farbe oder die Szenerie. In jeder wird eine relative Farbsyntax verwendet, um Varianten aus der Grundfarbe zu erstellen.

Das klingt ähnlich wie die Verwendung von Klassennamen in CSS. Stilabfragen bieten jedoch einige Vorteile. Zum einen können Sie bei Stilabfragen den Wert in CSS bei Bedarf für Pseudozustände aktualisieren. Außerdem wird es in zukünftigen Versionen der Implementierung möglich sein, Wertebereiche abzufragen, um den angewendeten Stil (z. B. style(60 <= --weather <= 70)) zu bestimmen, und den Stil basierend auf Eigenschaft/Wert-Paaren wie style(font-style: italic) zu bestimmen.

Weitere Informationen zur Verwendung von Stilabfragen

:has()-Selektor

Unterstützte Browser

  • Chrome: 105 <ph type="x-smartling-placeholder">
  • Edge: 105. <ph type="x-smartling-placeholder">
  • Firefox: 121. <ph type="x-smartling-placeholder">
  • Safari: 15.4 <ph type="x-smartling-placeholder">

Quelle

Fast 20 Jahre lang forderten Entwickler einen „Parent Selector“ (übergeordneten Selektor) in CSS ein. Mit der in Chrome 105 verfügbaren :has()-Auswahl ist dies jetzt möglich. Wenn Sie beispielsweise .card:has(img.hero) verwenden, werden die .card-Elemente ausgewählt, die ein untergeordnetes Hero-Image haben.

Demo-Screenshot für :has()

Referenz-Screenshot für die :has()-Demo

:has() Live-Demo

Preisvergleichsportal :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

Demo für :has()

Preisvergleichsportal :has()-Demo: Dock

Weitere Informationen zum CSS-:has()-Selektor

Medienabfrage aktualisieren

Unterstützte Browser

  • Chrome: 113. <ph type="x-smartling-placeholder">
  • Edge: 113. <ph type="x-smartling-placeholder">
  • Firefox: 102 <ph type="x-smartling-placeholder">
  • Safari: 17. <ph type="x-smartling-placeholder">

Quelle

Mit der Medienabfrage update kannst du die UI an die Aktualisierungsrate eines Geräts anpassen. Die Funktion kann den Wert fast, slow oder none melden, der sich auf die Funktionen der verschiedenen 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. Bei E-Readern und Geräten wie stromsparenden Zahlungssystemen ist die Aktualisierungsrate möglicherweise langsam. Da Sie wissen, dass das Gerät keine Animationen oder häufige Updates verarbeiten kann, können Sie die Akkunutzung oder fehlerhafte Ansichtsupdates schonen.

Screencast aktualisieren

Demo aktualisieren

Simulieren Sie einen Wert für die Aktualisierungsgeschwindigkeit, indem Sie ein Optionsfeld auswählen. um zu sehen, wie sich das auf die Ente auswirkt.

Weitere Informationen zu@media (update)

Scripting für Medienabfrage

Unterstützte Browser

  • Chrome: 120. <ph type="x-smartling-placeholder">
  • Edge: 120. <ph type="x-smartling-placeholder">
  • Firefox: 113 <ph type="x-smartling-placeholder">
  • Safari: 17. <ph type="x-smartling-placeholder">

Quelle

Mit der Scripting-Medienabfrage kann geprüft werden, ob JavaScript verfügbar ist. Dies eignet sich sehr gut für Progressive Enhancement. Vor dieser Medienabfrage bestand eine Strategie zum Erkennen der Verfügbarkeit von JavaScript darin, eine nojs-Klasse im HTML-Code zu platzieren und sie mit JavaScript zu entfernen. Diese Skripts können entfernt werden, da CSS jetzt eine Möglichkeit hat, JavaScript zu erkennen und entsprechend anzupassen.

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

Scripting für Screencast

Scripting-Demo

Nehmen wir als Beispiel einen Themenwechsel auf einer Website. Die Medienabfrage mit Scripts kann dabei helfen, den Wechsel gegen die Systempräferenz zu optimieren, da kein JavaScript verfügbar ist. Sie können auch eine Schalterkomponente in Betracht ziehen: Wenn JavaScript verfügbar ist, kann der Schalter mit einer Geste gewischt werden, anstatt ihn nur ein- und auszuschalten. Es gibt viele großartige 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 verringerter Transparenz

Unterstützte Browser

  • Chrome: 118. <ph type="x-smartling-placeholder">
  • Edge: 118. <ph type="x-smartling-placeholder">
  • Firefox: hinter einer Flagge.
  • Safari: wird nicht unterstützt. <ph type="x-smartling-placeholder">

Quelle

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

Screencast zu geringerer Transparenz

Demo zu reduzierten Transparenz

In einigen Fällen können Sie ein alternatives Layout bereitstellen, bei dem keine Inhalte von anderen Inhalten überlagert werden. In anderen Fällen kann die Deckkraft einer Farbe so eingestellt werden, dass sie undurchsichtig oder fast undurchsichtig ist. Der folgende Blogpost enthält weitere inspirierende Demos, die sich an die Einstellungen der Nutzer anpassen. Werfen Sie einen Blick darauf, wenn Sie wissen möchten, in welchen Fällen diese Medienabfrage nützlich ist.

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

Interaktion

Interaktion ist ein Eckpfeiler digitaler Erlebnisse. 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, die das Erstellen und Implementieren von Interaktionen erleichtern. Dies ermöglicht reibungslose Abläufe und eine optimierte Weberfahrung.

Übergänge ansehen

Unterstützte Browser

  • Chrome: 111. <ph type="x-smartling-placeholder">
  • Edge: 111. <ph type="x-smartling-placeholder">
  • Firefox: nicht unterstützt <ph type="x-smartling-placeholder">
  • Safari: 18. <ph type="x-smartling-placeholder">

Quelle

Aufrufübergänge haben 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. Bei diesen Übergängen kann es sich um ganzseitige Übergänge oder um kleinere Elemente auf einer Seite handeln, z. B. das Hinzufügen oder Entfernen eines neuen Elements zu 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. Die API erledigt dann alles für Sie. Dazu wird ein Vorher-Nachher-Snapshot erstellt und dann zwischen den beiden gewechselt. Mit CSS können Sie steuern, was erfasst wird, und optional anpassen, wie diese Momentaufnahmen animiert werden sollen.

VT-Screencast

VT-Demo

Demo zu Übergängen ansehen

Die View Transitions API für Single-Page-Anwendungen, die in Chrome 111 ausgeliefert werden. Weitere Informationen zu Übergängen von Ansichten

Lineare Easing-Funktion

Unterstützte Browser

  • Chrome: 113. <ph type="x-smartling-placeholder">
  • Edge: 113. <ph type="x-smartling-placeholder">
  • Firefox: 112 <ph type="x-smartling-placeholder">
  • Safari: 17.2 <ph type="x-smartling-placeholder">

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

Vor linear(), das in Chrome 113 verfügbar war, war es nicht möglich, Bounce- oder Frühlingseffekte in CSS zu erstellen. Dank linear() ist es möglich, diese Easings anzunähern, indem sie zu einer Reihe von Punkten vereinfacht und dann zwischen diesen Punkten linear interpoliert werden.

<ph type="x-smartling-placeholder">
</ph> Diagramm einer Easing-Kurve für Absprünge mit mehreren hinzugefügten Punkten
Die ursprüngliche Absprungrate in Blau wird durch eine Reihe grün dargestellter wichtiger Punkte vereinfacht. Die linear()-Funktion verwendet diese Punkte und interpoliert linear zwischen ihnen.

Screencast mit linearem Easing

Demo des linearen Easing

Demo für Preisvergleichsportal-linear()

Weitere Informationen zu linear() Verwenden Sie zum Erstellen von linear()-Kurven den linearen Easing-Generator.

Scroll-Ende

Unterstützte Browser

  • Chrome: 114. <ph type="x-smartling-placeholder">
  • Edge: 114. <ph type="x-smartling-placeholder">
  • Firefox: 109. <ph type="x-smartling-placeholder">
  • Safari: wird nicht unterstützt. <ph type="x-smartling-placeholder">

Quelle

Viele Benutzeroberflächen beinhalten Scrollinteraktionen. Manchmal muss die Schnittstelle 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 scrollend-Ereignis erhältst du ein perfekt abgestimmtes Scroll-Ereignis, das erkennt, ob ein Nutzer noch mitten in der Bewegung ist oder nicht.

Screencast gescrollt

Gescrollte Demo

Dies war wichtig für den Browser, da JavaScript beim Scrollen keine Finger auf dem Bildschirm erfassen kann und die Informationen einfach nicht verfügbar sind. Teile von ungenauem Code für das Scrollen am Ende können jetzt gelöscht und durch ein browsereigenes Ereignis mit hoher Genauigkeit ersetzt werden.

Weitere Informationen zu scrollend

Scrollgesteuerte Animationen

Unterstützte Browser

  • Chrome: 115. <ph type="x-smartling-placeholder">
  • Edge: 115. <ph type="x-smartling-placeholder">
  • Firefox: hinter einer Flagge.
  • Safari: wird nicht unterstützt. <ph type="x-smartling-placeholder">

Quelle

Scroll-gesteuerte Animationen sind eine spannende Funktion ab Chrome 115. Damit können Sie eine vorhandene CSS-Animation oder eine mit der Web Animations API erstellte Animation mit dem Scroll-Offset eines Scrollers koppeln. Wenn Sie nach oben und unten scrollen oder beim horizontalen Scrollen nach links und rechts, rutscht die verknüpfte Animation in Direct Response vor- und zurück.

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 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. Dies funktioniert ähnlich wie das Tracking eines Elements durch IntersectionObserver. In der folgenden Demo ist jedes Bild von dem Moment an sichtbar, an dem es im Scrollport erscheint, bis es sich in der Mitte befindet.

SDA-Demo-Screencast

SDA-Live-Demo

Demo zu scrollbaren CSS-Animationen: Zeitachse ansehen

Da scrollbare Animationen zusammen mit CSS-Animationen und der Web Animations API funktionieren, profitieren Sie von allen Vorteilen dieser APIs. Dazu gehört auch die Möglichkeit, dass diese Animationen über den Hauptthread ausgeführt werden. Jetzt können Sie mit nur ein paar Zeilen zusätzlichen Code über den Hauptthread hinweg reibungslose, flüssige Animationen erstellen. Was soll Ihnen nicht gefallen?

Weitere Informationen zu scrollbaren Animationen finden Sie in diesem Artikel mit allen Details oder auf scroll-driven-animations.style, die viele Demos enthält.

Angehängter Zeitachsenanhang

Unterstützte Browser

  • Chrome: 116. <ph type="x-smartling-placeholder">
  • Edge: 116. <ph type="x-smartling-placeholder">
  • Firefox: nicht unterstützt <ph type="x-smartling-placeholder">
  • Safari: wird nicht unterstützt. <ph type="x-smartling-placeholder">

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

Damit das animierte Element eine benannte Scroll-Zeitachse eines Nicht-Ancestors finden kann, verwenden Sie die Eigenschaft timeline-scope für ein gemeinsam genutztes übergeordnetes Element. Dadurch kann die definierte scroll-timeline oder view-timeline mit diesem Namen an die Datei angehängt werden, wodurch der Bereich erweitert wird. Dann kann jedes untergeordnete Element dieses übergeordneten Elements die Zeitachse mit diesem Namen verwenden.

<ph type="x-smartling-placeholder">
</ph> Visualisierung einer DOM-Unterstruktur mit Zeitachsenbereich, der für ein gemeinsames übergeordnetes Element verwendet wird
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.

Screencast-Demo

Live-Demo

Demo zu scrollbaren CSS-Animationen: verzögerter Zeitachsenanhang

Weitere Informationen zu timeline-scope

Diskrete Eigenschaftenanimationen

Eine weitere neue Funktion, die 2023 eingeführt wurde, ist die Möglichkeit, diskrete Animationen zu animieren, z. B. Animationen zu und von 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. Dazu verwenden Sie die Eigenschaft transition-behavior mit dem Schlüsselwort allow-discrete oder die Abkürzung transition.

Diskretes Anim. Screencast

Diskretes Anim. Demo

Weitere Informationen zum Wechsel von diskreten Animationen

@starting-style

Unterstützte Browser

  • Chrome: 117. <ph type="x-smartling-placeholder">
  • Edge: 117. <ph type="x-smartling-placeholder">
  • Firefox: 129. <ph type="x-smartling-placeholder">
  • Safari: 17.5 <ph type="x-smartling-placeholder">

Quelle

Die CSS-Regel @starting-style basiert auf neuen Webfunktionen für Animationen von und zu display: none. Diese Regel bietet die Möglichkeit, einem Element Stil, den der Browser aufrufen kann, bevor das Element auf der Seite geöffnet wird. Dies ist sehr hilfreich bei Eingabeanimationen sowie bei der Animation in Elementen wie Popover oder Dialogfeld. Sie 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

@starting-style-Demo

Weitere Informationen zu @starting-style und anderen Eintragsanimationen

Overlay

Unterstützte Browser

  • Chrome: 117. <ph type="x-smartling-placeholder">
  • Edge: 117. <ph type="x-smartling-placeholder">
  • Firefox: nicht unterstützt <ph type="x-smartling-placeholder">
  • Safari: wird nicht unterstützt. <ph type="x-smartling-placeholder">

Quelle

Die neue CSS-Eigenschaft overlay kann Ihrem Übergang hinzugefügt werden, damit Elemente mit Stilen der obersten Ebene wie popover und dialog nahtlos 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. In ähnlicher Weise sorgt overlay dafür, dass ::backdrop reibungslos animiert wird, wenn es zu einem Element der obersten Ebene hinzugefügt wird.

Overlay-Screencast

Overlay-Live-Demo

Weitere Informationen zu Overlays und anderen Exit-Animationen

Komponenten

2023 war ein wichtiges Jahr für die Überschneidung von Stil und HTML-Komponenten. popover wurde veröffentlicht und es wurden viel Arbeit in Bezug auf die Positionierung von Ankern und die Zukunft von Design-Drop-downs getan. Diese Komponenten erleichtern das Erstellen gängiger UI-Muster, ohne dass zusätzliche Bibliotheken benötigt oder eigene Zustandsverwaltungssysteme von Grund auf neu erstellt werden müssen.

Popover

Unterstützte Browser

  • Chrome: 114. <ph type="x-smartling-placeholder">
  • Edge: 114. <ph type="x-smartling-placeholder">
  • Firefox: 125 <ph type="x-smartling-placeholder">
  • Safari: 17. <ph type="x-smartling-placeholder">

Quelle

Mit der Popover API können Sie Elemente erstellen, die über dem Rest der Seite platziert werden. Dazu können Menüs, eine Auswahl und Kurzinfos gehören. 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:

  • Wandern Sie in die oberste Ebene. Popover werden auf einer separaten Ebene über dem Rest der Seite angezeigt, sodass Sie nicht mit dem Z-Index herumspielen müssen.
  • Lichtabschaltung: Wenn Sie auf eine Stelle außerhalb des Popover-Bereichs klicken, wird es geschlossen und wieder in den Fokus rückt.
  • Standardmäßige Fokusverwaltung: Durch das Öffnen des Pop-overs wird der nächste Tab innerhalb des Pop-overs gestoppt.
  • Barrierefreie Tastaturbindungen Wenn Sie die esc-Taste drücken oder zweimal umschalten, wird das Pop-over geschlossen und der Fokus kehrt zurück.
  • Barrierefreie Komponentenbindungen: Popover-Element semantisch mit einem Popover-Trigger verbinden

Pop-over-Screencast

Popover-Live-Demo

Horizontale Regeln in Auswahl

Eine weitere kleine Änderung an HTML, die dieses Jahr in Chrome und Safari eingeführt wurde, ist die Möglichkeit, <select>-Elementen horizontale Regelelemente (<hr>-Tags) hinzuzufügen, um deine Inhalte visuell aufzuschlüsseln. Bisher wurde ein <hr>-Tag in einem SELECT einfach 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

Screenshot von HR in Select mit hellem und dunklem Design in Chrome

„Live-Demo“ auswählen

Weitere Informationen zur Verwendung von hr in select

:nutzergültige und ungültige Pseudoklassen

Unterstützte Browser

  • Chrome: 119. <ph type="x-smartling-placeholder">
  • Edge: 119. <ph type="x-smartling-placeholder">
  • Firefox: 88 <ph type="x-smartling-placeholder">
  • Safari: 16.5 <ph type="x-smartling-placeholder">

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 Formularsteuerelement, das erforderlich und leer ist, stimmt auch dann mit :invalid überein, wenn ein Nutzer noch nicht mit der Seite interagiert. 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 Selektoren muss kein zustandsorientierter Code mehr geschrieben werden, um die von einem Nutzer geänderten Eingaben zu verfolgen.

:nutzer-* Screencast

:user-* Live-Demo

Weitere Informationen zur Verwendung von Pseudoelementen der Nutzer*-Formularvalidierung

Exklusives Akkordeon

Unterstützte Browser

  • Chrome: 120. <ph type="x-smartling-placeholder">
  • Edge: 120. <ph type="x-smartling-placeholder">
  • Firefox: 130 <ph type="x-smartling-placeholder">
  • Safari: 17.2 <ph type="x-smartling-placeholder">

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

Neu in Chrome 120 ist die Unterstützung des Attributs name bei <details>-Elementen. Bei Verwendung dieses Attributs bilden mehrere <details>-Elemente mit demselben name-Wert eine semantische Gruppe. Höchstens ein Element in der Gruppe kann gleichzeitig geöffnet sein. Wenn Sie eines der <details>-Elemente der Gruppe öffnen, wird das zuvor geöffnete Element automatisch geschlossen. Diese Art von Akkordeon wird als exklusives Akkordeon bezeichnet.

Exklusive Demo mit Akkordeon

Die <details>-Elemente, die Teil eines exklusiven Akkordeons sind, müssen nicht zwangsläufig gleichgeordnet sein. Sie können über das Dokument verteilt sein.

Schlusswort

Das Preisvergleichsportal hat in den letzten Jahren und insbesondere im Jahr 2023 eine solche Renaissance erlebt. 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.

⇾ Das Chrome UI DevRel-Team,

Una Kravets
Bramus
Adam Argyle
Adam Argyle
X GitHub