CSS-Wrapping: 2023
Direkt zum Inhalt:
- Architektonische Grundlagen
- Trigonometrische Funktionen
- Komplexe n-te *-Auswahl
- Scope (Bereich)
- Verschachtelung
- Responsives Design
- Containerabfragen
- Abfragen gestalten
- :has-Selektor
- Medienabfrage aktualisieren
- Scripting von Medienabfrage
- Medienabfrage zu Transparenz
Wow! 2023 war ein erfolgreiches Jahr für Preisvergleichsportale!
Von #Interop2023 bis hin zu vielen neuen Bereichen im CSS- und UI-Bereich, die Funktionen ermöglichen, die Entwickler bisher auf der Webplattform für unmöglich gehalten hatten. Inzwischen unterstützt jeder moderne Browser Container-Abfragen, Subgrid, den :has()-Selektor und eine Vielzahl neuer Farbräume und Funktionen. In Chrome werden scrollgesteuerte Animationen nur für CSS unterstützt und die Animation zwischen Webansichten durch Ansichtsübergänge reibungslos. Und darüber hinaus gibt es so viele neue Primitive, die ein besseres Entwicklererlebnis bieten, z. B. CSS-Verschachtelung und Bereichsstile.
Was für ein Jahr! Zum Abschluss dieses Meilensteins möchten wir all die harte Arbeit der Browserentwickler und der Web-Community, die dies möglich gemacht haben, würdigen und feiern.
Architektonische Grundlagen
Beginnen wir mit den Aktualisierungen der wichtigsten CSS-Sprache und ‐Funktionen. Dies sind Funktionen, die die Grundlage für die Art und Weise sind, wie Sie Stile verfassen und organisieren und den Entwickelnden großen Einfluss haben.
Trigonometrische Funktionen
In Chrome 111 werden jetzt die trigonometrischen Funktionen sin(), cos(), tan(), asin(), acos(), atan() und atan2() unterstützt, sodass sie in allen gängigen Suchmaschinen verfügbar sind. Diese Funktionen sind bei Animationen und Layout sehr praktisch. Es ist jetzt beispielsweise viel einfacher, Elemente auf einem Kreis um einen ausgewählten Mittelpunkt anzuordnen.
Weitere Informationen zu den trigonometrischen Funktionen in CSS
Komplexe n-te *-Auswahl
Unterstützte Browser
- 111
- 111
- 113
- 9
Mit dem Pseudoklassenselektor :nth-child() ist es möglich, Elemente im DOM nach ihrem Index auszuwählen. Mit der An+B-Mikrosyntax können Sie genau festlegen, welche Elemente Sie auswählen möchten.
Standardmäßig werden für das Pseudonym :nth-*() alle untergeordneten Elemente berücksichtigt. 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 Aufgabe übernimmt.
In der folgenden Demo wird die 3n+1-Logik nur auf kleine Puppen angewendet, indem sie mit of .small vorgefiltert werden. Über die Drop-down-Menüs können Sie die verwendete Auswahl dynamisch ändern.
Weitere Informationen zu komplexen nth-*-Auswahlmöglichkeiten
Scope (Bereich)
Unterstützte Browser
- 118
- 118
- x
- 17,4
In Chrome 118 wurde @scope unterstützt, eine At-Regel, mit der Sie den Auswahlabgleich auf eine bestimmte Unterstruktur des Dokuments beschränken können. Mit einem auf einen Bereich reduzierten Stil können Sie sehr 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.
Eine auf einen Bereich reduzierte Unterstruktur wird durch eine Bereichswurzel (obere Grenze) und ein optionales Bereichslimit (untere Grenze) 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 in der ausgeschnittenen Unterstruktur ab. Die folgende auf einen Bereich reduzierte Stilregel gilt beispielsweise nur für <img>-Elemente, die zwischen dem .card-Element und einer verschachtelten Komponente liegen, die mit dem [data-component]-Selektor übereinstimmt.
@scope (.card) to ([data-component]) {
img { … }
}
In der folgenden Demo werden die <img>-Elemente in der Karussell-Komponente aufgrund des angewendeten Bereichslimits nicht abgeglichen.
Screenshot der Demo zum Umfang
Scope Live-Demo
@scope-DemoWeitere Informationen zu @scope finden Sie im Artikel „Mit @scope die Reichweite der Selektoren einschränken“. In diesem Artikel erfahren Sie mehr über den :scope-Selektor, wie Spezifität gehandhabt wird, Bereiche ohne Vorzeichen und wie die Kaskade von @scope beeinflusst wird.
Verschachtelung
Vor der Verschachtelung musste jeder Selektor explizit und getrennt voneinander deklariert werden. Dies führt zu Wiederholungen, größeren Stylesheets und einem verstreuten Erstellungsprozess. Jetzt können Selektoren mit zugehörigen Stilregeln gruppiert werden.
dl {
/* dt styles */
dt {
/* dl dt styles */
}
dd {
/* dl dd styles */
}
}
/* same as */
dt {
/* dt styles */
}
dl dt {
/* dl dt styles */
}
dl dd {
/* dl dd styles */
}
Screencast verschachteln
Nest-Live-Demo
Durch eine Verschachtelung können Sie die Gewichtung eines Stylesheets reduzieren, den Aufwand wiederholender Selectors reduzieren und Komponentenstile zentralisieren. Die Syntax wurde anfangs mit einer Einschränkung veröffentlicht, die die Verwendung von & an verschiedenen Stellen erforderte, wurde jedoch durch eine Aktualisierung der gelockerten Syntax für Verschachtelungen behoben.
Subgrid
Mit der CSS-subgrid können Sie komplexere Raster mit besserer Ausrichtung zwischen untergeordneten Layouts erstellen. Damit kann ein Raster innerhalb eines anderen Rasters die Zeilen und Spalten des äußeren Rasters als eigenständiges ü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 anderer Elemente auszurichten. Texter, UX-Schreibende und Übersetzer müssen nicht mehr versuchen, Projekttexte zu erstellen, die in das Layout „passen“. Mit Subgrid kann das Layout an den Inhalt angepasst werden.
Typografie
Bei der Webtypografie gab es 2023 einige wichtige Änderungen. Eine besonders gute progressive Verbesserung ist die Eigenschaft text-wrap. Diese Eigenschaft ermöglicht die Anpassung des typografischen Layouts im Browser, ohne dass zusätzliche Skripts erforderlich sind. Schluss mit umständlichen Linienlängen und besser vorhersehbarer Typografie!
Anfangsbuchstabe
Zu Beginn des Jahres wird die initial-letter-Property in Chrome 110 eingeführt. Sie ist eine kleine, aber leistungsstarke CSS-Funktion, die Stile für die Platzierung der Anfangsbuchstaben festlegt. Sie können Buchstaben entweder abgesetzt oder erhöht platzieren. Die Eigenschaft akzeptiert zwei Argumente: das erste Argument gibt an, wie tief der Buchstabe in den entsprechenden Absatz eingefügt werden soll, und das zweite Argument, um wie stark der Buchstabe darüber hervorgehoben werden soll. Du kannst sogar eine Kombination aus beidem verwenden, wie in der folgenden Demo gezeigt.
Screenshot der Anfangsbuchstaben
Anfangsbuchstaben – Demo
initial-letter für das Pseudoelement ::first-letter, um zu beobachten, wie es verschoben wird.text-wrap: ausgewogenes und schön
Als Entwickler kennen Sie die endgültige Größe, Schriftgröße oder 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 zugewiesener Fläche kennt, eignet er sich hervorragend zur Verarbeitung erweiterter und qualitativ hochwertiger Textlayouts.
Hier kommen zwei neue Verfahren für den Textumbruch ins Spiel: balance und pretty. Mit dem Wert balance wird ein harmonischer Textblock erstellt, während mit pretty Waisen verhindert und eine korrekte Bindestriche eingefügt werden soll. Beide Aufgaben wurden traditionell von Hand erledigt, und es ist großartig, dass der Browser diese Aufgabe übernimmt und ihn für jede übersetzte Sprache verwendet.
Screencast mit Textumbruch
Live-Demo für Textumbruch
balance“ und „pretty“ auf eine Überschrift und einen Absatz vergleichen. Versuche, die Demo in eine andere Sprache zu übersetzen.Weitere Informationen zu text-wrap: Balancing.
Farbe
2023 war das Jahr der Farbe für die Webplattform. Mit den neuen Farbräumen und Funktionen, die dynamische Farbdesigns ermöglichen, gibt es nichts dagegen, die lebendigen, üppigen Designs zu erstellen, die Ihre Nutzenden verdienen, und sie auch anpassbar zu machen!
HD-Farbräume (Farbstufe 4)
Von der Hardware über die Software, das CSS bis hin zu den blinkenden Lichtern – es kann viel Arbeit in Anspruch nehmen, bis unsere Computer Farben so gut darstellen, wie unser menschliches Auge sieht. 2023 gibt es neue Farben, mehr Farben, neue Farbräume, Farbfunktionen und neue Möglichkeiten.
CSS und Farbe haben jetzt folgende Möglichkeiten:
– Prüfen Sie, ob die Bildschirmhardware des Nutzers HDR-Farben in einem Wide-Gamut-Format unterstützt.
– Prüfen Sie, ob der Browser des Nutzers Farbsyntax wie Oklch oder Display P3 versteht.
– HDR-Farben lassen sich unter anderem für Oklab, Oklch, HWB, Display P3, Rec.2020 und XYZ festlegen.
– Farbverläufe mit HDR-Farben erstellen,
– Verläufe in alternativen Farbräumen interpolieren
– Mische Farben mit color-mix().
– Farbvarianten mit relativer Farbsyntax erstellen
Screencast für Farbe 4
Demo zu Farbe 4
Farbmix-Funktion
Das Mischen von Farben ist eine klassische Aufgabe und wird 2023 auch mit CSS möglich sein. Sie können nicht nur Weiß oder Schwarz zu einer Farbe mischen, sondern auch Transparenz. All dies ist in einem beliebigen Farbraum Ihrer Wahl möglich. Es ist gleichzeitig eine Grundfarbfunktion und eine erweiterte Farbfunktion.
color-mix() – Screencast
color-mix() – Demo
Sie können sich color-mix() als einen Moment in einem Farbverlauf vorstellen. Während ein Farbverlauf alle Schritte zeigt, die nötig sind, um von Blau nach Weiß zu gelangen, zeigt color-mix() nur einen Schritt an. Wenn Sie damit beginnen, Farbräume zu berücksichtigen und zu lernen, wie unterschiedlich der Mischfarbraum von den Ergebnissen sein kann, geht es weiter.
Weitere Informationen zu color-mix().
Syntax der relativen Farbe
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 Farbe. color-mix() kann sich in der Farbe Weiß mischen, um eine Farbe aufzuhellen. RCS ermöglicht dabei präzisen 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
Mit RCS können Sie eine Farbe relativ und absolut ändern. Bei einer relativen Änderung nehmen Sie den aktuellen Wert für Sättigung oder Helligkeit und ändern ihn mit calc(). Bei einer absoluten Änderung wird ein Kanalwert durch einen neuen ersetzt, z. B. durch Festlegen der Deckkraft auf 50%. Diese Syntax bietet Ihnen aussagekräftige Tools für Themen, Just-in-Time-Varianten und mehr.
Responsives Design
Responsives Design wurde 2023 entwickelt. Dieses bahnbrechende Jahr ermöglichte neue Funktionen, die die Art und Weise, wie wir responsive Weberlebnisse entwickeln, völlig verändert. Außerdem wurde ein neues Modell des komponentenbasierten responsiven Webdesigns eingeleitet. Die Kombination aus Containerabfragen und :has() unterstützt Komponenten mit responsivem und logischem Stil basierend auf der Größe des übergeordneten Elements sowie dem Vorhandensein oder dem Status von untergeordneten Elementen. Das bedeutet, dass Sie endlich ein Layout auf Seitenebene von einem Layout auf Komponentenebene trennen und die Logik einmal schreiben können, um Ihre Komponente überall zu verwenden.
Größe von Containerabfragen
Anstatt die globalen Größeninformationen des Darstellungsbereichs zum Anwenden von CSS-Stilen zu verwenden, unterstützen Containerabfragen die Abfrage eines übergeordneten Elements innerhalb der Seite. Das bedeutet, dass Komponenten dynamisch über mehrere Layouts und Ansichten hinweg gestaltet werden können. Containerabfragen für die Größe wurden in allen modernen Browsern seit dem diesjährigen Valentinstag (14. Februar) stabilisiert.
Um diese Funktion zu nutzen, richten Sie zuerst die Begrenzung für das Element ein, das Sie abfragen. Verwenden Sie dann ähnlich wie bei einer Medienabfrage @container mit den Größenparametern, um die Stile anzuwenden. Zusammen mit Containerabfragen erhalten Sie auch Containerabfragegrößen. In der folgenden Demo wird die Größe der Containerabfrage cqi (für die Größe des Inline-Containers) verwendet, um die Größe des Kartenheaders anzupassen.
@container Screencast
@container-Demo
Containerabfragen gestalten
Stilabfragen konnten in Chrome 111 nur teilweise implementiert werden. Bei Stilabfragen können Sie derzeit den Wert von benutzerdefinierten Eigenschaften für ein übergeordnetes Element abfragen, wenn Sie @container style() verwenden. Fragen Sie beispielsweise ab, ob der Wert eines benutzerdefinierten Attributs vorhanden oder auf einen bestimmten Wert wie @container style(--rain: true) festgelegt ist.
Screenshot der Stilabfrage
Stilabfrage – Demo
Das klingt ähnlich wie die Verwendung von Klassennamen in CSS, aber Stilabfragen haben einige Vorteile. Die erste besteht darin, dass Sie bei Stilabfragen den Wert in CSS nach Bedarf für Pseudozustände aktualisieren können. In zukünftigen Versionen der Implementierung wird es außerdem möglich sein, Wertebereiche abzufragen, um den angewendeten Stil (z. B. style(60 <= --weather <= 70)) und Stil auf Grundlage von Property-Wert-Paaren wie style(font-style: italic) zu bestimmen.
:has()-Selektor
Seit fast 20 Jahren haben Entwickler in CSS um einen „übergeordneten Selektor“ gebeten. Mit dem :has()-Selektor, der in Chrome 105 enthalten ist, ist dies jetzt möglich. Wenn du beispielsweise .card:has(img.hero) verwendest, werden die .card-Elemente ausgewählt, die ein untergeordnetes Hero-Image haben.
:has()-Demo-Screenshot
:has() Live-Demo
:has()-Demo: Karte ohne/mit BildDa :has() eine relative Auswahlliste als Argument akzeptiert, können Sie viel mehr als das übergeordnete Element auswählen. Wenn Sie verschiedene CSS-Kombinatoren verwenden, können Sie nicht nur den DOM-Baum hinaufsteigen, sondern auch eine seitliche Auswahl vornehmen. li:has(+ li:hover) wählt beispielsweise das <li>-Element aus, das vor dem <li>-Element steht, über das der Mauszeiger aktuell bewegt wird.
:has() Screencast
:has()-Demo
:has()-Demo: DockMedienabfrage aktualisieren
Mit der update-Medienabfrage können Sie die UI an die Aktualisierungsrate eines Geräts anpassen. Die Funktion kann den Wert fast, slow oder none melden, der sich auf die Funktionen verschiedener Geräte bezieht.
Die meisten Geräte, für die Sie Designs entwickeln, weisen wahrscheinlich eine hohe Aktualisierungsrate auf. Dazu gehören Desktop-Computer und die meisten Mobilgeräte. E-Reader und Geräte wie Zahlungssysteme mit geringer Leistung haben möglicherweise eine langsame Aktualisierungsrate. Wenn du weißt, dass das Gerät Animationen oder häufige Updates nicht verarbeiten kann, kannst du den Akkuverbrauch senken oder fehlerhafte Updates erhalten.
Screencast aktualisieren
Demo aktualisieren
Weitere Informationen zu @media (update)
Scripting von Medienabfrage
Mit der Medienabfrage (Scripting) kann geprüft werden, ob JavaScript verfügbar ist. Dies ist sehr hilfreich für Progressive Enhancement. Vor dieser Medienabfrage bestand eine Strategie, um festzustellen, ob JavaScript verfügbar ist, indem eine nojs-Klasse im HTML-Code platziert und mit JavaScript entfernt wurde. Diese Skripts können entfernt werden, da CSS nun eine Möglichkeit bietet, JavaScript zu erkennen und entsprechend anzupassen.
Skripterstellung für Screencast
Skript-Demo
Nehmen wir zum Beispiel einen Designwechsel auf einer Website. Die Medienabfrage für Scripts kann dabei helfen, den Wechsel der Systempräferenz entgegenzuwirken, da kein JavaScript verfügbar ist. Alternativ kannst du auch eine Schalterkomponente in Betracht ziehen. Wenn JavaScript verfügbar ist, kann der Schalter mit einer Geste gewischt werden, anstatt ihn einfach ein- und auszuschalten. Es gibt viele tolle Möglichkeiten, die UX zu verbessern, wenn Scripting verfügbar ist, während gleichzeitig eine sinnvolle Grundlage geschaffen wird, wenn Scripting deaktiviert ist.
Medienabfrage mit verringerter Transparenz
Nicht undurchsichtige Oberflächen können Kopfschmerzen verursachen oder bei verschiedenen Arten von Sehbehinderungen eine visuelle Herausforderung darstellen. Aus diesem Grund gibt es bei 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 Medienabfragen mit Präferenzen, bei denen Sie kreativ sein und gleichzeitig Anpassungen für Nutzer vornehmen können.
Screencast mit verringerter Transparenz
Demo zu verminderter Transparenz
In einigen Fällen können Sie ein alternatives Layout verwenden, bei dem die Inhalte keine anderen Inhalte überlagern. In anderen Fällen kann die Deckkraft einer Farbe so eingestellt werden, dass sie undurchsichtig oder fast undurchsichtig ist. Der folgende Blogbeitrag enthält weitere inspirierende Demos, die sich an die Präferenzen der Nutzer anpassen. Hier können Sie die Nutzer mal sehen, wenn Sie neugierig darauf sind, wann diese Medienabfrage wertvoll ist.
Weitere Informationen zu @media (prefers-Reduced-transparency)
Interaktion
Interaktion ist ein Eckpfeiler digitaler Erlebnisse. Es hilft Nutzenden, Feedback darüber zu erhalten, was sie angeklickt haben und wo sie sich in einem virtuellen Raum befinden. In diesem Jahr gab es viele aufregende neue Funktionen, die das Verfassen und Implementieren von Interaktionen vereinfacht haben, was eine reibungslose User Journey und eine feinere Weberfahrung ermöglicht.
Übergänge ansehen
View-Übergänge haben großen Einfluss auf die Nutzererfahrung auf einer Seite. Mit der View Transitions API können Sie visuelle Übergänge zwischen zwei Seitenzuständen in Ihrer Single Page Application erstellen. Dabei kann es sich um ganzseitige Übergänge oder um kleinere Elemente auf einer Seite wie das Hinzufügen oder Entfernen eines neuen Elements zu einer Liste handeln.
Das Herzstück der View Transitions API ist die Funktion document.startViewTranstion. Übergeben Sie eine Funktion, mit der das DOM auf den neuen Status aktualisiert wird. Die API übernimmt 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
Die View Transitions API für Single-Page-Anwendungen in Chrome 111. Weitere Informationen
Funktion für lineares Easing
Unterstützte Browser
- 113
- 113
- 112
- 17,2
Lassen Sie sich nicht vom Namen dieser Funktion täuschen. Mit der Funktion linear() (nicht zu verwechseln mit dem Schlüsselwort linear) können Sie komplexe Easing-Funktionen auf einfache Weise erstellen, ohne dabei die Genauigkeit zu beeinträchtigen.
Vor dem linear(), das in Chrome 113 ausgeliefert wurde, war es nicht möglich, in CSS Sprung- oder Federeffekte zu erstellen. Dank linear() ist es möglich, sich diesen Easings anzunähern, indem sie zu einer Reihe von Punkten vereinfacht und dann linear zwischen diesen Punkten interpoliert werden.
linear()-Funktion verwendet diese Punkte und interpoliert linear zwischen ihnen.Screencast – lineares Easing
Demo für lineares Easing
linear()-DemoWeitere Informationen zu linear() Wenn Sie linear()-Kurven erstellen möchten, können Sie den Generator für lineares Easing verwenden.
Ende des Scrollens
Viele Oberflächen beinhalten Scroll-Interaktionen und 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 mussten Sie eine ungenaue Zeitüberschreitungsmethode verwenden, die ausgelöst werden konnte, während der Finger des Nutzers noch auf dem Bildschirm war. Mit dem scrollend-Ereignis erhalten Sie ein perfekt zeitlich gescrolltes Ereignis, das erkennt, ob sich der Nutzer noch in der Mitte der Geste befindet oder nicht.
Scrollender Screencast
Scroll-Demo
Dies war für den Browser wichtig, da JavaScript nicht erfassen kann, ob die Finger beim Scrollen auf dem Bildschirm sichtbar sind. Die Informationen sind einfach nicht verfügbar. Blöcke mit fehlerhaftem Code für das Scroll-Ende können jetzt gelöscht und durch ein browsereigenes Ereignis mit hoher Precision ersetzt werden.
Scrollbasierte Animationen
Scroll-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 Scrollversatz eines Scrollers verknüpfen. Wenn du beim Scrollen nach oben und unten oder in einem horizontalen Scroller nach links und rechts scrollst, springt die verknüpfte Animation als 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 eingeblendet.
SDA-Screencast
SDA-Demo
Mit einer ViewTimeline können Sie ein Element verfolgen, während es den Scrollport überquert. Dies funktioniert ähnlich wie das Tracking eines Elements von IntersectionObserver. In der folgenden Demo zeigt sich jedes Bild von dem Moment an, in dem es den Scrollport betritt, bis zum Mittelpunkt.
SDA-Demo-Screencast
SDA-Live-Demo
Da scrollbare Animationen mit CSS-Animationen und der Web Animations API funktionieren, profitieren Sie von allen Vorteilen, die diese APIs bieten. Dazu gehört auch die Möglichkeit, diese Animationen über den Hauptthread laufen zu lassen. Jetzt könnt ihr flüssige Animationen erstellen, die durch Scrollen gesteuert werden und mit nur wenigen zusätzlichen Codezeilen über den Hauptthread laufen – was hat es nicht zu mögen?
Weitere Informationen zu scrollbaren Animationen finden Sie in diesem Artikel mit allen Details oder unter scroll-driven-animations.style, der viele Demos enthält.
Verzögerter Zeitachsenanhang
Beim Anwenden einer scroll-gesteuerten Animation über CSS geht der Suchmechanismus zum Finden des steuernden Scrollers immer den DOM-Baum durch, sodass er auf Scroll-Ancestors beschränkt ist. Sehr oft ist das zu animierende Element jedoch kein untergeordnetes Element des Scrollers, sondern ein Element, das sich in einer völlig anderen Unterstruktur befindet.
Wenn Sie zulassen möchten, dass das animierte Element eine benannte Scrollzeitleiste eines Nicht-Ancestors findet, verwenden Sie die Eigenschaft timeline-scope für ein gemeinsames übergeordnetes Element. Dadurch können die definierten scroll-timeline oder view-timeline mit diesem Namen an sie angehängt werden, wodurch der Bereich erweitert wird. Anschließend kann jedes untergeordnete Element dieses übergeordneten Elements die Zeitachse mit diesem Namen verwenden.
timeline-scope für das gemeinsam genutzte übergeordnete Element deklariert ist, kann die für den Scroller deklarierte scroll-timeline von dem Element gefunden werden, das sie als animation-timeline verwendetScreencast – Demo
Live-Demo
Animationen für diskrete Eigenschaften
Eine weitere neue Funktion im Jahr 2023 ist die Möglichkeit, diskrete Animationen zu animieren, z. B. Animationen von und zu display: none. Ab Chrome 116 kannst du display und content-visibility in Keyframe-Regeln verwenden. Sie können jede einzelne Eigenschaft auch an dem 50 %-Punkt und nicht am 0 %-Punkt umstellen. Das lässt sich mit der Property transition-behavior mit dem Keyword allow-discrete erreichen oder mit der Property transition als Kurzschreibweise.
Diskrete Animation Screencast
Diskrete Animation Demo
Weitere Informationen zum Wechseln zwischen einzelnen Animationen
@starting-stil
Die CSS-Regel @starting-style baut auf neuen Webfunktionen für Animationen von und zu display: none auf. Mit dieser Regel kann einem Element ein „before-open“-Stil zugewiesen werden, den der Browser nachschlagen kann, bevor das Element auf der Seite geöffnet wird. Dies ist sehr hilfreich bei Eingabeanimationen und bei Animationen in Elementen wie einem Pop-over oder Dialogfeld. Das kann auch nützlich sein, wenn Sie ein Element erstellen und ihm die Möglichkeit geben möchten, es zu animieren. Im folgenden Beispiel wird ein popover-Attribut (siehe nächster Abschnitt) sanft von außerhalb des Darstellungsbereichs in die oberste Ebene verschoben.
Screencast im @starting-Stil
@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 reibungslos aus der obersten Ebene animiert werden können. Wenn Sie keinen Übergang durchführen, wird das Element sofort wieder zugeschnitten, umgewandelt und verdeckt, und Sie können den Übergang nicht sehen. Ähnlich ermöglicht overlay die reibungslose Animation von ::backdrop, 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 Schnittmenge von Stil- und HTML-Komponenten, mit dem Ziel „popover“ und viel Arbeit rund um die Ankerpositionierung und die Zukunft der Gestaltung von Drop-down-Menüs. Diese Komponenten erleichtern die Erstellung allgemeiner UI-Muster, ohne dass Sie sich auf zusätzliche Bibliotheken verlassen oder jedes Mal Ihre eigenen Zustandsverwaltungssysteme neu erstellen müssen.
Popover
Mit der Popover API können Sie Elemente erstellen, die über dem Rest der Seite liegen. Dazu können Menüs, die 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 Aufrufschaltfläche verbinden. Die Popover API unterstützt:
- Die oberste Ebene erreichen: Pop-over werden auf einem separaten Layer über dem Rest der Seite angezeigt, sodass Sie nicht mit dem Z-Index herumspielen müssen.
- Funktion „Licht schließen“: Wenn Sie auf eine Stelle außerhalb des Pop-over-Bereichs klicken, wird das Pop-over geschlossen und wieder fokussiert.
- Standardfokusverwaltung: Durch das Öffnen des Popovers stoppt der nächste Tab im Popover.
- Barrierefreie Tastaturbelegungen. Wenn Sie die
esc-Taste drücken oder zweimal wechseln, wird das Pop-over geschlossen und wieder hervorgehoben. - Barrierefreie Komponentenbindungen. Ein Popover-Element wird semantisch mit einem Popover-Trigger verbunden.
Pop-over-Screencast
Popover-Live-Demo
Horizontale Regeln in der Auswahl
Eine weitere kleine HTML-Änderung, die dieses Jahr in Chrome und Safari eingeführt wurde, ist die Möglichkeit, horizontale Regelelemente (<hr>-Tags) in <select>-Elemente einzufügen, um Ihre Inhalte visuell aufzuschlüsseln. Bisher wurde das Einfügen eines <hr>-Tags in eine Auswahl einfach nicht gerendert. Dieses Jahr wird diese Funktion jedoch sowohl in Safari als auch in Chrome unterstützt, was eine bessere Trennung von Inhalten innerhalb von <select>-Elementen ermöglicht.
Screenshot auswählen
Live-Demo auswählen
:user-valid- 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. Sie entsprechen jedoch nur einer Formularsteuerung, wenn ein Nutzer erheblich mit der Eingabe interagiert hat. Ist ein Formularsteuerelement erforderlich und leer, entspricht es :invalid, auch wenn ein Nutzer noch nicht mit der Seite interagiert. Dasselbe Steuerelement stimmt erst mit :user-invalid überein, wenn der Nutzer die Eingabe geändert und im Status „Ungültig“ belassen hat.
Mit diesen neuen Selektoren muss kein zustandsorientierter Code mehr geschrieben werden, um Eingaben von Nutzern nachzuverfolgen.
:Nutzer-* Screencast
:user-* Live-Demo
Weitere Informationen zur Verwendung von Pseudoelementen zur Nutzer*-Formularvalidierung
Exklusives Akkordeon
Unterstützte Browser
- 120
- 120
- x
- 17,2
Ein gängiges UI-Muster im Web ist eine Akkordeon-Komponente. Um dieses Muster zu implementieren, kombinieren Sie einige <details>-Elemente und gruppieren sie häufig visuell, um anzuzeigen, dass sie zusammengehören.
In Chrome 120 wird das Attribut name für <details>-Elemente unterstützt. Wenn dieses Attribut verwendet wird, bilden mehrere <details>-Elemente mit demselben name-Wert eine semantische Gruppe. Es kann höchstens ein Element in der Gruppe gleichzeitig geöffnet sein: Wenn du eines der <details>-Elemente aus der Gruppe öffnest, 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 gleichgeordnet sein. Diese können im Dokument verteilt sein.
Preisvergleichsportal hat in den letzten Jahren, insbesondere im Jahr 2023, einen enormen Aufschwung erlebt. Wenn Sie neu bei CSS sind oder einfach nur die Grundlagen auffrischen möchten, empfehlen wir unseren kostenlosen Kurs CSS lernen sowie die anderen kostenlosen Kurse, die unter web.dev angeboten werden.
Wir wünschen Ihnen frohe Festtage und hoffen, dass Sie schon bald einige dieser großartigen neuen CSS- und UI-Funktionen in Ihre Arbeit integrieren können.
⇾ Das DevRel-Team für die Chrome-Benutzeroberfläche,
