Diese Seite wurde von der Cloud Translation API übersetzt.

Neu in CSS und der Benutzeroberfläche: I/O 2023 Edition

Una Kravets

Bramus

Adam Argyle

In den letzten Monaten hat sich ein goldenes Zeitalter für die Web-UI eingeläutet. Dank der intensiven browserübergreifenden Implementierung von neuen Plattformfunktionen werden mehr Web- und Anpassungsfunktionen unterstützt als je zuvor.

Hier sind 20 der spannendsten und wirkungsvollsten Funktionen, die vor Kurzem eingeführt wurden oder bald verfügbar sein werden:

Containerabfragen
Stilabfragen
:has()-Auswahl
n-te Mikrosyntax
text-wrap: balance
initial-letter
Dynamische Viewport-Einheiten
Farbräume mit breitem Farbumfang
color-mix()
Verschachtelung
Kaskadenebenen
Stil mit Bereich
Trigonometrische Funktionen
Einzelne Transformeigenschaften
Popover
Positionierung von Ankern
selectmenu
Diskrete Property-Übergänge
Scroll-basierte Animationen
Übergänge ansehen

Das neue responsive Design

Beginnen wir mit einigen neuen Funktionen für responsives Webdesign. Mit den neuen Plattformfunktionen können Sie logische Benutzeroberflächen mit Komponenten erstellen, die ihre eigenen responsiven Stilinformationen haben. Außerdem können Sie Benutzeroberflächen erstellen, die Systemfunktionen nutzen, um nativere Benutzeroberflächen zu bieten. Außerdem können Sie Nutzer mit Abfragen zu Nutzereinstellungen in den Designprozess einbinden, um die Benutzeroberfläche vollständig anzupassen.

Containerabfragen

Unterstützte Browser

Quelle

Containerabfragen sind vor Kurzem in allen modernen Browsern stabil geworden. Damit können Sie die Größe und den Stil eines übergeordneten Elements abfragen, um die Stile zu bestimmen, die auf eines seiner untergeordneten Elemente angewendet werden sollen. Media-Abfragen können nur auf Informationen aus dem Darstellungsbereich zugreifen und diese nutzen. Das bedeutet, dass sie nur in einer Makroansicht eines Seitenlayouts funktionieren. Containerabfragen sind dagegen ein genaueres Tool, das beliebig viele Layouts oder Layouts innerhalb von Layouts unterstützen kann.

Im folgenden Beispiel für einen Posteingang sind die Seitenleisten Primärer Posteingang und Favoriten beide Container. Die E-Mails passen ihr Rasterlayout an und blenden den E-Mail-Zeitstempel je nach verfügbarem Platz ein oder aus. Hierbei handelt es sich um genau dieselbe Komponente auf der Seite, die nur in verschiedenen Ansichten erscheint.

Da wir eine Containerabfrage haben, sind die Stile dieser Komponenten dynamisch. Wenn Sie die Seitengröße und das Layout anpassen, reagieren die Komponenten auf den jeweils zugewiesenen Bereich. Die Seitenleiste wird nun zu einer oberen Leiste mit mehr Platz. Wir sehen, dass das Layout eher wie der primäre Posteingang aussieht. Bei weniger Platz werden beide im komprimierten Format angezeigt.

In diesem Beitrag finden Sie weitere Informationen zu Containerabfragen und zum Erstellen logischer Komponenten.

Stilabfragen

Unterstützte Browser

Quelle

Mit der Containerabfragespezifikation können Sie auch die Stilwerte eines übergeordneten Containers abfragen. Dies ist derzeit teilweise in Chrome 111 implementiert. Dort können Sie benutzerdefinierte CSS-Eigenschaften verwenden, um Containerstile anzuwenden.

Im folgenden Beispiel werden Wettereigenschaften, die in benutzerdefinierten Attributwerten gespeichert sind, wie „Regen“, „Sonnenschein“ und „Bedeckt“, verwendet, um den Hintergrund und das Indikatorsymbol der Karte zu gestalten.

