Karussells mit CSS

Adam Argyle

Veröffentlicht: 20. März 2025

Ab Chrome 135 können Sie Funktionen aus der CSS Overflow 5-Spezifikation verwenden, die für Scroll- und Karussellfunktionen entwickelt wurden.

In diesem Beitrag finden Sie einen Überblick über viele verschiedene Scroll- und Karussell-Beispiele, die mit diesen neuen Funktionen und ohne JavaScript erstellt wurden. Sehen Sie sich das folgende Video an und lassen Sie sich von den Möglichkeiten inspirieren.

Im Video ist eine harmonische Kombination aus Scrollbalken, Scrollmarkierungen, scrollbasierten Animationen, scroll-state()-Abfragen, :has(), Raster, Anker und vielem mehr zu sehen.

Noch beeindruckender ist die Geschichte der Barrierefreiheit.

Die Best Practices für Karussells werden vom Browser verarbeitet, da die Entwicklungs- und die Barrierefreiheitsteams zusammenarbeiten. Es wäre sehr schwierig, ein barrierefreieres Karussell zu erstellen.

Screenshot des Chrome-Entwicklertools-Karussells „Zugänglichkeitsstruktur“ – Demo

Treffen mit ::scroll-button() und ::scroll-marker()

Ein Karussell ist ein scrollbarer Bereich mit bis zu zwei zusätzlichen UI-Affordances – Schaltflächen und Markierungen.

In Version 1 der CSS-Karussellfunktionen werden die Schaltflächen und Markierungen aus CSS erstellt. Der Browser platziert die Elemente als Geschwister mit den richtigen Rollen in der richtigen Tab-Reihenfolge und behält ihren Status bei. Das erleichtert die Entwicklung eines barrierefreien Karussells.

• Bildlaufschaltflächen:
  Von Browsern bereitgestellte, zustandsabhängige und interaktive Scrollelemente<button>, die den Zugriff auf Inhalte erleichtern und beim Drücken um 85% eines Bildlaufbereichs scrollen.

• Bildlaufmarkierungen
  Vom Browser bereitgestellte, zustandsabhängige Navigationselemente<a>, die den Zugriff auf Inhalte für alle angeforderten Elemente im Bildlaufbereich erleichtern.

Im Rest dieses Beitrags wird gezeigt, wie Sie mit diesen neuen Funktionen ein Karussell erstellen.

Mit einem Scroller beginnen

Sie können jedem scrollbaren Bereich auf Ihrer Website Schaltflächen und Markierungen hinzufügen.

Mit dem folgenden CSS wird ein einfacher Scrollbereich erstellt, dem in späteren Schritten Schaltflächen und Markierungen hinzugefügt werden. Für ein Karussell ist kein Scroll-Snapping erforderlich, in diesem Beispiel wird es jedoch verwendet. Karussells funktionieren auch für vertikale und bidirektionale Bildlaufleisten.

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  > li {
    scroll-snap-align: center;
  }
}

Ein scrollbarer Bereich, der ohne weitere Hinweise oder Aufforderungen angezeigt wird, außer dass Inhalte abgeschnitten werden.

Mit ::scroll-button() Bildlaufschaltflächen hinzufügen

Je nach Betriebssystem sind möglicherweise bereits Scrollbalken vorhanden. Eingebettete Bildlaufleisten-Schaltflächen bewegen den Bildlaufbereich in der Regel nur unwesentlich, während CSS-Bildlaufschaltflächen 85% des Bildlaufbereichs abdecken.

Bei Karussells, in denen jeweils nur ein Element in voller Breite mit Anfangspunkten für das Scrollen angezeigt wird, wirkt es, als würde die Anzahl der Aufrufe pro Element gezählt. Bei langen Listen mit Elementen, von denen mehrere gleichzeitig zu sehen sind, wird fast eine ganze Seite gescrollt.

Hinweis:Wenn die Schaltflächen jeweils genau einen Artikel verschieben sollen, verwenden Sie für jedes Snap-untergeordnete Element scroll-snap-type: x mandatory in Kombination mit scroll-snap-stop: always.

