Godinama, CSS pluta su bili izbirljiva, ali neophodna komponenta u izradi izgleda web stranica. Ako je vaš dizajn zahtijevao više stupaca, okrenuli ste se plovcima. Problem ove metode je taj što, unatoč nevjerojatnoj domišljatosti koju su web dizajneri / programeri pokazali u stvaranju složenih web stranica rasporedi, CSS plutajuće zapravo nikada nisu bile namijenjene za korištenje na ovaj način.
Iako će plutajuće i CSS pozicioniranje sigurno imati mjesta u web dizajnu dugi niz godina, noviji izgled tehnike, uključujući CSS Grid i Flexbox, sada web dizajnerima daju nove načine za izradu izgleda web stranica. Još jedna nova tehnika rasporeda koja pokazuje puno potencijala su CSS višestruki stupci.
CSS stupci postoje već nekoliko godina, ali nedostatak podrške u starijim preglednicima (uglavnom starijim inačice Internet Explorera) spriječio je mnoge web profesionalce da koriste ove stilove u svojoj proizvodnji raditi.
S krajem podrške za starije verzije IE-a, neki web dizajneri sada eksperimentiraju s novim CSS izgledom opcije, uključujući CSS stupce, i otkrivši da oni imaju puno veću kontrolu s tim novim pristupima nego što su imali s pluta.
Osnove CSS stupaca
Kao što mu samo ime govori, CSS višestruki stupci (poznati i kao CSS3 raspored s više stupaca) omogućuje vam razdvajanje sadržaja na skup broja stupaca. Najosnovnija CSS svojstva koja biste koristili su:
- brojanje stupaca
- stup-jaz
Za brojanje stupaca odredite željeni broj stupaca. Razmak stupaca bio bi oluk ili razmak između tih stupova. Preglednik će uzeti ove vrijednosti i podijeliti sadržaj ravnomjerno na broj stupaca koje navedete.
Uobičajeni primjer CSS višestrukih stupaca u praksi bio bi razdvajanje bloka tekstualnog sadržaja na više stupaca, slično onome što biste vidjeli u novinskom članku. Recimo da imate sljedeće HTML oznake (imajte na umu da smo, na primjer, stavili samo početak jedan odlomak, dok bi u praksi u ovom označavanju vjerojatno bilo više odlomaka sadržaja):
Naslov vašeg članka.
Zamislite puno odlomaka teksta ovdje ...
Ako ste tada napisali ove CSS stilove:
.content {
-moz-count-count: 3;
-webkit-count-count: 3;
broj stupaca: 3;
-moz-jaz-stupac: 30px;
-webkit-stup-jaz: 30px;
razmak između stupaca: 30 piksela;
}
Ovo CSS pravilo podijelilo bi podjelu "sadržaja" u 3 jednaka stupca s razmakom od 30 piksela između njih. Ako biste željeli dva stupca umjesto 3, jednostavno biste promijenili tu vrijednost i preglednik bi izračunao nove širine tih stupaca kako bi sadržaj ravnomjerno podijelio. Primijetite da prvo koristimo svojstva s prefiksom dobavljača, a zatim deklaracije bez prefiksa.
Koliko god je ovo jednostavno, njegova upotreba na ovaj način upitna je za upotrebu web stranica. Da, hrpu sadržaja možete podijeliti u više stupaca, ali ovo možda nije najbolje čitanje iskustvo na webu, pogotovo ako visina tih stupaca padne ispod "nabora" zaslon.
Čitatelji bi se tada morali pomicati gore-dolje kako bi pročitali cijeli sadržaj. Ipak, glavnica CSS stupaca jednostavna je kao što ovdje vidite i može se koristiti za mnogo više od pukog razdvajanja sadržaja nekih odlomaka - uistinu se može koristiti za izgled.
Izgled sa CSS stupcima
Recimo da imate web stranicu s područjem sadržaja koja ima 3 stupca sadržaja. Ovo je vrlo uobičajen izgled web stranice, a da biste postigli ta tri stupca, normalno biste plutali u odjeljcima koji se nalaze. S CSS višestrukim stupcima to je puno lakše.
Evo nekoliko primjera HTML-a:
S našeg bloga.
Sadržaj bi išao ovdje ...
Nadolazeći događaji.
Sadržaj bi išao ovdje ...
CSS za izradu ovih višestrukih stupaca započinje onim što ste prethodno vidjeli:
.content {
-moz-count-count: 3;
-webkit-count-count: 3;
broj stupaca: 3;
-moz-jaz-stupac: 30px;
-webkit-stup-jaz: 30px;
razmak između stupaca: 30 piksela;
}
Sada je izazov taj da preglednik želi ravnomjerno podijeliti ovaj sadržaj, pa ako je duljina sadržaja ovih odjeljenja različita, taj će preglednik zapravo podijeliti sadržaj pojedinačne podjele, dodajući početak jednog stupca, a zatim nastavljajući u drugi (to možete vidjeti upotrebom ovog koda za pokretanje eksperimenta i dodavanje različitih duljina sadržaja unutar svakog podjela).
To nije ono što želite. Želite da svaki od ovih odjeljenja stvori zaseban stupac i, bez obzira koliko velik ili mali je sadržaj pojedinog odjeljenja, nikada ga ne želite podijeliti. To možete postići dodavanjem ovog dodatnog retka CSS-a:
.content div {
prikaz: inline-block;
}
To će prisiliti one odjeljke koji se nalaze unutar "sadržaja" da ostanu netaknuti čak i kada ih preglednik podijeli u više stupaca. Čak i bolje, budući da ovdje nismo dali ništa fiksne širine, ovi će se stupci automatski mijenjati kako se veličina preglednika mijenja, što ih čini idealnom aplikacijom za responzivne web stranice. S postavljenim stilom "inline-block", svaka od vaša 3 odjeljenja bit će zaseban stupac sadržaja.
Korištenje širine stupca
Osim "count-column" postoji još jedno svojstvo koje možete koristiti, a ovisno o vašim potrebama za izgledom, to bi mogao biti bolji izbor za vašu web lokaciju. Ovo je "širina stupca". Koristeći istu HTML oznaku kao što je prethodno prikazano, mogli bismo to učiniti s našim CSS-om:
.content {
-moz-širina stupca: 500px;
-webkit-širina stupca: 500px;
širina stupca: 500px;
-moz-jaz-stupac: 30px;
-webkit-stup-jaz: 30px;
razmak između stupaca: 30 piksela;
}
.content div {
prikaz: inline-block;
}
Način na koji ovo funkcionira je da preglednik koristi ovu "širinu stupca" kao maksimalnu vrijednost tog stupca. Dakle, ako je prozor preglednika širok manje od 500 piksela, ta će se tri odjeljenja pojaviti u jednom stupcu, jedan na vrhu drugog. Ovo je tipičan izgled koji se koristi za izglede za mobilne / male zaslone.
Kako se širina preglednika povećava da bude dovoljno velika da stane 2 stupca zajedno s navedenim prazninama stupaca, preglednik će automatski prijeći s jednog izgleda na dva stupca. Nastavite povećavati širinu zaslona i na kraju ćete dobiti dizajn s 3 stupca, a svaki od naša 3 odjeljenja prikazat će se u svom stupcu. Opet, ovo je sjajan način da dobijete malo reakcije, više uređaja izgleda, a ne trebate ni koristiti medijski upiti za promjenu stilova izgleda!
Ostala svojstva stupca
Pored ovdje opisanih svojstava, postoje i svojstva za "pravilo stupaca", uključujući vrijednosti boje, stila i širine koje vam omogućuju stvaranje pravila između stupaca. Oni bi se koristili umjesto granica ako želite imati neke linije koje odvajaju vaše stupce.
Vrijeme je za eksperimentiranje
Trenutno je CSS izgled više stupaca vrlo dobro podržan. S prefiksima, više od 94% web korisnika moglo bi vidjeti ove stilove, a ta nepodržana grupa stvarno bi bile samo puno starije verzije Internet Explorera koje ionako više nisu podržane.
S ovom razinom podrške koja postoji, nema razloga da ne započnete eksperimentiranje sa CSS stupcima i postavljanje tih stilova na web stranice spremne za produkciju. Možete započeti svoje eksperimente pomoću HTML-a i CSS-a predstavljenih u ovom članku i poigrati se različitim vrijednostima kako biste vidjeli što bi najbolje odgovaralo potrebama izgleda vašeg web mjesta.