@container style(--sunny: true) {
 .weather-card {
   background: linear-gradient(-30deg, yellow, orange);
 }

 .weather-card:after {
   content: url(<data-uri-for-demo-brevity>);
   background: gold;
 }
}

Demo für Wetterkarten

Das ist erst der Anfang für Stilanfragen. Künftig werden wir boolesche Abfragen verwenden, um festzustellen, ob ein benutzerdefinierter Eigenschaftswert vorhanden ist, und Codewiederholungen zu reduzieren. Derzeit wird dies diskutiert, um Bereichsabfragen anzuwenden, mit denen Stile basierend auf einem Wertebereich angewendet werden. So könnten die hier gezeigten Stile mit einem Prozentsatz für die Wahrscheinlichkeit von Regen oder Bewölkung angewendet werden.

Weitere Informationen und Demos finden Sie in unserem Blogpost zu Stilabfragen.

`:has()`

Unterstützte Browser

Quelle

Apropos leistungsstarke, dynamische Funktionen: Der :has()-Selektor ist eine der leistungsstärksten neuen CSS-Funktionen, die in modernen Browsern verfügbar sind. Mit :has() können Sie Stile anwenden, indem Sie prüfen, ob ein übergeordnetes Element bestimmte untergeordnete Elemente enthält oder ob sich diese untergeordneten Elemente in einem bestimmten Zustand befinden. Das bedeutet, dass wir jetzt im Grunde eine übergeordnete Auswahl haben.

Aufbauend auf dem Beispiel für die Containerabfrage können Sie :has() verwenden, um die Komponenten noch dynamischer zu gestalten. Darin wird einem Element mit einem Sternsymbol ein grauer Hintergrund und einem Element mit einem angeklickten Kästchen ein blauer Hintergrund zugewiesen.

Screenshot der Demo

Diese API ist jedoch nicht auf die Auswahl der übergeordneten Elemente beschränkt. Sie können auch alle untergeordneten Elemente innerhalb des übergeordneten Elements stylen. Der Titel ist beispielsweise fett, wenn das Sternelement für das Element vorhanden ist. Dazu verwenden Sie .item:has(.star) .title. Über die :has()-Auswahl erhalten Sie Zugriff auf übergeordnete und untergeordnete Elemente sowie auf gleichgeordnete Elemente. Diese API ist sehr flexibel und bietet jeden Tag neue Anwendungsfälle.

Hinweis: Um Leistungseinbußen beim Rendern in großen DOM-Baumstrukturen zu vermeiden, empfehlen wir, den Bereich dieser Auswahl so eng wie möglich zu fassen. Beispielsweise wäre die Verwendung von :has() zur Suche nach Übereinstimmungen mit dem HTML-Stammelement langsamer als die Suche nach Übereinstimmungen in einer Navigationsleiste oder in einem Kartenelement mit einem kleineren Baum.

Weitere Informationen und Demos zu :has() findest du in diesem Blogpost.

Syntax für nth-of

Unterstützte Browser

Die Webplattform bietet jetzt eine erweiterte Auswahl des n-ten Kindes. Die erweiterte Syntax mit dem n-ten-Unterelement gibt ein neues Keyword ("von"), mit dem Sie die vorhandene Mikrosyntax von An+B mit einer spezifischeren Teilmenge für die Suche verwenden können.

Wenn Sie ein reguläres nth-child wie :nth-child(2) für die spezielle Klasse verwenden, wählt der Browser das Element aus, auf das die Klasse „special“ angewendet wurde und das auch das zweite Kind ist. Das ist im Gegensatz zu :nth-child(2 of .special), bei dem zuerst alle .special-Elemente vorfiltert und dann das zweite aus dieser Liste ausgewählt wird.

Weitere Informationen zu dieser Funktion finden Sie in diesem Artikel zur Syntax „n-te von“.

`text-wrap: balance`

