Timp de mulți ani, plutitorii CSS au fost o componentă finică, dar necesară, în crearea layout-urilor de site-uri web. Dacă designul dvs. a solicitat mai multe coloane, ați apelat la plutitoare . Problema cu această metodă este că, în ciuda ingeniozității incredibile pe care designerii / dezvoltatorii web-ului l-au arătat în crearea de layout-uri complexe ale site-urilor, plutele CSS nu au fost niciodată menite a fi folosite în acest fel.
În timp ce plutitorii și poziționarea CSS sunt sigur că vor avea un loc în designul web pentru mulți ani, tehnicile de layout mai noi, inclusiv CSS Grid și Flexbox, oferă designerilor noștri noi modalități de a crea layout-urile site-ului. O altă tehnică nouă de aspect care arată o mulțime de potențial este coloanele CSS multiple.
Coloanele CSS se află în jur de câțiva ani, însă lipsa de sprijin în browserele mai vechi (în special versiunile mai vechi ale Internet Explorer) a împiedicat mulți profesioniști din domeniul web să folosească aceste stiluri în activitatea lor de producție.
Cu sfarsitul suportului pentru versiunile mai vechi ale IE, unii designeri web experimenteaza acum noi optiuni de layout CSS, inclusiv Coloanele CSS si constatand ca au mult mai mult control cu aceste abordari noi decat au facut cu plutitorii.
Bazele coloanelor CSS
După cum sugerează și numele, coloanele CSS multiple (cunoscute și sub denumirea de CSS3 multi-column layout) vă permit să împărțiți conținutul într-un număr fixat de coloane. Proprietățile CSS cele mai de bază pe care le-ați folosi sunt:
- coloană-count
- coloană-gap
Pentru numărul de coloane, specificați numărul de coloane dorite. Diferența dintre coloane ar fi jgheaburile sau spațiile dintre aceste coloane. Browserul va lua aceste valori și va împărți uniform conținutul în numărul de coloane pe care le specificați.
Un exemplu comun de coloane multiple CSS în practică ar fi împărțirea unui bloc de conținut text în mai multe coloane, similar cu ceea ce ați vedea într-un articol din ziar. Spuneți că aveți următorul marcaj HTML (rețineți că, de exemplu, pun doar începutul unui paragraf, în timp ce în practică ar exista mai multe paragrafe de conținut în acest marcaj):
Poziția articolului dvs.
Imaginați-vă multe paragrafe de text aici ...
Dacă ați scris apoi aceste stiluri CSS:
.content {-moz-coloană-număr: 3; -webkit-count-count: 3; numărul de coloane: 3; -moz-coloană-decalaj: 30px; -webkit-gap-column: 30px; coloană-decalaj: 30 pixeli; }Această regulă CSS ar împărți diviziunea "conținut" în 3 coloane egale, cu un decalaj de 30 de pixeli între ele. Dacă doriți două coloane în loc de 3, ați schimba pur și simplu acea valoare și browserul va calcula noile lățimi ale coloanelor respective pentru a împărți în mod egal conținutul. Observați că folosim mai întâi proprietățile prefixate de furnizor, urmate de declarațiile non-prefixate.
Atât de ușor este aceasta, utilizarea sa în acest mod este discutabilă pentru utilizarea site-ului web. Da, puteți împărți o grămadă de conținut în mai multe coloane, dar este posibil să nu fie cea mai bună experiență de citire pentru Web, mai ales dacă înălțimea acestor coloane scade sub "pliul" ecranului.
Cititorii ar trebui apoi să deruleze în sus și în jos pentru a citi întregul conținut. Totuși, principalul coloane CSS este la fel de ușor cum vedeți aici și poate fi folosit pentru a face mai mult decât să împartă conținutul unor paragrafe - poate fi, într-adevăr, folosit pentru aspect.
Layout cu coloane CSS
Spuneți că aveți o pagină web cu o zonă de conținut care conține 3 coloane de conținut. Acesta este un aspect foarte tipic al site-ului web, iar pentru a obține cele 3 coloane, în mod normal, veți pluti în diviziile în care se află. Cu coloane multiple CSS, este mult mai ușor.
Iată câteva exemple de cod HTML:
Ultimele noutăți
Conținutul ar merge aici ...
Conținutul ar merge aici ...
Evenimente viitoare p> CSS pentru a face aceste coloane multiple începe cu ceea ce ați văzut anterior:
.content {-moz-coloană-număr: 3; -webkit-count-count: 3; numărul de coloane: 3; -moz-coloană-decalaj: 30px; -webkit-gap-column: 30px; coloană-decalaj: 30 pixeli; } Acum, provocarea este că, deoarece browserul dorește să împartă în mod egal acest conținut, deci dacă lungimea conținutului acestor diviziuni este diferită, acel browser va împărți efectiv conținutul unei diviziuni individuale, adăugând începutul acesteia într-o singură coloană și apoi continuați în altul (puteți vedea acest lucru utilizând acest cod pentru a rula un experiment și a adăuga diferite lungimi de conținut în fiecare divizie)!
Nu asta vrei. Vreți ca fiecare dintre aceste diviziuni să creeze o coloană distinctă și, indiferent de cât de mare sau de mică ar putea fi conținutul unei divizii individuale, niciodată nu doriți să o împărțiți. Puteți obține acest lucru adăugând această linie suplimentară de CSS:
.content div {afișare: inline-block; } Aceasta va forța acele diviziuni care sunt în interiorul "conținutului" să rămână intactă, chiar dacă browserul împarte acest lucru în mai multe coloane. Chiar mai bine, deoarece nu am dat aici o lățime fixă, aceste coloane vor fi redimensionate automat pe măsură ce browser-ul se redimensionează, făcându-le o aplicație ideală pentru site-urile receptive . Cu acest stil "inline-block", fiecare dintre cele 3 diviziuni va fi o coloană distinctă de conținut.
Utilizarea lățimii coloanelor
Există o altă proprietate în afară de "coloana-count" pe care o puteți utiliza și, în funcție de nevoile dvs. de aspect, ar putea fi de fapt o alegere mai bună pentru site-ul dvs. Aceasta este "lățimea coloanei". Folosind același marcaj HTML, după cum am arătat anterior, am putea să facem acest lucru cu CSS-ul nostru:
.content {-moz-column-width: 500px; -webkit-width-column: 500px; lățimea coloanei: 500px; -moz-coloană-decalaj: 30px; -webkit-gap-column: 30px; coloană-decalaj: 30 pixeli; } .content div {afișare: inline-block; } Modul în care funcționează acest lucru este că browserul utilizează această "lățime a coloanei" ca valoare maximă a coloanei respective. Deci, dacă fereastra browserului are o lățime mai mică de 500 pixeli, aceste trei diviziuni ar apărea într-o singură coloană, una dintre vârfurile celeilalte. Acesta este un aspect tipic folosit pentru dispozitive mobile / mici.
Pe măsură ce lățimea browserului crește astfel încât să fie suficient de mare pentru a se potrivi cu 2 coloane, împreună cu golul de coloană specificat, browserul va trece automat de la un singur aspect la două coloane. Continuați să măriți lățimea ecranului și, eventual, veți obține un design cu 3 coloane, fiecare dintre cele trei diviziuni fiind afișate în coloana proprie. Din nou, aceasta este o modalitate excelentă de a obține niște layout-uri prietenoase , cu multe dispozitive , și nici măcar nu trebuie să utilizați interogări media pentru a schimba stilurile de aspect!
Alte proprietati ale coloanei
Pe lângă proprietățile acoperite aici, există, de asemenea, proprietăți pentru "regulă de coloană", inclusiv valori de culoare, stil și lățime care vă permit să creați reguli între coloanele dvs. Acestea ar fi folosite în loc de frontiere dacă doriți să aveți niște linii care separă coloanele.
E timpul să experimentăm
În prezent, aspectul coloanei multiple CSS este foarte bine susținut. Cu prefixe, peste 94% dintre utilizatorii web ar putea să vadă aceste stiluri, iar grupul neacceptat ar fi într-adevăr versiuni mult mai vechi ale Internet Explorer, pe care probabil că nu le mai susțineți oricum.
Cu acest nivel de suport acum, nu există nici un motiv să nu începeți să experimentați coloanele CSS și să implementați aceste stiluri în site-uri web productive. Puteți să începeți experimentele utilizând codurile HTML și CSS prezentate în acest articol și să jucați în jur cu valori diferite pentru a vedea ce ar fi cel mai bine pentru nevoile de aspect al site-ului dvs.
CSS pentru a face aceste coloane multiple începe cu ceea ce ați văzut anterior:
.content {-moz-coloană-număr: 3; -webkit-count-count: 3; numărul de coloane: 3; -moz-coloană-decalaj: 30px; -webkit-gap-column: 30px; coloană-decalaj: 30 pixeli; }Acum, provocarea este că, deoarece browserul dorește să împartă în mod egal acest conținut, deci dacă lungimea conținutului acestor diviziuni este diferită, acel browser va împărți efectiv conținutul unei diviziuni individuale, adăugând începutul acesteia într-o singură coloană și apoi continuați în altul (puteți vedea acest lucru utilizând acest cod pentru a rula un experiment și a adăuga diferite lungimi de conținut în fiecare divizie)!
Nu asta vrei. Vreți ca fiecare dintre aceste diviziuni să creeze o coloană distinctă și, indiferent de cât de mare sau de mică ar putea fi conținutul unei divizii individuale, niciodată nu doriți să o împărțiți. Puteți obține acest lucru adăugând această linie suplimentară de CSS:
.content div {afișare: inline-block; }Aceasta va forța acele diviziuni care sunt în interiorul "conținutului" să rămână intactă, chiar dacă browserul împarte acest lucru în mai multe coloane. Chiar mai bine, deoarece nu am dat aici o lățime fixă, aceste coloane vor fi redimensionate automat pe măsură ce browser-ul se redimensionează, făcându-le o aplicație ideală pentru site-urile receptive . Cu acest stil "inline-block", fiecare dintre cele 3 diviziuni va fi o coloană distinctă de conținut.
Utilizarea lățimii coloanelor
Există o altă proprietate în afară de "coloana-count" pe care o puteți utiliza și, în funcție de nevoile dvs. de aspect, ar putea fi de fapt o alegere mai bună pentru site-ul dvs. Aceasta este "lățimea coloanei". Folosind același marcaj HTML, după cum am arătat anterior, am putea să facem acest lucru cu CSS-ul nostru:
.content {-moz-column-width: 500px; -webkit-width-column: 500px; lățimea coloanei: 500px; -moz-coloană-decalaj: 30px; -webkit-gap-column: 30px; coloană-decalaj: 30 pixeli; } .content div {afișare: inline-block; }Modul în care funcționează acest lucru este că browserul utilizează această "lățime a coloanei" ca valoare maximă a coloanei respective. Deci, dacă fereastra browserului are o lățime mai mică de 500 pixeli, aceste trei diviziuni ar apărea într-o singură coloană, una dintre vârfurile celeilalte. Acesta este un aspect tipic folosit pentru dispozitive mobile / mici.
Pe măsură ce lățimea browserului crește astfel încât să fie suficient de mare pentru a se potrivi cu 2 coloane, împreună cu golul de coloană specificat, browserul va trece automat de la un singur aspect la două coloane. Continuați să măriți lățimea ecranului și, eventual, veți obține un design cu 3 coloane, fiecare dintre cele trei diviziuni fiind afișate în coloana proprie. Din nou, aceasta este o modalitate excelentă de a obține niște layout-uri prietenoase , cu multe dispozitive , și nici măcar nu trebuie să utilizați interogări media pentru a schimba stilurile de aspect!
Alte proprietati ale coloanei
Pe lângă proprietățile acoperite aici, există, de asemenea, proprietăți pentru "regulă de coloană", inclusiv valori de culoare, stil și lățime care vă permit să creați reguli între coloanele dvs. Acestea ar fi folosite în loc de frontiere dacă doriți să aveți niște linii care separă coloanele.
E timpul să experimentăm
În prezent, aspectul coloanei multiple CSS este foarte bine susținut. Cu prefixe, peste 94% dintre utilizatorii web ar putea să vadă aceste stiluri, iar grupul neacceptat ar fi într-adevăr versiuni mult mai vechi ale Internet Explorer, pe care probabil că nu le mai susțineți oricum.
Cu acest nivel de suport acum, nu există nici un motiv să nu începeți să experimentați coloanele CSS și să implementați aceste stiluri în site-uri web productive. Puteți să începeți experimentele utilizând codurile HTML și CSS prezentate în acest articol și să jucați în jur cu valori diferite pentru a vedea ce ar fi cel mai bine pentru nevoile de aspect al site-ului dvs.