So fügen Sie mit CSS Scrollbalken hinzu:

1. Fügen Sie sie wie andere Pseudoelemente mit einem Selektor hinzu: .carousel::scroll-button(right) für eine Schaltfläche zum Scrollen nach rechts.
2. Geben Sie content mit einem optionalen barrierefreien alternativen Alt-Text an.

Der Browser erstellt echte Schaltflächen mit Ihren Inhalten als Geschwister des Scrollers. Sie können diese Schaltflächen jetzt nach Bedarf anordnen, stylen oder anchor(). Mit dem folgenden CSS-Code werden zwei Schaltflächen erstellt, eine für das Scrollen nach links und eine für das Scrollen nach rechts.

.carousel {
  …

  &::scroll-button(left) {
    content: "⬅" / "Scroll Left";
  }
  
  &::scroll-button(right) {
    content: "⮕" / "Scroll Right";
  }

  &::scroll-button(*)::focus-visible {
    outline-offset: 5px;
  }
}

Demo

Scrollmarkierungen mit ::scroll-marker() hinzufügen

Ähnlich wie das Schiebereglerelement können CSS-Bildlaufmarkierungen einen Hinweis auf die Größe des Karussells geben und gleichzeitig die Möglichkeit bieten, schnell zum Ende oder Anfang zu springen. Ein CSS-Bildlaufpunkt unterscheidet sich von der Bildlaufleiste, da jeder Punkt ein Link ist, der beliebige Elemente im Bildlaufbereich darstellen kann.

Ein Beispiel für diesen Unterschied sind die Staffeln einer Fernsehserie. Erstelle stattdessen zwei Markierungen, die zum Anfang des Kapitels führen, anstatt für jede der zehn Folgen eine Markierung zu erstellen.

Beachten Sie, dass es sich bei diesen Markierungen nicht um Punkte handelt. Sie verwenden die Property content: "Season 1" des Pseudoelements. Markierungen können auch Thumbnails sein, die häufig für Galeriekarussells auf E-Commerce-Websites oder fotoorientierten Websites verwendet werden.

Markierungen ähneln <a>-Links auf einer Seite, haben aber einige spezielle Funktionen:

1. Sie enthalten den Status :target-current, wenn die Markierung im Blickfeld ist oder angedockt ist.
2. Die Tastaturnavigation ist enthalten und funktioniert wie bei einer Konzentrationsgruppe.
3. Screenreader werden unterstützt und Berichte sind beispielsweise in Form einer Tabliste verfügbar.

So fügen Sie wichtigen Punkten in Ihrem Scroller Markierungen hinzu:

1. Legen Sie das Placement der scroll-marker-group als before oder after fest.
2. Wählen Sie die POIs mit einer Auswahl .carousel .point-of-interest::scroll-marker aus.
3. Geben Sie content mit einem optionalen barrierefreien Fallback-Alt-Text an, z. B. Zahlen, Text, leer oder ein Bild.

Der Browser erstellt alle Markierungen und fügt sie in den Container der Markierungsgruppe ein. In diesem Beispiel wird für jede <li> eine leere Markierung erstellt, um für jeden Artikel einen Markierungspunkt zu erstellen.

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
    
    &:target-current {
      background: var(--accent);
    }
  }
}

Demo

Das enthaltende Element der Markierungen wird als ::scroll-marker-group bezeichnet und wird genau wie die Bildlaufschaltflächen als Geschwisterelement des Bildlaufs erstellt. Dieser Container kann gestaltet und an einer beliebigen Stelle platziert werden.

Markierungen und Schaltflächen gleichzeitig

Zusammengenommen sehen sie aus wie ein Karussell, bieten aber folgende Vorteile:

• Funktioniert auch bei deaktiviertem JavaScript.
• Keine Hydratisierung oder Lazy Sizing (CLS reduzieren).
• Unterstützt alle Arten von Scroll-Animationen und -Triggern.
• Barrierefreiheit ist inbegriffen.
• Sie sind für Touchbedienung, Maus und Tastatur geeignet.

