Proprietà CSS column-rule
La proprietà shorthand column-rule imposta stile, larghezza e colore della riga tra le colonne. Esempi e dettagli.
La proprietà shorthand column-rule definisce lo stile, la larghezza e il colore della linea disegnata tra le colonne di un layout a più colonne. Funziona come la shorthand border, ma invece di tracciare un riquadro attorno a un elemento, disegna una singola riga verticale in ogni column gap.
La riga è una linea puramente decorativa: viene disegnata all'interno dello spazio tra le colonne e non occupa spazio proprio. Aumentare la larghezza della riga non sposta le colonne — solo column-gap modifica la spaziatura. Ecco perché una riga molto spessa può sovrapporsi visivamente al testo su entrambi i lati se lo spazio è troppo ridotto.
column-rule è una shorthand per queste tre proprietà longhand:
- column-rule-width — lo spessore della linea.
- column-rule-style — lo stile della linea (
solid,dotted,dashed, ecc.). - column-rule-color — il colore della linea.
Come ogni shorthand, qualsiasi longhand omessa viene reimpostata al suo valore iniziale. Quindi column-rule: 5px solid; imposta larghezza e stile esplicitamente, mentre il colore torna a currentColor (il colore del testo dell'elemento) e la larghezza torna a medium se viene omessa.
Quando usare column-rule
Usa column-rule ogni volta che suddividi il testo scorrevole in più colonne e desideri un separatore visibile — layout di articoli in stile giornale, elenchi di link, gruppi di link nel footer o un glossario. Una discreta riga 1px solid #ddd aiuta l'occhio a seguire dove finisce una colonna e inizia la successiva, senza aggiungere markup extra.
La riga viene visualizzata solo quando l'elemento crea effettivamente un layout a più colonne — ovvero quando column-count o la shorthand columns crea più di una colonna. Su un elemento a colonna singola non ci sono spazi, quindi non viene disegnato nulla.
column-rule è una delle proprietà CSS3.
| Valore iniziale | medium (larghezza), none (stile), currentColor (colore) |
|---|---|
| Si applica a | Contenitori di blocco che stabiliscono un layout a più colonne. Si applica anche a ::first-letter. |
| Ereditato | No. |
| Animabile | Sì. Il colore e la larghezza di column-rule sono animabili. |
| Versione | CSS3 |
| Sintassi DOM | object.style.columnRule = "5px outset #ccc"; |
Sintassi
column-rule: column-rule-width column-rule-style column-rule-color | initial | inherit;L'ordine dei tre valori è flessibile — il browser li distingue per tipo, quindi column-rule: dotted 5px #ccc è valido quanto column-rule: 5px dotted #ccc. Come per border, un valore di none (o l'omissione dello stile) significa che non viene disegnata alcuna riga, perché column-rule-style ha come valore predefinito none.
Esempio della proprietà column-rule:
Esempio con valori di larghezza, stile e colore
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule: 5px dotted #ccc;
}
</style>
</head>
<body>
<h1>Column-rule example</h1>
<p>Here the column-rule is set to 5px dotted gray.</p>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Risultato
Se viene fornito un solo valore, viene interpretato come column-rule-style (le altre due proprietà longhand mantengono i loro valori iniziali).
Esempio della proprietà column-rule con un solo valore:
Esempio con un singolo valore
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 3;
column-gap: 30px;
column-rule: dashed;
}
</style>
</head>
<body>
<h2>Column-rule example</h2>
<p>Here the column-rule is set to only "dashed".</p>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Esempio della proprietà column-rule con larghezza, stile e colore specificati:
Esempio con tutti i valori specificati
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
column-count: 4;
column-gap: 30px;
column-rule: 10px groove #ccc;
}
</style>
</head>
<body>
<h2>Column-rule example</h2>
<p>Here the column-rule is set to 10px groove gray.</p>
<div>
Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</body>
</html>Valori
| Valore | Descrizione |
|---|---|
| column-rule-width | Definisce la larghezza della riga tra le colonne. Il valore predefinito è "medium". |
| column-rule-style | Definisce lo stile della riga tra le colonne. Il valore predefinito è "none". |
| column-rule-color | Imposta il colore della riga. Il valore predefinito è il colore corrente dell'elemento. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |
Aspetti da tenere presenti
- La riga richiede un contesto a più colonne. Imposta column-count (o la shorthand columns) sullo stesso elemento, altrimenti la riga non apparirà mai.
- Uno stile mancante significa nessuna riga. Poiché
column-rule-styleha come valore predefinitonone,column-rule: 5px #ccc;non disegna nulla. Includi sempre una parola chiave di stile comesolidodotted. - La riga non modifica il layout. La sua larghezza viene ricavata dallo spazio esistente, non aggiunta ad esso. Se una riga spessa si sovrappone al testo, aumenta column-gap — la riga si centra automaticamente all'interno di quello spazio.
- Nessuna riga prima della prima o dopo l'ultima colonna. Una linea viene disegnata solo tra colonne adiacenti, mai sui bordi esterni.
Supporto dei browser
column-rule è ampiamente supportata in tutti i browser moderni (Chrome, Edge, Firefox, Safari e Opera). Le versioni precedenti di WebKit e Gecko richiedevano i prefissi -webkit- e -moz-, ma oggi column-rule senza prefisso è sicura da utilizzare.