Logik lässt sich nicht nur in Selektoren und Stilabfragen einbetten, sondern auch in der Typografie. Ab Chrome 114 können Sie den Textumbruch für Überschriften verwenden, indem Sie das Attribut text-wrap mit dem Wert balance verwenden.

Demo testen

Um den Text auszubalancieren, führt der Browser eine binäre Suche nach der kleinsten Breite durch, die keine zusätzlichen Zeilen verursacht. Er stoppt bei einem CSS-Pixel (nicht Displaypixel). Um die Schritte bei der binären Suche weiter zu minimieren, beginnt der Browser mit 80 % der durchschnittlichen Zeilenbreite.

Demo ausprobieren

Weitere Informationen

`initial-letter`

Unterstützte Browser

Quelle

Eine weitere schöne Verbesserung an der Webtypografie ist initial-letter. Mit dieser CSS-Property haben Sie mehr Kontrolle über den Stil der eingerückten Initiale.

Mit initial-letter für das Pseudoelement :first-letter geben Sie Folgendes an: Die Größe des Buchstabens, abhängig davon, wie viele Zeilen er belegt. Der Blockabstand oder „Sink“ des Buchstabens, der angibt, wo der Buchstabe platziert wird.

Weitere Informationen zur Verwendung von intial-letter

Dynamische Darstellungsbereich-Einheiten

Unterstützte Browser

Ein häufiges Problem für Webentwickler besteht heute darin, die Größe des Voll-Viewports korrekt und einheitlich zu gestalten, insbesondere auf Mobilgeräten. Als Entwickler möchten Sie, dass 100vh (100 % der Darstellungshöhe) bedeutet, dass das Element so hoch wie der Darstellungsbereich ist. Der vh-Block berücksichtigt jedoch nicht Dinge wie einfahrbare Navigationsleisten auf Mobilgeräten. Daher ist er manchmal zu lang und es muss scrollen werden.

Zu viele Scrollleisten

Um dieses Problem zu beheben, gibt es jetzt auf der Webplattform neue Werte für Einheiten, darunter: – Kleine Höhe und Breite des Darstellungsbereichs (oder svh und svw), die die kleinste Größe des aktiven Darstellungsbereichs darstellen. – Höhe und Breite des großen Darstellungsbereichs (lvh und lvw), die der größten Größe entsprechen. – Dynamische Höhe und Breite des Darstellungsbereichs (dvh und dvw)

Dynamische Darstellungsbereiche ändern sich im Wert, wenn die zusätzlichen dynamischen Browser-Symbolleisten wie die Adresse oben oder die Tableiste unten sichtbar sind und wenn sie nicht angezeigt werden.

Neue Visualisierungen für Darstellungsfenster

Weitere Informationen zu diesen neuen Einheiten finden Sie unter Große, kleine und dynamische Darstellungsfenster.

Farbräume mit breitem Farbumfang

Unterstützte Browser

Quelle

Ein weiterer wichtiger Neuzugang auf der Webplattform sind Farbräume mit großem Farbumfang. Bevor auf der Webplattform Farben mit großem Farbumfang verfügbar wurden, konnten Sie zwar Fotos mit leuchtenden Farben aufnehmen, die auf modernen Geräten angezeigt werden konnten, aber es gab keine Schaltflächen, Textfarben oder Hintergründe, die zu diesen leuchtenden Farben passten.

Eine Reihe von Bildern zeigt den Übergang zwischen breiten und schmalen Farbräumen, um die Farbbrillanz und ihre Auswirkungen zu veranschaulichen.
Jetzt ausprobieren

Jetzt gibt es auf der Webplattform eine Reihe neuer Farbräume, darunter REC2020, P3, XYZ, LAB, OKLAB, LCH und OKLCH. In der HD-Farbübersicht findest du die neuen Farbräume für das Web und vieles mehr.

Fünf gestapelte Dreiecke unterschiedlicher Farbe, die das Verhältnis und die Größe der einzelnen neuen Farbräume veranschaulichen.