Weniger Aufwand, mehr Reichweite, schnellere Ergebnisse

Demo

Ressourcen

In diesem Beitrag werden diese Funktionen hauptsächlich als „Karussell“ bezeichnet. Ihre Funktionen und Vorteile gehen jedoch weit über die Anwendungsfälle von Karussells hinaus. Um sich ein vollständiges Bild von den Möglichkeiten dieser neuen Funktionen zu machen, sollten Sie die Karussell-Galerie und andere Komponenten wie Scrollspy, Tabs und Folien ausprobieren.

• Webstandards
  • CSS Overflow 5
  • Karussell – Erläuterung
  • WAI Aria-Karussell
• Chrome
  • Versandabsicht
  • Karussell-Galerie
  • Karussell-Konfigurator

Karussell-Konfigurator

Für visuelle und interaktive Lernende empfehlen wir den Karussell-Konfigurator.

Es bietet Schalter, z. B. für Bildlaufschaltflächen. Wenn diese aktiviert sind, werden im angezeigten Karussell sofort Schaltflächen und das zugehörige CSS verwendet.

https://chrome.dev/carousel-configurator/

Außerdem enthält es Beispiele für erweiterte Konzepte, die sich auf Karussells beziehen:

• Interaktivität
• scroll-state
• Scrollanimation
• und Spalten mit Scroll-Snap

Karussell-Galerie

Ein Vorstellungsbereich für alle, die wissen möchten, wie weit sie diese Funktionen nutzen können. Hier werden Fragen wie „Kann ich damit X tun?“ beantwortet. Jede Demo basiert auf einem Anwendungsfall, der im Internet gefunden wurde. In jeder Demo wird gezeigt, wie diese Schaltflächen und Markierungen mithilfe von Scroll-animierten Animationen, scroll-state()-Abfragen und vielem mehr gesteuert werden.

Fun Fact: Die gesamte Website ist ohne JavaScript.

https://chrome.dev/carousel/

Die Beispiele reichen von erfreulich einfach bis hin zu fantastisch robust und funktionsreich. Das Stöbern in der Galerie sollte inspirierend, beruhigend und natürlich für den Code, den Sie übernehmen möchten, inspizierbar sein. Suchen Sie in @layer utilities nach Tools, mit denen Sie Karussells erstellen können.

Weitere Arbeit

Wir sind stolz darauf, wie gut sich diese Funktionen in HTML und CSS integrieren lassen. Die Barrierefreiheit eines CSS-Karussells ist erstklassig. Die Leistung eines CSS-Karussells ist besser als die einer JavaScript-Lösung. Die Nutzerfreundlichkeit eines CSS-Karussells ist natürlich, flüssig und reichhaltig. Es gibt jedoch Möglichkeiten, die Situation zu verbessern.

Eigene Elemente verwenden

Wir arbeiten bereits daran, dass Sie eigene Komponenten für Scroll-Schaltflächen und Markierungen hinzufügen können. Sie können also eigene <a>-Tags mit Rich-Inhalten wie Symbolen bereitstellen. Sie können auch eigene mehrschichtige Schaltflächen verwenden, die mit Tailwind erstellt wurden.

Zyklisches Scrollen

Viele Karussells enden am Ende wieder an derselben Stelle, wie es bei einem Karussell auf einer Kirmes der Fall sein kann. Wir sind uns dieser Problematik bewusst und arbeiten daran, eine Plattformlösung dafür zu entwickeln.

Wir hoffen, dass Sie diese Funktion hilfreich finden. Wir freuen uns, dass alle Webnutzer, die JavaScript deaktiviert haben, jetzt ein schönes scrollbares Erlebnis haben und dass durch den besser getakteten Lebenszyklus eines integrierten Karussells die CLS-Werte gesenkt werden können.

Weniger Arbeit für Sie, bessere Nutzerfreundlichkeit, höhere Leistung.