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 die Erstellung von Scroll- und Karussellfunktionen entwickelt wurden.

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

Das Video zeigt eine Harmonie von Scroll-Schaltflächen, Scrollmarkierungen, scrollgesteuerter Animation, scroll-state()-Abfragen, :has(), Grid, Anker und vielem mehr.

Noch beeindruckender ist die Geschichte der Barrierefreiheit.

Best Practices für Karussells werden vom Browser übernommen, da die Engineering- und Accessibility-Teams zusammenarbeiten. Ein barrierefreieres Karussell als dieses ist kaum möglich.

::scroll-button() und ::scroll-marker() kennenlernen

Ein Karussell ist ein Scrollbereich mit bis zu zwei zusätzlichen UI-Elementen: Schaltflächen und Markierungen.

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

• Schaltflächen zum Scrollen
  Browserbereitgestellte, statusbehaftete und interaktive <button>-Elemente, die den Zugriff auf Inhalte und das Scrollen unterstützen. Beim Drücken wird 85% eines Scrollbereichs gescrollt.

• Scrollmarkierungen
  Browserbereitgestellte, statusbehaftete Navigationselemente <a>, die den Zugriff auf Inhalte für jedes angeforderte Element im Scrollbereich erleichtern.

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

Mit einem Scroller beginnen

Sie können jedem Scrollbereich 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. Scroll-Snapping ist für ein Karussell nicht erforderlich, wird in diesem Beispiel aber verwendet. Karussells funktionieren auch für vertikale und bidirektionale Scroller.

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

Scrollschaltflächen mit ::scroll-button() hinzufügen

Je nach Betriebssystem sind möglicherweise bereits Schaltflächen zum Scrollen in der Nähe der Scrollbalken vorhanden. Integrierte Scrollbalkenschaltflächen verschieben einen Scrollbereich in der Regel nur ein wenig, während CSS-Scrollschaltflächen den Scrollbereich um 85% verschieben.

Bei Karussells, in denen jeweils nur ein Element in voller Breite mit Scroll-Snap-Punkten angezeigt wird, fühlt sich das wie ein Betrag pro Element an. Bei langen Listen mit mehreren Elementen, die gleichzeitig zu sehen sind, wird fast eine ganze Seite gescrollt.

So fügen Sie Scrollschaltflächen mit CSS 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 optionalem barrierefreiem Fallback-Alt-Text an.

Der Browser erstellt echte Schaltflächen mit Ihren Inhalten als gleichgeordnete Elemente des Scrollers. Sie können diese Schaltflächen jetzt nach Bedarf anordnen, gestalten oder anchor(). Mit dem folgenden CSS werden zwei Schaltflächen erstellt, eine zum Scrollen nach links und eine zum Scrollen nach rechts.