In den DevTools sehen Sie sofort, wie sich der Farbbereich erweitert hat. Die weiße Linie zeigt, wo der sRGB-Bereich endet und wo der Farbbereich mit größerem Farbraum beginnt.

In den DevTools wird in der Farbauswahl eine Gamutlinie angezeigt.

Es gibt noch viele weitere Tools für Farben. Auch die vielen Verbesserungen bei Farbverläufen sollten Sie sich nicht entgehen lassen. Adam Argyle hat sogar ein brandneues Tool entwickelt, mit dem Sie eine neue Web-Farbpalette und einen Farbverlauf erstellen können. Probieren Sie es unter gradient.style aus.

color-mix()

Unterstützte Browser

Quelle

Die Funktion color-mix() erweitert erweiterte Farbräume. Diese Funktion unterstützt das Mischen von zwei Farbwerten, um neue Werte auf der Grundlage der Kanäle der zu vermischenden Farben zu erstellen. Der Farbraum, in dem Sie mischen, wirkt sich auf die Ergebnisse aus. Wenn Sie in einem eher perzeptiven Farbraum wie oklch arbeiten, wird ein anderer Farbbereich als beispielsweise sRGB verwendet.

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

Sieben Farbräume (sRGB, linear-sRGB, lch, oklch, lab, oklab, xyz) mit jeweils unterschiedlichen Ergebnissen Viele sind rosa oder lila, nur wenige sind tatsächlich noch blau. — Demo testen

Die Funktion color-mix() bietet eine Funktion, die man sich schon lange gewünscht hat: Sie bietet die Möglichkeit, undurchsichtige Farbwerte beizubehalten und ihnen gleichzeitig etwas Transparenz zu verleihen. Jetzt können Sie Ihre Markenfarbvariablen verwenden, um Varianten dieser Farben mit unterschiedlichen Deckkraftgraden zu erstellen. Dazu mischen Sie eine Farbe mit transparent. Wenn Sie Ihre Markenfarbe Blau mit 10 % Transparenz mischen, erhalten Sie eine 90 % opake Markenfarbe. So können Sie schnell Farbsysteme erstellen.

In den Chrome-Entwicklertools können Sie sich das heute schon mit einem sehr schönen Venn-Diagramm-Symbol in der Vorschau im Steuerfeld für Stile ansehen.

Screenshot der Entwicklertools mit dem Symbol für die Farbkombination des Venn-Diagramms

Weitere Beispiele und Details finden Sie in unserem Blogpost zu „color-mix“ oder in der Playground-Version.

CSS-Grundlagen

Neue Funktionen zu entwickeln, die Nutzern einen klaren Mehrwert bieten, ist ein wichtiger Teil der Gleichung. Viele der Funktionen, die in Chrome eingeführt werden, sollen jedoch die Entwicklerfreundlichkeit verbessern und eine zuverlässigere und organisiertere CSS-Architektur schaffen. Dazu gehören CSS-Verschachtelung, kaskadierende Ebenen, stilisierte Bereiche, trigonometrische Funktionen und individuelle Transformierungseigenschaften.

Verschachtelung

Unterstützte Browser

Quelle

Das Verschachteln von Preisvergleichsportalen, das bei Sass beliebt ist und das seit Jahren zu den am häufigsten angefragten Preisvergleichsportal-Entwicklern zählt, ist endlich auf der Webplattform zu finden. Durch das Verschachteln können Entwickler in einem kürzeren, gruppierten Format schreiben, das Redundanzen reduziert.

.card {}
.card:hover {}

/* can be done with nesting like */
.card {
  &:hover {

  }
}

Sie können auch Mediaabfragen verschachteln, was bedeutet, dass Sie auch Containerabfragen verschachteln können. Im folgenden Beispiel wird eine Karte von einem Hochformat- in ein Querformat geändert, wenn ihr Container über genügend Breite verfügt:

.card {
  display: grid;
  gap: 1rem;

  @container (width >= 480px) {
    display: flex;
  }
}

