column-rule

Übersicht

In mehrspaltigen Layouts beschreibt die column-rule CSS Eigenschaft eine gerade Linie, welche zwischen jeder Spalte dargestellt wird. Sie ist eine komfortable Kurzform, um das separate Setzen der einzelnen column-rule-* Eigenschaften zu vermeiden: column-rule-width, column-rule-style und column-rule-color.

Initialwert	wie die jeweiligen Kurzschreibweisen: `column-rule-width`: `medium` `column-rule-style`: `none` `column-rule-color`: `currentcolor`
Anwendbar auf	mehrspaltige Elemente
Vererbt	Nein
Berechneter Wert	wie die jeweiligen Kurzschreibweisen: `column-rule-color`: berechnete Farbe `column-rule-style`: wie angegeben `column-rule-width`: die absolute Länge; `0` falls `column-rule-style` `none` oder `hidden` ist
Animationstyp	wie die jeweiligen Kurzschreibweisen: `column-rule-color`: Farbe `column-rule-style`: diskret `column-rule-width`: Längenangabe

Syntax

Formale Syntax: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>

Werte

Akzeptiert einen, zwei oder drei Werte in beliebiger Reihenfolge:

<column-rule-width>: Ist eine <length> oder eins der drei Schlüsselwörter thin, medium oder thick. Siehe border-width für Details.
<column-rule-style>: Siehe border-style für mögliche Werte und Details.
<column-rule-color>: Ist ein <color> Wert.

Beispiele

p.foo { column-rule: dotted; }          /* entspricht "medium dotted currentColor" */
p.bar { column-rule: solid blue; }      /* entspricht "medium solid blue" */
p.baz { column-rule: solid 8px; }       /* entspricht "8px solid currentColor" */
p.abc { column-rule: thick inset blue; }

Live Beispiel

padding:0.3em; background:gold; border:groove 2px gold; column-rule: inset 2px gold; column-width:17em;

Spezifikation

Spezifikation	Status	Kommentar
CSS Multi-column Layout Module Die Definition von 'column-rule' in dieser Spezifikation.	Arbeitsentwurf

Browser Kompatibilität

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android Webview	Chrome für Android	Firefox für Android	Opera für Android	Safari auf iOS	Samsung Internet
`column-rule`	Chrome Vollständige Unterstützung 50 Vollständige Unterstützung 50 Vollständige Unterstützung 1 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Edge Vollständige Unterstützung 12 Vollständige Unterstützung 12 Vollständige Unterstützung 12 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Firefox Vollständige Unterstützung 52 Vollständige Unterstützung 52 Keine Unterstützung 3.5 — 74 Mit Präfix Hinweise Mit Präfix Benötigt das Herstellerpräfix: -moz- Hinweise Before Firefox 3, the default value for the `normal` keyword was `0` and not `1em`.	IE Vollständige Unterstützung 10	Opera Vollständige Unterstützung 11.1 Vollständige Unterstützung 11.1 Vollständige Unterstützung 15 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Safari Vollständige Unterstützung 9 Vollständige Unterstützung 9 Vollständige Unterstützung 3 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	WebView Android Vollständige Unterstützung 50 Vollständige Unterstützung 50 Vollständige Unterstützung ≤37 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Chrome Android Vollständige Unterstützung 50 Vollständige Unterstützung 50 Vollständige Unterstützung 18 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Firefox Android Vollständige Unterstützung 52 Vollständige Unterstützung 52 Vollständige Unterstützung 4 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -moz-	Opera Android Vollständige Unterstützung 11.1 Vollständige Unterstützung 11.1 Vollständige Unterstützung 14 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Safari iOS Vollständige Unterstützung 9 Vollständige Unterstützung 9 Vollständige Unterstützung 1 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-	Samsung Internet Android Vollständige Unterstützung 5.0 Vollständige Unterstützung 5.0 Vollständige Unterstützung 1.0 Mit Präfix Mit Präfix Benötigt das Herstellerpräfix: -webkit-

Legende

Vollständige Unterstützung: Vollständige Unterstützung
Siehe Implementierungshinweise.: Siehe Implementierungshinweise.
Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.: Benötigt ein Herstellerpräfix oder einen anderen Namen zur Verwendung.