.carousel {
  …

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

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

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

Ähnlich wie das Scrollleisten-Thumb-Element können CSS-Scrollmarkierungen auf die Größe des Karussells hinweisen und gleichzeitig die Möglichkeit bieten, schnell zum Ende oder Anfang zu wechseln. Eine CSS-Scrollmarkierung unterscheidet sich von der Scrollleiste, da jede Markierung ein Link ist, der ein beliebiges Element im Scroller darstellen kann.

Ein Beispiel für diesen Unterschied sind die Staffeln einer Fernsehserie. Anstatt für jede der 10 Folgen eine Markierung zu erstellen, erstellen Sie 2 Markierungen, die zum Anfang des Kapitels führen.

Beachten Sie, dass diese Markierungen keine Punkte sind, sondern die content: "Season 1"-Eigenschaft ihres Pseudoelements verwenden. Markierungen können auch Thumbnails sein, die häufig für Galeriekarussells auf E-Commerce- oder fotobasierten Websites verwendet werden.

Markierungen ähneln <a>-Links auf der Seite, haben aber einige Besonderheiten:

1. Sie enthalten den Status :target-current, wenn die Markierung sichtbar oder eingerastet ist.
2. Die Tastaturnavigation ist enthalten und verhält sich wie eine focusgroup.
3. Screenreader-Unterstützung ist enthalten und Berichte werden wie eine Tabliste dargestellt.

So fügen Sie Ihrem Scroller Markierungen für wichtige Points of Interest hinzu:

1. Definieren Sie die Platzierung von scroll-marker-group als before oder after.
2. Wählen Sie die POIs mit einem Auswahlfeld .carousel .point-of-interest::scroll-marker aus.
3. Geben Sie content mit optionalem Alt-Text für barrierefreien Fallback an: 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 jedes <li> ein leerer Marker erstellt, um für jedes Element einen Markierungspunkt zu erstellen.

.carousel {
  …

  scroll-marker-group: after;
  
  > li::scroll-marker {
    content: ' ';
  }

  > li::scroll-marker:target-current {
    background: var(--accent);
  }
}

Das enthaltende Element der Markierungen wird als ::scroll-marker-group bezeichnet und als gleichgeordnetes Element des Scrollers erstellt, genau wie die Schaltflächen zum Scrollen. Dieser Container kann formatiert und an einer beliebigen Stelle platziert werden.

Marker und Schaltflächen gleichzeitig

Wenn Sie die beiden zusammenfügen, sieht es aus wie ein Karussell, hat aber die folgenden Vorteile:

• Funktioniert auch, wenn JavaScript deaktiviert ist.
• Keine Hydrierung oder Lazy Sizing (CLS reduzieren).
• Für alle Arten von Scroll-Animationen und ‑Triggern geeignet.
• Barrierefreiheit ist inbegriffen.
• Touch-, Maus- und Tastaturfreundlich

Weniger Aufwand, mehr Reichweite, schneller.

Ressourcen

In diesem Beitrag werden diese Funktionen hauptsächlich als „Karussell“ bezeichnet, ihre Möglichkeiten und ihr Nutzen gehen jedoch weit über die Anwendungsfälle von Karussells hinaus. Wenn Sie das Potenzial dieser neuen Funktionen voll ausschöpfen möchten, probieren Sie die Komponente „Karussell-Galerie“ aus und sehen Sie sich andere Komponenten wie „Scrollspy“, „Tabs“ und „Folien“ an.

• Webstandards
  • CSS Overflow 5
  • Karussell – Erläuterungen
  • WAI Aria Carousel
• Chrome
  • Intent to Ship
  • Karussell-Galerie
  • Karussell-Konfigurator

Karussell-Konfigurator

Für visuelle und interaktive Lernende empfiehlt sich der Carousel Configurator.

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

Außerdem enthält es Beispiele für komplexere Konzepte, die mit Karussells zusammenhängen:

• Interaktivität
• scroll-state
• Scrollgesteuerte Animation
• und scroll snap columns

Karussell-Galerie

Ein Showcase-Bereich für alle, die wissen möchten, wie weit diese Funktionen gehen und Fragen wie „Kann es X?“ beantworten. Jede Demo basiert auf einem Anwendungsfall, der im Internet gefunden wurde. In jeder Demo wird gezeigt, wie diese Schaltflächen und Markierungen mit scrollgesteuerter Animation, scroll-state()-Abfragen und vielem mehr orchestriert werden.

Die gesamte Website kommt ohne JavaScript aus.

Die Beispiele reichen von angenehm einfach bis hin zu fantastisch robust und funktionsreich. Das Durchsuchen der Galerie sollte inspirierend und beruhigend sein und natürlich die Möglichkeit bieten, Code zu übernehmen. Suchen Sie nach @layer utilities und prüfen Sie, ob es Dienstprogramme gibt, die Ihnen beim Erstellen von Karussells helfen können.

Weitere Aufgaben

Wir sind stolz darauf, wie gut sich diese Funktionen in HTML und CSS einfügen. Die Barrierefreiheit eines CSS-Karussells ist hervorragend. Die Leistung eines CSS-Karussells ist besser als bei jeder JavaScript-Lösung. Die User Experience eines CSS-Karussells ist natürlich, flüssig und vielfältig. Es gibt jedoch Möglichkeiten, die Situation zu verbessern.

Eigene Elemente verwenden

Wir arbeiten bereits daran, dass Sie eigene Komponenten für Scrollschaltflächen und Markierungen hinzufügen können. Das bedeutet, dass Sie eigene <a>-Tags mit Rich Content wie Symbolen bereitstellen können. Sie können auch eigene mehrschichtige Schaltflächen mit Tailwind erstellen.

Zyklisches Scrollen

Viele Karussells werden am Ende wiederholt, wie bei einem Karussell auf einem Jahrmarkt. Wir sind uns dieses Problems bewusst und arbeiten an einer Plattformlösung.

Wir hoffen, dass Ihnen diese Funktion gefällt. Wir freuen uns auf alle Webnutzer, die JavaScript deaktiviert haben und jetzt eine schöne scrollbare Oberfläche erhalten, und auf die CLS-Reduzierungen, die sich aus dem besser getimten Lebenszyklus eines integrierten Karussells ergeben.

Weniger Aufwand, hohe Nutzerfreundlichkeit, bessere Leistung.