Die Layoutanpassung auf flex erfolgt, wenn im Container mindestens 480px Inline-Abstand verfügbar ist. Der Browser wendet diesen neuen Darstellungsstil einfach an, wenn die Bedingungen erfüllt sind.

Weitere Informationen und Beispiele finden Sie in unserem Artikel zum CSS-Verschachteln.

Kaskadierende Ebenen

Unterstützte Browser

Quelle

Ein weiteres Problem, das wir für Entwickler identifiziert haben, ist die Gewährleistung einer Einheitlichkeit bei den Stilen, bei denen andere bevorzugt werden. Ein Teil der Lösung ist eine bessere Kontrolle über die CSS-Kaskade.

Abgestufte Ebenen lösen dieses Problem, indem Nutzer festlegen können, welche Ebenen eine höhere Priorität als andere haben. So können Sie genauer festlegen, wann Ihre Stile angewendet werden.

Illustration für die Abfolge

Screenshot aus dem Codepen-Projekt — Sehen Sie sich das Projekt auf Codepen an.

Weitere Informationen zur Verwendung von Kaskadenebenen

CSS mit Bereich

Unterstützte Browser

Quelle

Mit CSS-bezogenen Designs können Entwickler die Grenzen angeben, für die bestimmte Designs gelten. So wird im Grunde eine native Namensanpassung in CSS erstellt. Bisher mussten Entwickler Scripting von Drittanbietern verwenden, um Klassen umzubenennen, oder bestimmte Benennungskonventionen, um Stilüberschneidungen zu vermeiden. Bald können sie @scope verwenden.

Hier wird ein .title-Element auf ein .card-Element angewendet. So wird verhindert, dass dieses Titelelement mit anderen .title-Elementen auf der Seite in Konflikt gerät, z. B. mit dem Titel eines Blogposts oder einer anderen Überschrift.

@scope (.card) {
  .title {
    font-weight: bold;
  }
}

In dieser Live-Demo sehen Sie @scope mit Begrenzungen für den Geltungsbereich zusammen mit @layer:

Screenshot der Karte aus der Demo

Weitere Informationen zu @scope finden Sie in der css-cascade-6-Spezifikation.

Trigonometrische Funktionen

Unterstützte Browser

Quelle

Eine weitere neue CSS-Lösung sind die trigonometrischen Funktionen, die den vorhandenen mathematischen Funktionen von CSS hinzugefügt werden. Diese Funktionen sind jetzt in allen modernen Browsern stabil und ermöglichen es Ihnen, auf der Webplattform organischere Layouts zu erstellen. Ein gutes Beispiel ist dieses radiale Menülayout, das jetzt mit den Funktionen sin() und cos() gestaltet und animiert werden kann.

In der Demo unten drehen sich die Punkte um einen zentralen Punkt. Anstatt jeden Punkt um seinen eigenen Mittelpunkt zu drehen und dann nach außen zu bewegen, wird jeder Punkt entlang der X- und Y-Achsen verschoben. Die Entfernungen auf der X- und Y-Achse werden durch Berücksichtigung der cos() bzw. der sin() der --angle bestimmt.

Weitere Informationen zu diesem Thema finden Sie in unserem Artikel zu trigonometrischen Funktionen.

Einzelne Transformationsattribute

Unterstützte Browser

Quelle

Die Ergonomie der Entwickler wird durch individuelle Transformationsfunktionen weiter verbessert. Seit der letzten I/O-Konferenz sind einzelne Transformationen in allen modernen Browsern stabil.

Bisher haben Sie die Transformierungsfunktion verwendet, um untergeordnete Funktionen zum Skalieren, Drehen und Verschieben eines UI-Elements anzuwenden. Das war sehr zeitaufwendig und besonders frustrierend, wenn mehrere Transformationen zu verschiedenen Zeitpunkten in der Animation angewendet werden mussten.

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only scale changed here, yet you have to repeat all other parts */
}

Jetzt können Sie all diese Details in Ihren CSS-Animationen verwenden, indem Sie die Transformationstypen trennen und einzeln anwenden.

.target {
  translate: 50% 0;
  rotate: 30deg;
  scale: 1.2;
}

.target:hover {
  scale: 2;
}

So können Änderungen bei Verschiebung, Rotation oder Skalierung gleichzeitig mit unterschiedlichen Änderungsraten zu verschiedenen Zeiten während der Animation auftreten.

Weitere Informationen finden Sie in diesem Post zu einzelnen Transformationsfunktionen.

Anpassbare Komponenten

Um sicherzustellen, dass wir einige der wichtigsten Anforderungen von Entwicklern über die Webplattform erfüllen, arbeiten wir mit der OpenUI-Communitygruppe zusammen und haben drei Lösungen identifiziert:

Integrierte Pop-up-Funktionen mit Ereignishandlern, eine deklarative DOM-Struktur und barrierefreie Standardeinstellungen.
Eine CSS-API, mit der zwei Elemente miteinander verbunden werden, um die Positionierung von Ankern zu ermöglichen.
Eine anpassbare Drop-down-Menükomponente, mit der Sie Inhalte in einem Auswahlfeld formatieren können.

Die Popover API bietet Elementen eine integrierte Browserunterstützung, z. B.:

Unterstützung der obersten Ebene, sodass Sie z-index nicht verwalten müssen. Wenn Sie ein Pop-up oder Dialogfeld öffnen, wird dieses Element in eine spezielle Ebene oben auf der Seite verschoben.
In auto-Pop-ups ist jetzt standardmäßig das einfache Schließen verfügbar. Wenn Sie also außerhalb eines Elements klicken, wird das Pop-up geschlossen, aus dem Baum für Barrierefreiheit entfernt und der Fokus ordnungsgemäß verwaltet.
Standardzugänglichkeit für das Verbindungsgewebe des Pop-ups und das Pop-up selbst.

Das bedeutet, dass weniger JavaScript geschrieben werden muss, um all diese Funktionen zu erstellen und alle diese Status zu verfolgen.

Beispiel für ein Pop-over

Die DOM-Struktur für Pop-ups ist deklarativ und kann so klar geschrieben werden, dass Sie Ihrem Pop-up-Element ein id- und das popover-Attribut zuweisen. Anschließend synchronisieren Sie diese ID mit dem Element, das das Pop-over öffnen soll, z. B. einer Schaltfläche mit dem Attribut popovertarget:

<div id="event-popup" popover>
  <!-- Popover content goes in here -–>
</div>

<button popovertarget="event-popup">Create New Event</button>

popover ist eine Kurzschreibweise für popover=auto. Ein Element mit popover=auto erzwingt das Schließen anderer Pop-over, wenn es geöffnet wird, ist beim Öffnen im Fokus und kann leicht geschlossen werden. Umgekehrt schließen popover=manual-Elemente keinen anderen Elementtyp erzwungen, erhalten nicht sofort den Fokus und werden nicht leicht geschlossen. Sie werden über einen Schalter oder eine andere Schließaktion geschlossen.

Die aktuelle Dokumentation zu Pop-overs findest du derzeit auf MDN.

Positionierung der Anker

Popover werden auch häufig in Elementen wie Dialogfeldern und Kurzinfos verwendet, die normalerweise mit bestimmten Elementen verankert sein müssen. Nehmen wir dieses Ereignisbeispiel. Wenn Sie auf einen Kalendertermin klicken, wird in der Nähe des Termins ein Dialogfeld angezeigt. Das Kalenderelement ist der Anker und das Pop-up-Fenster ist das Dialogfeld, in dem die Ereignisdetails angezeigt werden.

Mit der Funktion anchor() können Sie eine zentrierte Kurzinfo erstellen. Dabei wird die Breite des Ankers verwendet, um die Kurzinfo bei 50% der x-Position des Ankers zu positionieren. Verwenden Sie dann die vorhandenen Positionierungswerte, um die restlichen Placement-Stile anzuwenden.

Was passiert aber, wenn das Pop-over aufgrund der Positionierung nicht in den Darstellungsbereich passt?

Pop-over, das aus dem Darstellungsbereich herausspringt

Die API zur Positionierung von Ankern enthält Fallback-Positionen, die Sie anpassen können. Im folgenden Beispiel wird eine Fallback-Position namens „top-then-bottom“ erstellt. Der Browser versucht zuerst, die Kurzinfo oben zu positionieren. Wenn sie nicht in den Darstellungsbereich passt, platziert er sie unten unter dem Ankerelement.

.center-tooltip {
  position-fallback: --top-then-bottom;
  translate: -50% 0;
}

@position-fallback --top-then-bottom {
  @try {
    bottom: calc(anchor(top) + 0.5rem);
    left: anchor(center);
  }

  @try {
    top: calc(anchor(bottom) + 0.5rem);
    left: anchor(center);
  }
}

Weitere Informationen zur Positionierung von Ankern finden Sie in diesem Blogpost.

`<selectmenu>`

Sowohl mit dem Pop-over als auch mit der Ankerpositionierung können Sie vollständig anpassbare Auswahlmenüs erstellen. Die OpenUI-Communitygruppe hat die grundlegende Struktur dieser Menüs untersucht und nach Möglichkeiten gesucht, die Inhalte darin anzupassen. Sehen wir uns diese visuellen Beispiele an:

Beispiele für Auswahlmenüs

Wenn Sie das Beispiel für selectmenu links mit farbigen Punkten erstellen möchten, die der Farbe entsprechen, die in einem Kalendertermin angezeigt werden würde, können Sie es so schreiben:

<selectmenu>
  <button slot="button" behavior="button">
    <span>Select event type</span>
    <span behavior="selected-value" slot="selected-value"></span>
    <span><img src="icon.svg"/></span>
  </button>
  <option value="meeting">
    <figure class="royalblue"></figure>
    <p>Meeting</p>
  </option>
  <option value="break">
    <figure class="gold"></figure>
     <p>Lunch/Break</p>
  </option>
  ...
</selectmenu>

Diskrete Property-Übergänge

Damit Popups reibungslos ein- und ausgeblendet werden können, muss das Web einzelne Eigenschaften animieren können. Dies sind Eigenschaften, die in der Vergangenheit in der Regel nicht animiert werden konnten, z. B. Animierungen zur und von der obersten Ebene sowie Animationen zu und von display: none.

Im Rahmen der Bemühungen, schöne Übergänge für Pop-over, Auswahlmenüs und sogar bestehende Elemente wie Dialogfelder oder benutzerdefinierte Komponenten zu ermöglichen, ermöglichen Browser neue Sanitärinstallationen zur Unterstützung dieser Animationen.

In der folgenden Popover-Demo werden Pop-ups mit :popover-open für den geöffneten Zustand und @starting-style für den Zustand vor dem Öffnen animiert. Für den Zustand „Nach dem Öffnen geschlossen“ wird dem Element direkt ein Transform-Wert zugewiesen. Damit dies auch bei Displayanzeigen funktioniert, muss der transition-Eigenschaft wie folgt hinzugefügt werden:

.settings-popover {
  &:popover-open {
    /*   0. before-change   */
    @starting-style {
      transform: translateY(20px);
      opacity: 0;
    }

    /*   1. open (changed) state   */
    transform: translateY(0);
    opacity: 1;
  }

  /*   2. After-change state */
  transform: translateY(-50px);
  opacity: 0;

  /*  enumarate transitioning properties, including display */
  transition: transform 0.5s, opacity 0.5s, display 0.5s allow-discrete;
}

Interaktionen

Damit kommen wir zu den Interaktionen – der letzten Station in dieser Tour durch die Funktionen der Benutzeroberfläche.

