Per molti anni, CSS galleggia sono stati un componente pignolo, ma necessario, nella creazione di layout di siti Web. Se il tuo progetto richiedeva più colonne, sei passato ai float. Il problema con questo metodo è che, nonostante l'incredibile ingegnosità che i web designer/sviluppatori hanno dimostrato nella creazione di siti complessi layout, i float CSS non sono mai stati pensati per essere usati in questo modo.
Mentre i float e il posizionamento CSS avranno sicuramente un posto nel web design per molti anni a venire, layout più recenti tecniche tra cui CSS Grid e Flexbox stanno ora offrendo ai web designer nuovi modi per creare i layout dei loro siti. Un'altra nuova tecnica di layout che mostra un grande potenziale è CSS Multiple Columns.
Le colonne CSS sono in circolazione da alcuni anni, ma manca il supporto nei browser più vecchi (principalmente più vecchi versioni di Internet Explorer) ha impedito a molti professionisti del web di utilizzare questi stili nella loro produzione lavoro.
Con la fine del supporto per quelle versioni precedenti di IE, alcuni web designer stanno ora sperimentando un nuovo layout CSS opzioni, colonne CSS incluse, e scoprendo che hanno molto più controllo con questi nuovi approcci di quanto non abbiano fatto con galleggia.
Le basi delle colonne CSS
Come suggerisce il nome, CSS Multiple Columns (noto anche come CSS3 layout a più colonne) consente di suddividere il contenuto in un determinato numero di colonne. Le proprietà CSS di base che utilizzeresti sono:
- conteggio colonne
- gap di colonna
Per il conteggio delle colonne, specifichi il numero di colonne che desideri. Il divario della colonna sarebbe le grondaie o la spaziatura tra quelle colonne. Il browser prenderà questi valori e dividerà il contenuto in modo uniforme nel numero di colonne specificato.
Un esempio comune di più colonne CSS in pratica sarebbe quello di dividere un blocco di contenuto di testo in più colonne, in modo simile a quello che vedresti in un articolo di giornale. Supponiamo che tu abbia il seguente markup HTML (nota che per scopi di esempio, abbiamo solo messo l'inizio di un paragrafo, mentre in pratica ci sarebbero probabilmente più paragrafi di contenuto in questo markup):
Il titolo del tuo articolo.
Immagina molti paragrafi di testo qui...
Se poi hai scritto questi stili CSS:
.contenuto {
-moz-column-count: 3;
-webkit-conteggio-colonne: 3;
conteggio colonne: 3;
-moz-column-gap: 30px;
-spazio-colonna-webkit: 30px;
gap di colonna: 30px;
}
Questa regola CSS dividerebbe la divisione "contenuto" in 3 colonne uguali con uno spazio di 30 pixel tra di loro. Se volessi due colonne invece di 3, cambieresti semplicemente quel valore e il browser calcolerà le nuove larghezze di quelle colonne per dividere il contenuto in modo uniforme. Si noti che usiamo prima le proprietà con prefisso del fornitore, seguite dalle dichiarazioni senza prefisso.
Per quanto facile sia, il suo utilizzo in questo modo è discutibile per l'uso del sito web. Sì, puoi dividere un mucchio di contenuti in più colonne, ma questa potrebbe non essere la lettura migliore esperienza per il web, soprattutto se l'altezza di queste colonne scende al di sotto della “piega” del schermo.
I lettori dovrebbero quindi scorrere su e giù per leggere l'intero contenuto. Tuttavia, il principio delle colonne CSS è semplice come puoi vedere qui, e può essere usato per fare molto di più che semplicemente dividere il contenuto di alcuni paragrafi: può, infatti, essere usato per il layout.
Layout con colonne CSS
Supponiamo che tu abbia una pagina web con un'area di contenuto che ha 3 colonne di contenuto. Questo è un layout di sito Web molto comune e per ottenere quelle 3 colonne, normalmente faresti fluttuare le divisioni in cui si trovano. Con le colonne multiple CSS, è molto più semplice.
Ecco un esempio di HTML:
Dal nostro blog.
Il contenuto andrebbe qui...
Prossimi eventi.
Il contenuto andrebbe qui...
Il CSS per creare queste colonne multiple inizia con ciò che hai visto in precedenza:
.contenuto {
-moz-column-count: 3;
-webkit-conteggio-colonne: 3;
conteggio colonne: 3;
-moz-column-gap: 30px;
-spazio-colonna-webkit: 30px;
gap di colonna: 30px;
}
Ora, la sfida qui è che il browser vuole dividere questo contenuto in modo uniforme, quindi se la lunghezza del contenuto di queste divisioni è diversa, quel browser dividerà effettivamente il contenuto di un divisione individuale, aggiungendone l'inizio a una colonna e poi continuando in un'altra (puoi vederlo usando questo codice per eseguire un esperimento e aggiungere diverse lunghezze di contenuto all'interno di ciascuna divisione).
Non è quello che vuoi. Vuoi che ciascuna di queste divisioni crei una colonna distinta e, non importa quanto grande o piccolo possa essere il contenuto di una singola divisione, non vuoi mai che venga diviso. Puoi ottenere ciò aggiungendo questa riga aggiuntiva di CSS:
.content div {
display: blocco in linea;
}
Ciò costringerà quelle divisioni che si trovano all'interno del "contenuto" a rimanere intatte anche se il browser lo divide in più colonne. Ancora meglio, dal momento che non abbiamo dato a nulla una larghezza fissa, queste colonne si ridimensioneranno automaticamente quando il browser si ridimensiona, rendendole un'applicazione ideale per siti web reattivi. Con quello stile "inline-block" in atto, ciascuna delle tue 3 divisioni sarà una colonna distinta di contenuto.
Utilizzo della larghezza di colonna
Esiste un'altra proprietà oltre al "conteggio colonne" che puoi utilizzare e, a seconda delle tue esigenze di layout, potrebbe effettivamente essere una scelta migliore per il tuo sito. Questa è la "larghezza della colonna". Utilizzando lo stesso markup HTML mostrato in precedenza, potremmo invece farlo con il nostro CSS:
.contenuto {
-moz-column-width: 500px;
-larghezza-colonna-webkit: 500px;
larghezza della colonna: 500 px;
-moz-column-gap: 30px;
-spazio-colonna-webkit: 30px;
gap di colonna: 30px;
}
.content div {
display: blocco in linea;
}
Il modo in cui funziona è che il browser utilizza questa "larghezza della colonna" come valore massimo di quella colonna. Quindi, se la finestra del browser è larga meno di 500 pixel, queste 3 divisioni apparirebbero in un'unica colonna, una sopra l'altra. Questo è un layout tipico utilizzato per i layout mobili/schermo piccolo.
Man mano che la larghezza del browser aumenta per essere sufficientemente grande da contenere 2 colonne insieme agli spazi di colonna specificati, il browser passerà automaticamente da un layout a colonna singola a due colonne. Continua ad aumentare la larghezza dello schermo e alla fine otterrai un design a 3 colonne, con ciascuna delle nostre 3 divisioni visualizzate nella propria colonna. Ancora una volta, questo è un ottimo modo per essere reattivi, multi-dispositivo amichevole layout e non è nemmeno necessario utilizzarli query multimediali media per cambiare gli stili di layout!
Altre proprietà della colonna
Oltre alle proprietà trattate qui, ci sono anche proprietà per la "regola delle colonne", inclusi i valori di colore, stile e larghezza che ti consentono di creare regole tra le tue colonne. Questi sarebbero usati al posto dei bordi se vuoi avere alcune linee che separano le tue colonne.
È ora di sperimentare
Attualmente, CSS Multiple Column Layout è molto ben supportato. Con i prefissi, oltre il 94% degli utenti Web sarebbe in grado di vedere questi stili e quel gruppo non supportato sarebbe in realtà solo versioni molto più vecchie di Internet Explorer che comunque non sono più supportate.
Con questo livello di supporto ora in atto, non c'è motivo per non iniziare a sperimentare con le colonne CSS e distribuire questi stili in siti Web pronti per la produzione. Puoi iniziare i tuoi esperimenti utilizzando HTML e CSS presentati in questo articolo e giocare con valori diversi per vedere cosa funzionerebbe meglio per le esigenze di layout del tuo sito.