CSS Wrapped: 2023!
Direkt zum Inhalt:
- Responsives Webdesign
- Containerabfragen
- Stilabfragen
- :has-Selektor
- Medienabfrage aktualisieren
- Scripting für Medienabfrage
- Anfrage zu Transparenz-Medien
Wow! 2023 war ein erfolgreiches Jahr für Preisvergleichsportale.
Von #Interop2023 bis hin zu vielen neuen Landings im Bereich CSS 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. Darüber hinaus 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 Updates 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
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 nützlich. Zum Beispiel ist es jetzt viel einfacher, Elemente auf einem Kreis um einen ausgewählten Mittelpunkt herum anzuordnen.
Weitere Informationen zu den trigonometrischen Funktionen in CSS
Komplexe n-*-Auswahl
Unterstützte Browser
- 111
- 111
- 113
- 9
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 Pseudonyme :nth-*() 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.
Ebene
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
Scope-Live-Demo
@scope-DemoWeitere 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
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
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.
Subgrid
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
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.
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
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
Demo des ersten Briefs
initial-letter für das Pseudoelement ::first-letter, damit es sich ändert.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
balance und pretty auf eine Überschrift und einen Absatz durch Ziehen des Schiebereglers vergleichen. Versuche, die Demo in eine andere Sprache zu übersetzen.
Farbe
2023 war das Jahr der Farben für die Webplattform. Mit den neuen Farbräumen und Funktionen, die dynamische Farbdesigns ermöglichen, sind Sie nicht mehr davon abgehalten, die lebendigen, üppigen Designs zu kreieren, die Ihre Nutzer verdienen, und sie auch anpassbar machen.
HD-Farbräume (Farbstufe 4)
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 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.
– 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
Funktion „Farbmix“
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
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 beginnen, Farbräume zu berücksichtigen und zu erfahren, wie unterschiedlich der Farbraum von den Ergebnissen sein kann, werden die Dinge noch weiterentwickelt.
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
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.
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
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
Containerabfragen gestalten
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 für Stilabfragen
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.
:has()-Selektor
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()
:has() Live-Demo
:has()-Demo: Karte ohne/mit BildDa :has() eine relative Selektorliste als Argument akzeptiert, 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()
:has()-Demo: DockMedienabfrage aktualisieren
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 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 den Akkuverbrauch oder fehlerhafte Ansichtsupdates schonen.
Screencast aktualisieren
Demo aktualisieren
Scripting für Medienabfrage
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.
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, können Sie den Schalter mit einer Geste wischen, 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.
Medienabfrage mit verringerter Transparenz
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
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, beispielsweise 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 übernimmt dann alles für Sie. Dazu wird ein Vorher-Nachher-Snapshot erstellt und dann zwischen den beiden gewechselt. Mithilfe von CSS können Sie steuern, was erfasst wird, und optional die Animation dieser Momentaufnahmen anpassen.
VT-Screencast
VT-Demo
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
- 113
- 113
- 112
- 17.2
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.
linear()-Funktion verwendet diese Punkte und interpoliert linear zwischen ihnen.Screencast mit linearem Easing
Demo des linearen Easing
linear()Weitere Informationen zu linear() Verwenden Sie zum Erstellen von linear()-Kurven den linearen Easing-Generator.
Scroll-Ende
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.
Scrollgesteuerte Animationen
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 –, zieht 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
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
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
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.
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.
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
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 diskrete Eigenschaft am 50-%-Punkt statt am 0-%-Punkt festlegen. Dazu verwenden Sie die Eigenschaft transition-behavior mit dem Schlüsselwort allow-discrete oder die Abkürzung transition.
Diskretes Anim. Screencast
Diskretes Anim. Demo
@starting-style
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 ist. 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
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
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 aufzuteilen. 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
„Live-Demo“ auswählen
:nutzergültige und ungültige Pseudoklassen
: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
- 120
- 120
- x
- 17.2
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.
Die <details>-Elemente, die Teil eines exklusiven Akkordeons sind, müssen nicht zwangsläufig gleichgeordnet sein. Sie können über das Dokument verteilt sein.
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,
