::column

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

Der ::column CSS Pseudo-Element repräsentiert die einzelnen Spalten, die generiert werden, wenn ein Container so eingestellt ist, dass sein Inhalt über mehrere Spalten mittels CSS Mehrspaltenlayout angezeigt wird. Das ::column Pseudo-Element ermöglicht das Anwenden von Stilen, die das Layout dieser generierten Fragmente nicht beeinflussen.

Syntax

css

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

Beschreibung

Wenn ein CSS Mehrspaltenlayout verwendet wird, um den Inhalt eines Containers in mehreren Spalten anzuzeigen (beispielsweise durch die Verwendung der column-count Eigenschaft), werden ::column Pseudo-Elemente generiert, um jede einzelne Spalte zu enthalten.

Das ::column Pseudo-Element 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 Pseudo-Element kann ein ::scroll-marker Pseudo-Element haben. Andere Pseudo-Elemente wie ::before und ::after werden nicht auf ::column generiert. Die Anwendung von ::column::scroll-marker erstellt einen Marker für jede Spalte des ursprünglichen Scroll-Containers, wobei die ::scroll-marker Pseudo-Elemente von dem ursprünglichen Element des ::column Pseudo-Elements erben und nicht vom ::column selbst.

Dies ist nützlich für CSS Karusselle — ::column kann verwendet werden, um ::scroll-marker Pseudo-Elemente für jede Spalte zu generieren und diese als Snap-Ziele mit CSS Scroll Snap festzulegen.

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

Beispiele

Scrollendes Spaltenlayout

Dieses Beispiel erstellt einen responsiven Container, der jede "Seite" des Inhalts einrastet. Es verwendet die columns Eigenschaft und das ::columns Pseudo-Element, um Inhaltsspalten zu erstellen, die sich über die gesamte Breite ihres übergeordneten Scroll-Containers erstrecken und horizontal gescrollt werden können. Jede Spalte enthält ein oder mehrere Listenelemente, deren Anzahl je nach Ansichtsfensterbreite 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 volle Breite des Ansichtsfensters zu erstrecken. Ein overflow-x Wert von scroll wird dann festgelegt, sodass der Inhalt horizontal scrollen kann, und CSS Scroll Snap wird verwendet, um zu jedem Artikel oder "Seite" einzurasten — ein scroll-snap-type Wert von x mandatory wird verwendet, um die Liste zu einem Scroll-Snap-Container zu machen. Schließlich wird ein columns Wert von 1 festgelegt, um die Listeninhalte als eine einzige Spalte anzuzeigen. Ein text-align Wert von center wird ebenfalls angewendet, um den Inhalt in der Mitte der Liste auszurichten.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, 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 festgelegt, damit die Listenelemente nebeneinander sitzen und die Liste horizontal scrollt.
Eine feste width und height wurde auf sie gesetzt.
Ein text-align Wert von left wird auf sie angewendet, um das text-align: center des übergeordneten Containers zu überschreiben, sodass der Inhalt der Elemente linksbündig ist.
Jede gerade Listenelement erhält über :nth-child() eine andere Hintergrundfarbe, damit der Scrolling-Effekt leichter zu erkennen ist.

css

li {
  list-style-type: none;

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

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

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

Die scroll-snap-align Eigenschaft wird auf die ::column Pseudo-Elemente gesetzt, die die durch die columns Eigenschaft generierten Inhaltsspalten repräsentieren, sodass beim Scrollen eine Spalte in der Mitte des Scroll-Containers eingerastet wird.

css

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

Ergebnis

Karussell auf Basis von Spalten mit Scroll-Markern

Aufbauend auf dem vorherigen Beispiel, erstellen wir Scroll-Marker, um die direkte Navigation zu unterschiedlichen Spalten zu ermöglichen, indem wir eine scroll-marker-group auf den Container anwenden und eine ::scroll-marker auf jedes ::column Pseudo-Element. Das HTML bleibt unverändert.

CSS

Wir erstellen eine Scroll marker group mit der scroll-marker-group Eigenschaft, indem wir die Gruppe nach all dem Inhalt positionieren:

css

ul {
  scroll-marker-group: after;
}

Dann wenden wir Stile auf das ::scroll-marker-group Pseudo-Element an, um die Scroll-Marker in der Mitte der Reihe mit einem Abstand von 0.4em zwischen jedem zu layouten:

css

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

Zum Schluss verwenden wir das ::scroll-marker Pseudo-Element, um runde, transparente Marker für jedes Listenelement mit einem schwarzen Rand zu erstellen, dann gestalten wir den Marker des aktuell gescrollten Elements anders als die anderen, indem wir den Marker mit der :target-current Pseudo-Klasse ansprechen:

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 Scroll-Marker zu drücken, um direkt zu jeder Seite zu springen. Beachten Sie, wie der aktuelle Marker hervorgehoben ist, damit Sie sehen können, wo Sie sich in der Paginierung befinden. Versuchen Sie auch, zur Scroll marker group zu tabben, und verwenden Sie dann die Pfeiltasten, um durch jede Seite zu navigieren.

Siehe Erstellen von CSS Karussellen für weitere Karussell-Beispiele.

Spezifikationen

Specification
CSS Multi-column Layout Module Level 2 # column-pseudo

Browser-Kompatibilität

Siehe auch

columns
::scroll-marker
::scroll-marker-group
:target-current
Erstellen von CSS Karussellen
Modul CSS Mehrspaltenlayout
Modul CSS Überlauf
CSS Karussellgalerie über chrome.dev (2025)