Kako koristiti CSS stupce za višeslojne web stranice Layouts

Dugi niz godina, CSS plovci bili su glomazna, ali nužna komponenta u izradi web stranica. Ako je vaš dizajn zvao više stupaca, okrenuli ste se za plutaje. Problem s ovom metodom je taj da, unatoč nevjerojatnoj domišljatosti koju su web dizajneri / programeri pokazali u stvaranju složenih izgleda stranica, CSS plovci nikada nisu bili zaista namijenjeni za korištenje na ovaj način.

Dok plovci i CSS pozicioniranje sigurno će imati mjesto u web dizajnu za mnogo godina koje dolaze, novije tehnike rasporeda, uključujući CSS Grid i Flexbox, sada daju web dizajnerima nove načine za stvaranje izgleda stranica. Druga nova tehnika rasporeda koja pokazuje puno potencijala je CSS višestruke stubove.

CSS-ovi stupci već traju već nekoliko godina, ali nedostatak podrške u starijim preglednicima (uglavnom starijim verzijama Internet Explorera) zadržao je mnoge web-stručnjake da koriste ove stilove u svom proizvodnom radu.

S krajnjom podrškom za te starije verzije IE, neki web dizajneri sada eksperimentiraju s novim opcijama CSS izgleda, uključujući CSS stupce, i utvrdivši da imaju toliko veću kontrolu nad tim novim pristupima nego što su učinili s plovcima.

Osnove CSS stupaca

Kao što mu ime govori, CSS višestruke stupce (također poznat kao CSS3 višeslojni izgled) omogućuju vam podjelu sadržaja u određeni broj stupaca. Najosnovnija CSS svojstva koja biste koristili su:

kolona-count
kolona-gap

Za broj stupaca navodite broj stupaca koji želite. Razgraničenje u stupcu bilo bi žlijebovi ili razmak između tih stupaca. Preglednik će uzeti te vrijednosti i ravnomjerno podijeliti sadržaj u broj stupaca koji navedete.

Uobičajeni primjer višestrukih stupaca CSS-a u praksi bio bi podijeliti blok teksta u više stupaca, slično onome što biste vidjeli u novinskom članku. Recimo da imate sljedeću HTML oznaku (imajte na umu da, primjerice, stavljam samo početak jednog stavka, dok u praksi vjerojatno postoji više stavaka sadržaja u ovom označavanju):


Naslov vašeg članka
Zamislite puno paragrafa teksta ovdje …

Ako ste zatim napisali ove CSS stilove:

.content {-moz-column-count: 3; -webkit-kolona-broj: 3; broj stupaca: 3; -moz-stupac-praznina: 30px; -webkit-stup-gap: 30px; stupac-praznina: 30px; }

Ovo pravilo CSS bi podijelilo podjelu "sadržaj" u 3 jednaka stupca s razmakom od 30 piksela između njih. Ako ste htjeli dva stupca umjesto 3, jednostavno biste promijenili tu vrijednost, a preglednik će izračunati novu širinu tih stupaca da biste podijelili sadržaj ravnomjerno. Napominjemo da prije upotrebljavamo unaprijed određena svojstva dobavljača, a zatim neizgovorene deklaracije.

Jednostavno kao što je to, njegova upotreba na taj način upitna je za upotrebu web stranica. Da, možete podijeliti hrpu sadržaja u više stupaca, ali to možda nije najbolji doživljaj čitanja za web, pogotovo ako visina tih stupaca padne ispod "preklopa" zaslona.

Čitatelji bi se tada trebali kretati prema gore i dolje kako bi čitali cijeli sadržaj. Ipak, glavar CSS stupaca je jednostavan kao ovdje, i može se koristiti za učiniti mnogo više nego samo podijeliti sadržaj nekih odlomaka - to se doista može koristiti za izgled.

Izgled s CSS stupcima

Recimo da imate web stranicu sa sadržajem koji ima 3 stupca sadržaja. Ovo je vrlo tipičan raspored web stranica, a za postizanje tih 3 stupca normalno biste plutali dijelove koji se nalaze. Uz CSS višestruke stupce to je mnogo lakše.

Evo nekih HTML uzorka:

 
Od našeg bloga
Sadržaj će ići ovdje …
  Upotreba stupca širinePostoji još jedan entitet osim "broja stupaca" koji možete upotrebljavati, a ovisno o potrebama vašeg rasporeda, to možda predstavlja bolji izbor za vašu web-lokaciju. Ovo je "širina stupaca". Upotrebljavajući istu HTML oznaku kao što je ranije prikazano, mogli bismo to učiniti s našim CSS-om:
 .content {-moz-stupac-širina: 500px; -webkit-stupac-širina: 500px; širina stupca: 500 px; -moz-stupac-praznina: 30px; -webkit-stup-gap: 30px; stupac-praznina: 30px; } .content div {display: inline-block; }
Način na koji to funkcionira jest da preglednik koristi ovu "širinu stupca" kao maksimalnu vrijednost tog stupca. Dakle, ako je prozor preglednika širi širok 500 piksela, ova tri odjeljka pojavit će se u jednom stupcu, jednom od vrha drugog. Ovo je tipičan izgled koji se koristi za rasporede mobilnih i malih zaslona.
 






Kako se širina preglednika povećava tako da bude dovoljno velika da odgovara 2 stupca zajedno s navedenim prazninama u stupcu, preglednik će automatski prijeći s jednog stupca na dva stupca. Povećajte širinu zaslona i konačno ćete dobiti dizajn od 3 stupca, pri čemu se svaka od naših 3 odjeljaka prikazuje u vlastitom stupcu. Opet, ovo je odličan način da dobijete neke responzivne izglede za više uređaja i ne morate čak koristiti medijske upite za promjenu stilova izgleda!
 Ostali svojstva stupa
Uz svojstva pokrivena ovdje, tu su i svojstva za "pravilo stupaca", uključujući boje, stil i širinu vrijednosti koje vam omogućuju stvaranje pravila između stupaca. To će se koristiti umjesto granica ako želite imati neke linije koji razdvajaju vaše stupce.
 Vrijeme eksperimentiranja
Trenutačno je CSS višestruka struktura stupaca vrlo dobro podržana.Uz prefikse, više od 94% web korisnika bi moglo vidjeti te stilove, a ta nepodržana grupa zapravo bi bila tek starija verzija Internet Explorera koju ionako više ne podržavate.
S ovom razinom podrške koja je sada na mjestu, nema razloga da ne započnemo eksperimentirati s CSS Stupovima i implementirate ove stilove u web stranice spremne za proizvodnju. Možete započeti eksperimente pomoću HTML i CSS predstavljenog u ovom članku i igrati se s različitim vrijednostima kako biste vidjeli što bi najbolje odgovaralo potrebama rasporeda web sučelja.