Pentru multi ani, CSS plutește au fost o componentă complicată, dar necesară, în crearea aspectelor site-ului web. Dacă designul dvs. a solicitat mai multe coloane, ați apelat la flotante. Problema cu această metodă este că, în ciuda ingeniozității incredibile pe care designerii web / dezvoltatorii au arătat-o în crearea unui site complex machete, Plutitoarele CSS nu au fost niciodată menite să fie utilizate în acest fel.
În timp ce flotările și poziționarea CSS vor avea cu siguranță un loc în designul web pentru mulți ani de acum încolo, un aspect mai nou tehnici, inclusiv CSS Grid și Flexbox, oferă acum designerilor web noi modalități de a-și crea aspectele site-ului. O altă nouă tehnică de aspect care prezintă mult potențial este CSS Multiple Coloane.
Coloanele CSS există de câțiva ani acum, dar lipsesc suportul în browserele mai vechi (în principal mai vechi versiuni de Internet Explorer) a împiedicat mulți profesioniști din domeniul web să utilizeze aceste stiluri în producția lor muncă.
Odată cu finalizarea asistenței pentru acele versiuni mai vechi de IE, unii designeri web experimentează acum cu un nou aspect CSS opțiuni, Coloane CSS incluse și constatând că au mult mai mult control cu aceste noi abordări decât au avut-o plutitoare.
Bazele coloanelor CSS
După cum sugerează și numele său, CSS Multiple Columns (cunoscut și sub numele de CSS3 aspect cu mai multe coloane) vă permite să împărțiți conținutul într-un număr stabilit de coloane. Cele mai de bază proprietăți CSS pe care le-ați utiliza sunt:
- număr de coloane
- coloană-gol
Pentru numărul de coloane, specificați numărul de coloane dorit. Decalajul coloanei ar fi jgheaburile sau distanța dintre acele coloane. Browserul va lua aceste valori și va împărți conținutul în mod egal în numărul de coloane specificat.
Un exemplu obișnuit de coloane CSS multiple în practică ar fi împărțirea unui bloc de conținut text în coloane multiple, similar cu ceea ce ați vedea într-un articol de ziar. Spuneți că aveți următorul markup HTML (rețineți că, de exemplu, am pus doar începutul un paragraf, în timp ce în practică ar exista probabil mai multe paragrafe de conținut în acest markup):
Antetul articolului dvs.
Imaginați-vă o mulțime de paragrafe de text aici ...
Dacă ați scris apoi aceste stiluri CSS:
.content {
-moz-număr-coloane: 3;
-webkit-count-column: 3;
număr de coloane: 3;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
coloană-decalaj: 30 px;
}
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, veți schimba pur și simplu acea valoare și browserul ar calcula noile lățimi ale acelor coloane pentru a împărți conținutul în mod egal. Observați că folosim mai întâi proprietățile prefixate de furnizor, urmate de declarațiile neprefixate.
Pe cât de ușor este, utilizarea acestuia î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ă lectură experiență pentru web, mai ales dacă înălțimea acestor coloane scade sub „pliul” fișierului ecran.
Cititorii ar trebui apoi să deruleze în sus și în jos pentru a citi întregul conținut. Totuși, principiul coloanelor CSS este la fel de ușor cum vedeți aici și poate fi folosit pentru a face mult mai mult decât a împărți conținutul unor paragrafe - poate fi, într-adevăr, folosit pentru aspect.
Aspect cu coloane CSS
Spuneți că aveți o pagină web cu o zonă de conținut care are 3 coloane de conținut. Acesta este un aspect al site-ului web foarte obișnuit și, pentru a obține aceste 3 coloane, în mod normal, veți pluti diviziunile care se află în. Cu mai multe coloane CSS, este mult mai ușor.
Iată câteva exemple de HTML:
De pe blogul nostru.
Conținutul ar merge aici ...
Evenimente viitoare.
Conținutul ar merge aici ...
CSS pentru a face aceste coloane multiple începe cu ceea ce ați văzut anterior:
.content {
-moz-număr-coloane: 3;
-webkit-count-column: 3;
număr de coloane: 3;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
coloană-decalaj: 30 px;
}
Acum, provocarea este că browserul dorește să împartă acest conținut în mod egal, deci dacă lungimea conținutului acestor diviziuni este diferită, browserul respectiv va împărți de fapt conținutul unui diviziune individuală, adăugând începutul acesteia într-o coloană și apoi continuând în alta (puteți vedea acest lucru folosind acest cod pentru a rula un experiment și pentru a adăuga diferite lungimi de conținut în fiecare Divizia).
Nu asta vrei tu. Doriți ca fiecare dintre aceste divizii să creeze o coloană distinctă și, indiferent cât de mare sau mic este conținutul unei divizii individuale, nu doriți niciodată să fie divizat. Puteți realiza acest lucru adăugând o singură linie suplimentară de CSS:
.content div {
afișaj: bloc în linie;
}
Acest lucru va forța acele diviziuni care se află în interiorul „conținutului” să rămână intacte chiar dacă browserul le împarte în mai multe coloane. Chiar mai bine, deoarece nu am dat nimic aici cu o lățime fixă, aceste coloane se vor redimensiona automat pe măsură ce browserul se redimensionează, făcându-le o aplicație ideală pentru site-uri web receptive. Cu acel stil „bloc în linie”, fiecare dintre cele 3 divizii va fi o coloană distinctă de conținut.
Utilizarea lățimii coloanei
Există o altă proprietate pe lângă „numărarea coloanelor” pe care o puteți utiliza și, în funcție de nevoile dvs. de aspect, poate fi de fapt o alegere mai bună pentru site-ul dvs. Aceasta este „lățimea coloanei”. Folosind același marcaj HTML așa cum s-a arătat anterior, am putea face acest lucru cu CSS-ul nostru:
.content {
-moz-coloana-latime: 500px;
-webkit-column-width: 500px;
lățimea coloanei: 500 px;
-moz-column-gap: 30px;
-webkit-column-gap: 30px;
coloană-decalaj: 30 px;
}
.content div {
afișaj: bloc în linie;
}
Modul în care funcționează este că browserul folosește această „lățime a coloanei” ca valoare maximă a acelei coloane. Deci, dacă fereastra browserului are o lățime mai mică de 500 de pixeli, aceste 3 diviziuni ar apărea într-o singură coloană, una peste alta. Acesta este un aspect tipic utilizat pentru aspectele de pe ecranul mobil / mic.
Pe măsură ce lățimea browserului crește pentru a fi suficient de mare pentru a se potrivi cu 2 coloane, împreună cu golurile de coloană specificate, browserul va trece automat de la un aspect de coloană unică la două coloane. Continuați să măriți lățimea ecranului și, în cele din urmă, veți obține un design cu 3 coloane, fiecare dintre cele 3 diviziuni afișate în propria coloană. Din nou, acesta este un mod minunat de a obține o reacție, compatibil cu mai multe dispozitive planuri și nici măcar nu trebuie să le folosiți interogări media pentru a schimba stilurile de aspect!
Alte proprietăți ale coloanei
În plus față de proprietățile acoperite aici, există și proprietăți pentru „coloană-regulă”, inclusiv valori de culoare, stil și lățime care vă permit să creați reguli între coloane. Acestea ar fi utilizate în loc de margini dacă doriți să aveți câteva linii care să separe coloanele.
Timp pentru experiment
În prezent, aspectul CSS Multiple Column Layout este foarte bine acceptat. Cu prefixe, peste 94% dintre utilizatorii web ar putea vedea aceste stiluri, iar acel grup neacceptat ar fi într-adevăr versiuni mult mai vechi ale Internet Explorer, care oricum nu mai sunt acceptate.
Cu acest nivel de asistență acum, nu există niciun motiv pentru a nu începe experimentarea cu Coloanele CSS și implementarea acestor stiluri pe site-uri web pregătite pentru producție. Puteți începe experimentele folosind HTML și CSS prezentate în acest articol și puteți juca cu diferite valori pentru a vedea ce ar funcționa cel mai bine pentru nevoile de aspect ale site-ului dvs.