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. Neue Plattformfunktionen sind mit enger plattformübergreifender Akzeptanz eingeführt worden, die mehr Webfunktionen und Anpassungsfunktionen als je zuvor unterstützen.

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

Containerabfragen
Stilabfragen
:has()-Auswahl
nth-of-microsyntax
text-wrap: balance
initial-letter
Dynamische Viewport-Einheiten
Farbräume mit breitem Farbumfang
color-mix()
Verschachtelung
Ebenen kaskadieren
Stil mit Bereich
Trigonometrische Funktionen
Einzelne Transformeigenschaften
Pop-up
Ankerpositionierung
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. Sie können damit die Größe und den Stil eines übergeordneten Elements abfragen, um die Stile zu ermitteln, die auf seine 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, mit dem beliebig viele Layouts oder Layouts innerhalb von Layouts unterstützt werden können.

Im folgenden Beispiel für einen Posteingang sind sowohl die Seitenleiste Primärer Posteingang als auch Favoriten Container. Die E-Mails passen ihr Rasterlayout an und blenden den E-Mail-Zeitstempel je nach verfügbarem Platz ein oder aus. Es handelt sich dabei um dieselbe Komponente auf der Seite, die nur in verschiedenen Ansichten angezeigt wird.

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 zu einer oberen Leiste mit mehr Platz und das Layout ähnelt dem des primären Posteingangs. 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. Diese Funktion ist derzeit in Chrome 111 teilweise implementiert. Dort können Sie benutzerdefinierte CSS-Properties verwenden, um Container-Stile anzuwenden.

Im folgenden Beispiel werden Wettereigenschaften verwendet, die in benutzerdefinierten Attributwerten gespeichert sind, z. B. „Regen“, „Sonnenschein“ und „Bedeckt“, 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 haben, um zu ermitteln, ob ein benutzerdefinierter Property-Wert vorhanden ist, und so Codewiederholungen reduzieren. Derzeit werden Bereichsabfragen diskutiert, um Stile basierend auf einem Wertebereich anzuwenden. 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 in modernen Browsern. 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 von übergeordneten Elementen 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. Mit der Auswahl :has() hast du Zugriff auf übergeordnete, untergeordnete und sogar gleichgeordnete Elemente. Das macht diese API sehr flexibel und es gibt 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. Wenn Sie beispielsweise :has() verwenden, um nach Übereinstimmungen im Stamm-HTML-Element zu suchen, ist das 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 für das n-te Kind bietet ein neues Keyword („von“), mit dem Sie die vorhandene Mikrosyntax von „An+B“ mit einer genaueren Teilmenge verwenden können, in der gesucht werden soll.

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-tes von“.

`text-wrap: balance`

Logik kann nicht nur in Selektoren und Stilabfragen, sondern auch in der Typografie eingebettet werden. Ab Chrome 114 können Sie für Überschriften die Textumbruchausrichtung verwenden. Verwenden Sie dazu das Attribut text-wrap mit dem Wert balance.

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. Dabei wird bei einem CSS-Pixel (nicht Displaypixel) angehalten. 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 Verbesserung der Webtypografie ist initial-letter. Mit dieser CSS-Property haben Sie mehr Kontrolle über das Styling von eingerückten Initialen.

Mit initial-letter auf dem Pseudo-Element :first-letter können Sie Folgendes angeben: Die Größe des Buchstabens basierend darauf, wie viele Zeilen er einnimmt. Der Block-Offset oder „Sink“ des Buchstabens, der angibt, wo der Buchstabe platziert wird.

Weitere Informationen zur Verwendung von intial-letter

Dynamische Ansichtseinheiten

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 Höhe des Darstellungsbereichs) bedeutet, dass das Element so hoch wie der Darstellungsbereich ist. Das Element vh berücksichtigt jedoch nicht Dinge wie einfahrbare Navigationsleisten auf Mobilgeräten. Daher ist es manchmal zu lang und es muss gescrollt werden.

Zu viele Scrollleisten

Um dieses Problem zu beheben, gibt es jetzt auf der Webplattform neue Maßeinheiten: – „Small viewport height“ und „Small viewport width“ (svh und svw) für die kleinste aktive Darstellungsgröße. – Höhe und Breite des großen Darstellungsbereichs (lvh und lvw), die die größte Größe darstellen. – Dynamische Höhe und Breite des Darstellungsbereichs (dvh und dvw)

Der Wert dynamischer Ansichtseinheiten ändert sich, wenn die zusätzlichen dynamischen Browsersymbolleisten, z. B. die Adressleiste oben oder die Tab-Leiste unten, sichtbar sind oder nicht.

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 neuer Bestandteil der Webplattform sind Farbräume mit großem Farbumfang. Bevor die Wide-Gamut-Farbe auf der Webplattform verfügbar war, konnten Sie ein Foto mit leuchtenden Farben aufnehmen, das auf modernen Geräten angezeigt werden konnte. Es war jedoch nicht möglich, eine Schaltfläche, eine Textfarbe oder einen Hintergrund zu finden, der zu diesen leuchtenden Farben passte.

Eine Reihe von Bildern zeigt den Übergang zwischen einer breiten und einer schmalen Farbskala, um die Farbbrillanz und ihre Auswirkungen zu veranschaulichen.
Selber ausprobieren

