`::column` CSS pseudo-element

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Das ::column CSS Pseudoelement repräsentiert die individuellen Spalten, die erzeugt werden, wenn ein Container so eingestellt ist, dass er seinen Inhalt in mehreren Spalten über das CSS-Multispalten-Layout anzeigt. Das ::column-Pseudoelement ermöglicht das Anwenden von Styles, die das Layout dieser erzeugten Fragmente nicht beeinflussen.

Syntax

css

::column {
  /* ... */
}

Beschreibung

Wenn das CSS-Multispalten-Layout verwendet wird, um den Inhalt eines Containers in mehreren Spalten darzustellen (zum Beispiel mit der column-count-Eigenschaft), werden ::column-Pseudoelemente erzeugt, die jede einzelne Spalte enthalten.

Das ::column-Pseudoelement akzeptiert nur "Scroll Snap" Eigenschaften, die auf Elemente innerhalb eines Scroll-Containers angewendet werden, einschließlich scroll-margin, scroll-snap-align und scroll-snap-stop.

Das ::column-Pseudoelement kann ein ::scroll-marker-Pseudoelement haben. Andere Pseudoelemente wie ::before und ::after werden nicht auf ::column erzeugt. Das Anwenden von ::column::scroll-marker erstellt einen Marker für jede Spalte des ursprünglichen Scroll-Containers, wobei die ::scroll-marker-Pseudoelemente vom Ursprungselement des ::column-Pseudoelements statt vom ::column selbst erben.

Dies ist nützlich für CSS-Karussells — ::column kann verwendet werden, um ::scroll-marker-Pseudoelemente für jede Spalte zu erzeugen und sie als Snap-Ziele mit CSS-Scroll-Snap festzulegen.

Während die Stile, die auf ::column angewendet werden können, sehr begrenzt sind, könnten sie in Zukunft erweitert werden. Alle in Zukunft unterstützten Eigenschaften und Werte werden auf solche beschränkt sein, die das Layout nicht beeinflussen.

Beispiele

Scrollendes Spaltenlayout

Dieses Demo erstellt einen responsiven Container, der jede "Seite" des Inhalts einrastet. Es verwendet die columns-Eigenschaft und das ::column-Pseudoelement, um Inhalts-Spalten zu erstellen, die die gesamte Breite ihres Eltern-Scroll-Containers einnehmen, der horizontal gescrollt werden kann. Jede Spalte enthält ein oder mehrere Listenelemente, deren Anzahl je nach Viewport-Breite variiert.

HTML

Das HTML besteht aus einer ungeordneten Liste, wobei jedes Listenelement einige Beispielinhalte enthält:

html

<ul>
...
  <li>
    <h2>Item 1</h2>
  </li>
...
</ul>

<ul>
  <li>
    <h2>Item 1</h2>
  </li>
  <li>
    <h2>Item 2</h2>
  </li>
  <li>
    <h2>Item 3</h2>
  </li>
  <li>
    <h2>Item 4</h2>
  </li>
  <li>
    <h2>Item 5</h2>
  </li>
  <li>
    <h2>Item 6</h2>
  </li>
  <li>
    <h2>Item 7</h2>
  </li>
  <li>
    <h2>Item 8</h2>
  </li>
  <li>
    <h2>Item 9</h2>
  </li>
  <li>
    <h2>Item 10</h2>
  </li>
  <li>
    <h2>Item 11</h2>
  </li>
  <li>
    <h2>Item 12</h2>
  </li>
  <li>
    <h2>Item 13</h2>
  </li>
  <li>
    <h2>Item 14</h2>
  </li>
  <li>
    <h2>Item 15</h2>
  </li>
</ul>

CSS

