Dugi niz godina, CSS plovci su bili fini, ali i neophodni, komponenta u kreiranju rasporeda sajtova. Ako je vaš dizajn pozvao na više kolona, okrenuli ste se na plutače . Problem sa ovom metodom je da, uprkos neverovatnoj genijalnosti koju su web dizajneri / programeri pokazali prilikom kreiranja kompleksnih postavljanja sajtova, CSS plovci nikada nisu trebali koristiti na ovaj način.
Dok plovci i CSS pozicioniranje sigurno imaju mesto u web dizajnu već dugi niz godina, nove tehnike rasporeda, uključujući CSS Grid i Flexbox, sada daju web dizajnerima nove načine za kreiranje njihovih lokacija. Još jedna nova tehnika rasporeda koja pokazuje veliki potencijal je CSS višestruka kolona.
CSS stubovi su već nekoliko godina, ali nedostatak podrške u starijim pregledačima (uglavnom starijim verzijama Internet Explorer-a) zadržao je mnoge web profesionalce da koriste ove stilove u svom proizvodnom radu.
S obzirom na podršku starijim verzijama IE-a, neki web dizajneri eksperimentišu sa novim opcijama CSS rasporeda, uključenim CSS kolonama i nalazom da imaju mnogo više kontrole nad ovim novim pristupima nego što je to učinio sa plovcima.
Osnove CSS kolone
Kao što sugeriše, CSS višestruke kolone (takođe poznate kao CSS3 višenamenski izgled) omogućavaju vam da podelite sadržaj u određeni broj kolona. Najosnovnije CSS osobine koje biste koristili su:
- broj kolona
- kolona-praznina
Za brojanje kolona, navedite broj kolona koje želite. Rupa u koloni bi bila oluci ili razmak između tih kolona. Pregledač će uzeti ove vrijednosti i ravnomjerno dijeliti sadržaj u broj stupaca koje odredite.
Uobičajeni primer CSS-ova više kolona u praksi bi bio da podelite blok tekstualnog sadržaja u više kolona, slično onome što biste videli u novinskom članku. Recimo da imate sljedeću oznaku HTML-a (obratite pažnju na to da, na primjer, koristim samo početak jednog paragrafa, dok bi u praksi vjerovatno bilo više stavki sadržaja u ovoj oznaci):
Naslov vašeg članka
Zamislite puno paragrafa teksta ovde ...
Ako ste onda napisali ove CSS stilove:
.content {-moz-column-count: 3; -webkit-kolona-broj: 3; kolona-broj: 3; -moz-kolona-razmak: 30px; -webkit-kolona-praznina: 30px; kolona-razmak: 30px; }Ovo CSS pravilo podelilo bi se "sadržaj" na 3 jednake kolone sa razmakom od 30 piksela između njih. Ako ste hteli dve kolone umesto 3, jednostavno biste promenili tu vrijednost i pretraživač će izračunati nove širine tih stupaca da biste dijelili sadržaj ravnomerno. Obratite pažnju na to da prvo koristimo prefiksna svojstva proizvođača, nakon čega sledi ne-prefiksna deklaracija.
Kao što je lako, njegova upotreba na ovaj način je upitna za korišćenje web sajta. Da, možete podeliti gomilu sadržaja u više kolona, ali to možda nije najbolje iskustvo čitanja za Veb, pogotovo ako visina ovih stupaca pada ispod "folda" ekrana.
Čitači bi onda morali da se pomeraju nagore i nadole kako bi čitali sadržaj. Ipak, princip CSS stupnja je jednostavan kao što vidite ovde, i može se koristiti da bi učinio toliko više nego samo podeliti sadržaj nekih paragrafa - to se, zaista, može koristiti za izgled.
Raspored sa CSS kolumnama
Recimo da imate web stranicu sa područjem sadržaja koji ima 3 stupca sadržaja. Ovo je vrlo tipičan raspored web stranice i za postizanje tih 3 kolone, obično biste plutali podjele na kojima se nalaze. Sa CSS višestrukim stupama, to je mnogo lakše.
Evo nekog HTML primera:
Najnovije vesti
Sadržaj bi bio ovde ...
Od našeg blog-a
Sadržaj bi bio ovde ...
Dolazni događaji
p>
CSS da napravi ove više kolona počinje sa onim što ste ranije videli:
.content {-moz-column-count: 3; -webkit-kolona-broj: 3; kolona-broj: 3; -moz-kolona-razmak: 30px; -webkit-kolona-praznina: 30px; kolona-razmak: 30px; }Sada je izazov ovde, pošto pretraživač želi ravnomjerno podeliti ovaj sadržaj, pa ako je dužina sadržaja ovih podela drugačija, taj pretraživač će zapravo podeliti sadržaj pojedinačne podjele, dodajući početak na jednoj koloni i a zatim nastavite u drugu (ovo možete videti pomoću ovog koda da pokrenete eksperiment i dodate različite dužine sadržaja unutar svake odjeljenja)!
To nije ono što želite. Želite da svaka od ovih podela napravi odvojenu kolonu i, bez obzira na to koliko je veliki ili mali sadržaj pojedinačne divizije, nikada ne želite da se podeli. To možete postići dodavanjem ove dodatne linije CSS-a:
.content div {display: inline-block; }Ovo će primorati one delove koji su unutar "sadržaja" da ostanu netaknuti čak iako se pretraživač deli na više kolona. Još bolje, pošto ovde nismo dali ni jednu fiksnu širinu, ove kolone će automatski promeniti veličinu dok se pregledač promeni veličinu, što će ih učiniti idealnom aplikacijom za odgovarajuće web stranice . Sa tim "inline-block" stilom na mestu, svaka od vaših 3 divizije će biti posebna kolona sadržaja.
Korišćenje širine kolone
Postoji još jedna svojina pored "kolone-brojanje" koje možete koristiti, a zavisno od vaših potreba za raspoređivanjem, to može zapravo biti bolji izbor za vašu web lokaciju. Ovo je "kolona-širina". Koristeći istu oznaku HTML-a koja je prethodno prikazana, umjesto toga možemo to uraditi pomoću CSS-a:
.content {-moz-column-width: 500px; -webkit-kolona-širina: 500px; kolona-širina: 500px; -moz-kolona-razmak: 30px; -webkit-kolona-praznina: 30px; kolona-razmak: 30px; } .content div {display: inline-block; }Način na koji to funkcioniše je da pregledač koristi ovu "širinu stupca" kao maksimalnu vrijednost tog stupca. Dakle, ako je prozor pregledača manji od 500 piksela, ove 3 divizije bi se pojavile u jednoj koloni, jednoj od vrhova druge. Ovo je tipičan izgled korišten za postavljanje mobilnih / malih ekrana.
Pošto se širina pretraživača povećava da bude dovoljno velika da odgovara 2 kolone zajedno sa određenim prazninama u koloni, pretraživač će automatski preći iz jednog kolone u dve kolone. Nastavite povećavanje širine ekrana i na kraju ćete dobiti dizajn 3 kolone, a svaka od naših 3 divizije prikazana u njihovoj koloni. Opet, ovo je odličan način da se dobiju neki odgovarajući, višestruki uređaji koji izgledaju ugodno, a čak ni ne morate koristiti medijske upite da biste promenili stilove rasporeda!
Ostale osobine kolone
Pored karakteristika koje su ovde obuhvaćene, postoje i osobine za "pravilo stupca", uključujući vrijednosti boje, stila i širine koje vam omogućavaju kreiranje pravila između vaših stupaca. Oni bi se koristili umesto granica ako želite da imate neke linije koje razdvajaju svoje kolone.
Vreme za eksperiment
Trenutno, CSS raspored višestrukih kolona je vrlo dobro podržan. Sa prefiktima, preko 94% web korisnika će moći da vide ove stilove, a ta nepodržana grupa bi zaista bila mnogo starija verzija Internet Explorer-a, za koju možda više nećete više podržavati.
Ovim nivoom podrške sada postoji, nema razloga da ne započinje eksperimentisanje sa CSS kolonama i raspoređivanje ovih stilova na web stranice koje su spremne za proizvodnju. Možete pokrenuti svoje eksperimente koristeći HTML i CSS predstavljene u ovom članku i igrati sa različitim vrijednostima kako biste vidjeli šta će najbolje raditi za potrebe vašeg sajta.