Jetzt gibt es auf der Webplattform eine Reihe neuer Farbräume, darunter REC2020, P3, XYZ, LAB, OKLAB, LCH und OKLCH. Weitere Informationen zu den neuen Web-Farbräumen finden Sie im HD-Farbleitfaden.

Fünf übereinanderliegende Dreiecke in verschiedenen Farben, die die Beziehung und 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 jetzt noch mehr Tools für die Farbgebung. 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. Mit dieser Funktion können zwei Farbwerte gemischt werden, um neue Werte basierend auf den Kanälen der gemischten 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 noch blau. — Demo testen

Die Funktion color-mix() bietet eine seit langem gewünschte Funktion: die Möglichkeit, opake Farbwerte beizubehalten und ihnen gleichzeitig etwas Transparenz hinzuzufügen. 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 DevTools mit dem Venn-Diagramm-Symbol für die Farbmischung

Weitere Beispiele und Details finden Sie in unserem Blogpost zu „color-mix“ oder in der Playground-Anwendung für „color-mix“.

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 strukturiertere CSS-Architektur schaffen. Dazu gehören CSS-Verschachtelung, kaskadierende Ebenen, stilisierte Bereiche, trigonometrische Funktionen und individuelle Transformierungseigenschaften.

Verschachtelung

Unterstützte Browser

Quelle

Das CSS-Verschachteln, eine beliebte Funktion von Sass und seit Jahren eine der Top-Anfragen von CSS-Entwicklern, wird endlich auf der Webplattform eingeführt. Durch das Verschachteln können Entwickler in einem prägnanteren, gruppierten Format schreiben, wodurch Redundanz reduziert wird.

.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-Layout geändert, wenn der Container breit genug ist:

.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 weiterer von uns identifizierter Schmerzpunkt für Entwickler besteht darin, für Konsistenz bei der Auswahl der Stile zu sorgen. Eine Möglichkeit, dies zu lösen, ist eine bessere Kontrolle über die CSS-Kaskade.

Kaskadierende 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-Stilbereichen können Entwickler die Grenzen festlegen, für die bestimmte Stile gelten. Im Grunde wird so ein nativer Namespacing 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

Ein weiteres neues CSS-Element sind die trigonometrischen Funktionen, die den vorhandenen mathematischen CSS-Funktionen 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 Transformationseigenschaften

Unterstützte Browser

Quelle

Die Ergonomie für 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 der Verschiebung, Drehung oder Skalierung gleichzeitig mit unterschiedlichen Änderungsraten zu verschiedenen Zeitpunkten während der Animation erfolgen.

Weitere Informationen finden Sie in diesem Beitrag 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 Auswahlmenü 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. Wenn ein Element popover=auto enthält, werden andere Pop-ups beim Öffnen dieses Elements geschlossen. Es erhält den 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 aktuellste Dokumentation zu Pop-ups finden Sie derzeit in der MDN.

Ankerpositionierung

Pop-ups werden auch häufig in Elementen wie Dialogfeldern und Kurzinfos verwendet, die in der Regel an bestimmten Elementen verankert werden müssen. Sehen wir uns ein Beispiel an. 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. Verwenden Sie dazu die Breite des Ankers, um die Kurzinfo bei 50% der X-Position des Ankers zu positionieren. Verwenden Sie dann vorhandene Positionierungswerte, um die restlichen Placement-Stile anzuwenden.

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

Pop-over wird aus dem Darstellungsbereich herausgeschoben

Die API zur Positionierung von Ankern enthält daher 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 platzieren. Wenn sie nicht in den Darstellungsbereich passt, wird sie unter dem An anchor-Element unten platziert.

.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

Das Beispiel für das selectmenu links mit farbigen Punkten, die der Farbe entsprechen, die in einem Kalendertermin angezeigt werden würde, können Sie 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 es im Web eine Möglichkeit geben, einzelne Eigenschaften zu animieren. Das sind Eigenschaften, die in der Vergangenheit in der Regel nicht animiert werden konnten, z. B. Animationen von und zur obersten Ebene und von und zu display: none.

Im Rahmen der Bemühungen, ansprechende Übergänge für Pop-ups, Auswahlmenüs und sogar vorhandene Elemente wie Dialogfelder oder benutzerdefinierte Komponenten zu ermöglichen, werden in Browsern neue Funktionen zur Unterstützung dieser Animationen eingeführt.

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 das alles funktioniert, muss es der Property transition 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

Das bringt uns zu Interaktionen, der letzten Station auf dieser Tour durch die Funktionen der Web-UI.

Wir haben bereits über das Animieren 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

Mit scrollbasierten 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. Wenn du eine JavaScript Web Animations API verwenden möchtest, musst du Element.animate() eine ScrollTimeline- oder ViewTimeline-Instanz als timeline-Option übergeben.

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, diese Animationen über den Hauptthread auszuführen. 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 den Code, mit dem das DOM auf beliebige Weise aktualisiert wird, und verpacken Sie ihn in der View Transition API mit einem Fallback für Browser, die die 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 die Übergänge aussehen, 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.

Ansichtsübergänge funktionieren derzeit mit SPAs (Single-Page-Apps) ab 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.