Wir haben bereits über die Animation einzelner Eigenschaften gesprochen, aber es gibt auch einige wirklich spannende APIs für Chrome, die sich um scrollbasierte Animationen und Ansichtsübergänge drehen.

Scroll-Animationen

Unterstützte Browser

Quelle

Bei Scroll-Animationen können Sie die Wiedergabe einer Animation basierend auf der Scrollposition eines Scrollcontainers steuern. Das bedeutet, dass die Animation beim Scrollen nach oben oder unten vor- oder zurückgeblendet wird. Außerdem können Sie mit scrollbasierten Animationen eine Animation basierend auf der Position eines Elements innerhalb seines Scrollcontainers steuern. So lassen sich interessante Effekte wie ein Parallaxe-Hintergrundbild, Fortschrittsbalken beim Scrollen und Bilder erstellen, die sich erst zeigen, wenn sie in den Blick kommen.

Diese API unterstützt eine Reihe von JavaScript-Klassen und CSS-Eigenschaften, mit denen Sie ganz einfach deklarative scrollbasierte Animationen erstellen können.

Wenn Sie eine CSS-Animation durch Scrollen steuern möchten, verwenden Sie die neuen Eigenschaften scroll-timeline, view-timeline und animation-timeline. Um eine JavaScript Web Animations API zu starten, übergeben Sie eine ScrollTimeline- oder ViewTimeline-Instanz als timeline-Option an Element.animate()

Diese neuen APIs funktionieren in Verbindung mit den vorhandenen Web Animations APIs und CSS Animations APIs. Sie profitieren also von den Vorteilen dieser APIs. Dazu gehört auch die Möglichkeit, dass diese Animationen über den Hauptthread ausgeführt werden. Ja, Sie haben richtig gelesen: Mit nur wenigen zusätzlichen Codezeilen können Sie jetzt flüssige, vom Scrollen gesteuerte Animationen im Hauptthread ausführen. Was gibt es da nicht zu mögen?

Eine ausführliche Anleitung zum Erstellen dieser scrollbasierten Animationen finden Sie in diesem Artikel.

Übergänge ansehen

Unterstützte Browser

Quelle

Mit der View Transition API lässt sich das DOM ganz einfach in einem einzigen Schritt ändern und gleichzeitig ein animierter Übergang zwischen den beiden Zuständen erstellen. Das kann ein einfaches Überblenden zwischen den Ansichten sein, aber Sie können auch festlegen, wie einzelne Teile der Seite übergehen sollen.

Ansichtsübergänge können als progressive Verbesserung verwendet werden: Nehmen Sie Ihren Code, der das DOM mit einer beliebigen Methode aktualisiert, und umschließen Sie ihn in der View Transition API mit einem Fallback für Browser, die diese Funktion nicht unterstützen.

function spaNavigate(data) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow(data);
    return;
  }

  // With a transition:
  document.startViewTransition(() => updateTheDOMSomehow(data));
}

Wie der Übergang aussehen sollte, wird über CSS gesteuert

@keyframes slide-from-right {
  from { opacity: 0; transform: translateX(75px); }
}

@keyframes slide-to-left {
  to { opacity: 0; transform: translateX(-75px); }
}

::view-transition-old(root) {
  animation: 350ms both slide-to-left ease;
}

::view-transition-new(root) {
  animation: 350ms both slide-from-right ease;
}

Wie in dieser tollen Demo von Maxi Ferreira gezeigt, funktionieren andere Seiteninteraktionen wie ein abgespieltes Video auch während eines Ansichtsübergangs.

„Übergänge anzeigen“ funktioniert derzeit mit Single-Page-Apps (SPAs) aus Chrome 111. An der Unterstützung für mehrseitige Apps wird gearbeitet. Weitere Informationen finden Sie in unserem vollständigen Leitfaden zu Ansichtsübergängen.

Fazit

Aktuelle Informationen zu CSS und HTML finden Sie hier auf developer.chrome.com. In den I/O-Videos finden Sie weitere Informationen zu Web-Landingpages.