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):
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:
