Layout multicolonna css3

Layout tabellari Voglio parlarti di questo particolare modulo dei CSS3 che consente di creare layout multicolonna. Potremmo quasi definirla una […]
Layout multicolonna css3

Layout tabellari

Voglio parlarti di questo particolare modulo dei CSS3 che consente di creare layout multicolonna. Potremmo quasi definirla una versione moderna delle vecchie impaginazioni tabellari. In passato per impaginare testo era consueto usare le tabelle per dividere blocchi di testo su più colonne, attualmente per ottenere lo stesso risultato bisogna dividere il testo in div flottanti, ma con non pochi problemi nel gestirli, oppure, con qualche accorgimento, potremmo tranquillamente utilizzare la proprietà “columns”.

I vantaggi

I vantaggi sono molteplici:

  1. Si ottiene un markup sicuramente piu pulito e lineare e un documento HTML più semplice e lineare equivale sicuramente a una struttura del DOM più agile e snella, che avvantaggia e velocizza l’implementazione di eventuali js e stili.
  2. Il testo scorre da una colonna all’altra in maniera autonoma in relazione allo spazio che gli viene dato, al numero di colonne e allo spazio tra una colonna ed un’altra.
  3. Il testo non viene più interrotto in maniera casuale e questo assicura una migliorerappresentazione semantica e conseguentemente una migliore lettura da parte degli screen-reader.

Come si utilizza

Vediamo subito in azione la proprietà analizzando un frammento di codice html

<div id="columns">
	<p>Lorem Ipsum is simply dummy...more text.</p>
</div>

Il CSS è relativamente semplice e le proprietà da tenere in considerazione sono le seguenti.

  • “column-width” definisce la larghezza delle colonne
  • “column-count” definisce il numero di colonne
  • “column-gap” definisce lo spazio tra una colonna e l’altra
  • “column-rule” consente di visualizzare un separatore tra una colonna e l’altra.
#columns{
    column-width:200px;
    column-count: 4;
    column-gap: 30px;
    column-rule: 1px dotted #CCCCCC;
}

Cross Browsing

Ad una prima analisi della tabella prelevata da caniuse.com possiamo ritenerci abbastanza soddisfatti dell’attuale compatibilità! A parte il totale non supporto di Internet Explorer.

Da come si evince dalla tabella il supporto è garantito grazie ai vendor prefix -moz- e -webkit- che ne garantiscono l’utilizzo su Safari Chrome e Firefox. Le precedenti regole css possono essere tranquillamente riscritte aggiungendo i vendor prefix all’inizio di ogni proprietà.

Ricapitolando:

#columns{
    -moz-column-width:200px;
    -webkit-column-width:200px;

    -moz-column-count: 4;
    -webkit-column-count: 4;

    -moz-column-gap: 30px;
    -webkit-column-gap: 30px;

    -moz-column-rule: 1px dotted #CCCCCC;
    -webkit-column-rule: 1px dotted #CCCCCC;

    column-width:200px;
    column-count: 4;
    column-gap: 30px;
    column-rule: 1px dotted #CCCCCC;
}

Internet Explorer?

per Internet Explorer l’unico metodo valido e funzionante che garantisce compatibilità del modulo CSS3 è con l’utilizzo di jquery o javascript in generale. Ho trovato questo plugin (ne esistono diversi).

In conclusione

Con qualche accortenza e un po di pazienza è possibile rendere cross-browser i layout multicolonna. Spero che questo articolo ti sia piaciuto e se hai dubbi, perplessità o idee scrivici per discuterne insieme.

Provalo subito

Prova la demo Consulta il codice
  • Pingback: Layout misto a due colonneLaboratorio CSS | Laboratorio CSS()

  • Paolo

    Ottimo articolo! ho testato il plugin per ie e non funziona ahimè! puoi suggerirmi qualcosa per rimediare?

    • Ciao Paolo scusami se non riesco a risponderti. Cerco al più presto di trovare una soluzione alternativa cosi da aggiornare l’articolo che ha qualche annetto. Perdonami, appena riesco lo faccio, è un periodaccio.

  • Elia Marsura

    Ciao! Congratulazioni per l’articolo innanzitutto.
    Ti volevo chiedere una cosa: come mai quando applico il multicolonna ad elementi con un border bottom lui mi separa i border dall’elemento?

    Se ad esempio gli della mia lista sono 6 (quindi pari) lui mi divide correttamente in 2 colonne con 3 da una parte e altri 3 dall’altra (ciascun con il suo border bottom solid 1px). Ma se gli sono 7 ne mette 4 a sinistra, ma del quarto elemento mi separa il suo border bottom e lo mette a destra insieme agli altri 3 .

    Allego lo screenshot 😉

    Elia

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github