Share
Il modulo layout multi colonna è stato introdotto per aiutarci a creare colonne rapidamente e facilmente utilizzando solo CSS3. In questo tutorial ho intenzione di dare un'occhiata ad alcune delle sue proprietà e dimostrarle attraverso una serie di esempi.
Chiunque abbia provato a creare più colonne in passato usando i CSS saprà già che questo tipo di layout è stato realizzabile a lungo. Tuttavia, questo ha spesso portato all'uso di tecniche e float hacky. Più spesso questo non è stato abbastanza dispendioso in termini di tempo e sicuramente non è il più semplice dei layout da creare. La verità è che creare più colonne usando i CSS è stato un processo estremamente difficile fino ad ora. Il modulo di layout multi colonna offre maggiore flessibilità e controllo sui precedenti metodi CSS.
Il nuovo approccio, che è un'estensione dell'attuale modello di box CSS, consente al contenuto di essere eseguito da una colonna all'altra e lo rende facilmente adattabile a diversi dispositivi di visualizzazione e dati dinamici.
Ok, quindi, prima di essere troppo entusiasta di questo nuovo modulo, è importante capire quali browser lo supportano, quali prefissi utilizzare e alcune limitazioni del browser.
Sia Chrome che Safari utilizzano il prefisso "-webkit-". Firefox usa il prefisso '-moz-'. Opera e IE supportano tutte le proprietà senza la necessità di un prefisso. Per qualche motivo, Chrome, Safari e Firefox non supportano le proprietà break-after o column-fill, mentre Safari e Firefox non supportano l'estensione delle colonne. Detto questo, sono sicuro che queste proprietà saranno presto disponibili negli aggiornamenti futuri.
Prima di dare un'occhiata alle proprietà utilizzate nel modulo di layout multi colonna, ti mostrerò un breve esempio per aiutarti a capire come funziona un po 'più facilmente.
Ecco un'anteprima di come verranno renderizzate le colonne:
Innanzitutto, l'html per questo esempio è semplicissimo. Creiamo semplicemente un div con una classe di 'colonne' e un po 'di a lorem ipsum testo fittizio.
Dignissim tristique a, auctor massa in nascetur lundium, nascetur mid intere dis et egestas rhoncus ac aliquet turpis intero velit, est dolor porttitor auctor, elementum porta sedersi tristique urna ac proin odio, habitasse ridiculus, non nunc ac acte ultricies vel ac, phasellus corrente alternata? Scelerisque, ac sagittis sociis vel dictumst! Ac odio, dis placerat mus platea odio a in arcu! Urna et aliquam, a! Proin. Dolor lacus dolor adipiscing eros, et tincidunt, lundium aliquet tincidunt, porta, placerat urna nec! Urna, adipiscando enim mid ut. Enim amet, un ac mauris vut porttitor risus intero elit, dis odio sed pulvinar ridiculus sit. Dignissim tristique a, auctor massa in nascetur lundium, nascetur mid intere dis et egestas rhoncus ac aliquet turpis intero velit, est dolor porttitor auctor, elementum porta sedersi tristique urna ac proin odio, habitasse ridiculus, non nunc ac acte ultricies vel ac, phasellus corrente alternata? Scelerisque, ac sagittis sociis vel dictumst! Ac odio, dis placerat mus platea odio a in arcu! Urna et aliquam, a! Proin. Dolor lacus dolor adipiscing eros, et tincidunt, lundium aliquet tincidunt, porta, placerat urna nec! Urna, adipiscando enim mid ut. Enim amet, un ac mauris vut porttitor risus intero elit, dis odio sed pulvinar
Il modulo multi colonne layout è abbastanza facile da descrivere e capire in CSS. Ecco un esempio:
.columns column-count: 4; column-gap: 10px;
Per prima cosa usiamo il "conteggio delle colonne", per stabilire quante colonne sono necessarie (ho usato 4 in questo esempio).
Diciamo quindi quanto grande vogliamo che la grondaia (il divario tra le colonne) sia. In questo caso ho usato 10px.
Aggiungendo queste proprietà consente al nostro testo fittizio di lorem ipsum di scorrere tra le 4 colonne. È davvero questo semplice per iniziare. A questo punto dovresti iniziare a vedere quanto sia semplice da usare.
Diamo un'occhiata più in dettaglio ad alcune delle proprietà che possono essere trovate nel modulo di layout multi colonna.
L'impostazione del numero o della larghezza delle colonne è importante per il contenuto del layout multi colonna. Le colonne dovrebbero essere impostate usando "column-width" o "column-count", ma non dovrebbero mai essere usate insieme. Entrambe queste proprietà sono predefinite su 'auto'.
'Larghezza della colonna' fa esattamente quello che dice sulla latta. Permette di specificare una larghezza fissa per le colonne. La misurazione di questa larghezza può essere eseguita nel modo standard usando px, em ecc. A seconda di ciò che si immette per la larghezza della colonna, può variare e può essere leggermente più ampia o più stretta per adattarsi allo spazio disponibile. Se questa proprietà è impostata su 'auto', significa che la larghezza delle colonne sarà dettata da altre proprietà, come quella sottostante.
Opzioni di valore larghezza della colonna: (lunghezza) | auto;
Se vuoi che il layout sia suddiviso in un numero di colonne specificate, questa è la proprietà che sceglieresti. Impostando il valore di questo il contenuto è diviso nella quantità richiesta di colonne. Se questa proprietà è impostata su 'auto', significa che le colonne numeriche saranno decise da altre proprietà, come 'column-width'.
Opzioni di valore numero di colonne: (numero di colonne) | auto;
"Columns" è in effetti una proprietà abbreviata che consente di impostare "width" e "column count". Ecco una vista valori validi che puoi associare a 'colonne':
colonne: 12em; / * larghezza colonna: 12em; numero di colonne: auto * / colonne: auto 12em; / * larghezza colonna: 12em; numero di colonne: auto * / colonne: 2; / * larghezza colonna: auto; numero di colonne: 2 * / colonne: 2 auto; / * larghezza colonna: auto; numero di colonne: 2 * / colonne: auto; / * larghezza colonna: auto; numero di colonne: auto * / colonne: auto auto; / * larghezza colonna: auto; numero di colonne: auto * /
'Spazio vuoto tra le colonne' ci dà l'opportunità di aggiungere uno spazio tra ciascuna colonna e dà spazio al contenuto per respirare. Specifichiamo la larghezza del gap usando le misure standard CSS. La larghezza dell'intervallo specificato non può essere negativa.
Opzioni di valore column-gap: (lunghezza) | normale;
"Column Rule" pone effettivamente un bordo al centro del "column-gap". Pertanto, per abilitarlo, deve essere specificata una larghezza 'column-gap' che abbia lo stesso valore o maggiore della regola della colonna. La regola della colonna ha anche diverse proprietà secondarie separate e una versione abbreviata. Questa versione abbreviata funziona allo stesso modo della proprietà 'confine' di stenografia. Puoi vedere questo sotto:
column-rule-width: 1px; column-rule-style: solido; column-rule-color: # 000; rule-column: 1px solid # 000; / * Questa è la versione abbreviata * /
'Column-span' ci consente di estendersi su tutte le colonne. Se prendiamo il nostro semplice esempio di prima e aggiungiamo un titolo h1 al nostro contenuto, possiamo facilmente ottenere questo tag h1 per estendersi su tutte e 4 le colonne aggiungendo Colonna della vita: tutto ad esso. Dai un'occhiata a questa dimostrazione:
h1 column-span: all;
Opzioni di valore column-span: all | nessuna;
La proprietà 'column-fill' ci dà due controlli per impostare come la quantità del contenuto è bilanciata sulle colonne. Se impostato su 'balance', la variazione della lunghezza della colonna sarà ridotta al minimo e tutte le lunghezze saranno le più uguali possibili. Se impostato su 'auto', le colonne verranno riempite in ordine e (ad esempio) potrebbe comportare il 4 ° di 4 colonne con meno contenuto delle 3 colonne precedenti. Se il saldo è stato impostato su questo, consentirebbe a tutte e 4 le colonne di essere all'incirca della stessa altezza. Questa proprietà risolve il problema degli spazi non desiderati che rimangono nel contenuto.
'Overflow' dovrebbe essere usato per controllare cosa succede se il contenuto supera le colonne. Se ad esempio il div principale 'colonne' ha una larghezza fissa e il contenuto delle colonne estende questo, possiamo controllare se questo deve essere mostrato o ritagliato usando la proprietà 'overflow'.
Nell'esempio seguente possiamo vedere che le colonne superano il div. Ciò è dovuto al fatto che l'overflow non è impostato su "hidden" sull'elemento padre.
Ho messo insieme alcuni esempi che puoi scaricare all'inizio di questa pagina. Ho fatto questo per mostrare come potresti usare questo nuovo modulo in diverse situazioni in modo che tu possa vedere quanto sia facile cambiare il layout del tuo codice semplicemente cambiando alcune proprietà nel codice CSS.
Questo primo esempio dimostra il vecchio metodo per creare più colonne usando CSS3. È stato ottenuto aggiungendo un 'float: left' alla 'navigazione', 'il contenuto principale' e la 'barra laterale'.
Certo, funziona bene e puoi ottenere l'effetto desiderato. Tuttavia, la flessibilità è davvero limitata. Se si desidera aggiungere colonne aggiuntive o modificare il layout, è necessario fare affidamento sull'aggiunta di markup extra, spostare gli elementi in giro e può essere piuttosto noioso. Questo nuovo modulo cambia tutto questo.
Questo esempio sopra mostra il nuovo metodo per creare le colonne. Questa volta, invece di usarlo sugli elementi del corpo principale, ho aggiunto il modulo CSS3 Multiple Column al "contenuto principale" dove puoi vedere che il contenuto è stato diviso in 3 colonne.
Per cambiare il numero di colonne, è semplice come cambiare un numero.
In questo ultimo esempio ho continuato a usarlo sul contenuto principale, ma ho anche aggiunto alcune div aggiuntive per mostrare come è possibile modificare il layout in modo semplice. Ho anche aggiunto "span: all" al tag "h1" inferiore in modo che il titolo si estenda su tutte le colonne. Infine, ho aggiunto una regola includendo "rule-rule: 1px punteggiato # 999999;" al CSS.
Vale la pena notare a questo punto che ho incluso anche un fallback javascript negli esempi, in modo che funzionino su browser che non supportano ancora il modulo di layout multi colonna.
Come con qualsiasi nuovo modulo CSS; i nuovi giocattoli ci fanno risparmiare tempo, ma hanno un periodo di transizione o di transizione che a volte può richiedere un po 'di tempo prima che venga raggiunta la compatibilità con i browser incrociati. Siamo attualmente nella fase intermedia, in cui alcuni browser hanno raggiunto, alcuni stanno recuperando e alcuni sono rimasti indietro. È in questa fase che è necessario disporre di un piano di backup o fallback per i browser che non dispongono ancora del supporto. Fortunatamente Cedric Savarese ha messo a punto uno script che legge i nostri nuovi valori delle proprietà CSS3 e visualizza le colonne usando javascript. Puoi leggere come implementarlo e scaricare lo script su A List Apart.
Se a questo punto stai morendo dalla voglia di saltare dentro e giocare con alcune delle proprietà che abbiamo discusso oggi, allora ho buttato giù un veloce 'generatore di colonne multiple' con cui puoi avere un casino. Non è niente di speciale, ma dopo un po 'di gioco con esso dovresti essere in grado di cogliere i concetti di base del' modulo di layout di colonne multiple 'e poter iniziare ad usarlo nei tuoi progetti.
Puoi anche scaricare il codice generato in modo da poter sperimentare ulteriormente con alcune delle altre proprietà che non sono incluse nel generatore.
CSS3 Generatore di layout di colonne multiple
Questo ci porta alla conclusione sul modulo di layout multi colonna CSS3. Spero che ora tu abbia una migliore comprensione di come usarlo. E 'davvero molto semplice da usare una volta che hai avuto un po' di giocarci. Nonostante sia nuovo e con pochi limiti al supporto del browser, sta iniziando a girare su Internet e sono sicuro che sarà solo una questione di tempo prima che sia un modulo CSS completamente approvato e implementato.
Ci dà la possibilità di esplorare alcuni fantastici layout con i CSS. Sperimenta, divertiti e scarica i file sorgente per gli esempi nella parte superiore di questo tutorial. Sarei curioso di sapere cosa hai da dire e pensare a questo nuovo modulo, fammi sapere nei commenti qui sotto.
Accentsconagua