Der Liste wird eine feste height und eine width von 100vw zugewiesen, um sie über die gesamte Breite des Viewports zu spannen. Ein overflow-x-Wert von scroll wird dann eingestellt, damit der Inhalt horizontal gescrollt werden kann und CSS-Scroll-Snap verwendet wird, um zu jedem Element oder "Seite" zu snappen — ein scroll-snap-type-Wert von x mandatory wird verwendet, um die Liste in einen Scroll-Snap-Container zu verwandeln. Schließlich wird ein columns-Wert von 1 eingestellt, um den Listeninhalt als einzelne Spalte darzustellen. Ein text-align-Wert von center wird ebenfalls angewendet, um den Inhalt mittig auf der Liste auszurichten.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Helvetica", "Arial", sans-serif;
}

css

ul {
  width: 100vw;
  height: 300px;
  padding: 10px;

  overflow-x: scroll;
  scroll-snap-type: x mandatory;

  columns: 1;
  text-align: center;
}

Die Listenelemente werden dann gestylt:

Ein display-Wert von inline-block wird eingestellt, damit die Listenelemente nebeneinander sitzen und die Liste horizontal gescrollt werden kann.
Eine feste width und height wurde für sie festgelegt.
Ein text-align-Wert von left ist auf sie gesetzt, um den text-align: center, der auf dem übergeordneten Container gesetzt ist, zu überschreiben, sodass der Elementinhalt linksbündig ausgerichtet wird.
Jedes gerade Listenelement erhält eine andere Hintergrundfarbe über :nth-child(), sodass der Scrolling-Effekt leichter zu sehen ist.

css

li {
  list-style-type: none;

  display: inline-block;
  height: 100%;
  width: 200px;
  text-align: left;

  background-color: #eeeeee;
  outline: 1px solid #dddddd;
  padding: 0 20px;
  margin: 0 10px;
}

li:nth-child(even) {
  background-color: cyan;
}

Die scroll-snap-align-Eigenschaft ist auf die ::column-Pseudoelemente gesetzt — die die durch die columns-Eigenschaft erzeugten Inhaltsspalten repräsentieren — sodass beim Scrollen eine Spalte im Zentrum des Scroll-Containers eingerastet wird.

css

ul::column {
  scroll-snap-align: center;
}

Ergebnis

Spaltenbasiertes Karussell mit Scrollmarkern

Aufbauend auf dem vorherigen Beispiel erstellen wir Scrollmarker, um die direkte Navigation zu verschiedenen Spalten zu ermöglichen, indem wir eine scroll-marker-group auf den Container anwenden und ein ::scroll-marker auf jedes ::column-Pseudoelement setzen. Das HTML bleibt unverändert.

CSS

Wir erstellen eine Scrollmarker-Gruppe mit der scroll-marker-group-Eigenschaft und platzieren die Gruppe nach dem gesamten Inhalt:

css

ul {
  scroll-marker-group: after;
}

Wir wenden dann Stile auf das ::scroll-marker-group-Pseudoelement an, um die Scrollmarker in der Mitte der Reihe mit einem 0.4em-Abstand zwischen jedem zu layouten:

css

::scroll-marker-group {
  display: flex;
  gap: 0.4em;
  place-content: center;
}

Schließlich verwenden wir das ::scroll-marker-Pseudoelement, um einen runden, transparenten Marker für jedes Listenelement mit einem schwarzen Rand zu erstellen, und stylen dann den Marker des aktuell gescrollten Elements anders als die anderen, indem wir den Marker mit der :target-current-Pseudoklasse anvisieren:

css

ul::column::scroll-marker {
  content: "";
  width: 16px;
  height: 16px;
  background-color: transparent;
  border: 2px solid black;
  border-radius: 10px;
}

ul::column::scroll-marker:target-current {
  background-color: black;
}

Ergebnis

Versuchen Sie, die Scrollmarker zu drücken, um direkt zu jeder Seite zu springen. Beachten Sie, wie der aktuelle Marker hervorgehoben wird, damit Sie sehen können, wo Sie sich in der Paginierung befinden. Versuchen Sie auch, zur Scrollmarker-Gruppe zu tabben, und verwenden Sie dann die Pfeiltasten, um durch jede Seite zu blättern.

Sehen Sie Creating CSS carousels für weitere Beispiele von Karussells.