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):
Zaglavlje vašeg članka
Zamislite puno odlomaka 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:
Najnovije vijesti
Sadržaj će ići ovdje ...
Od našeg bloga Sadržaj će ići ovdje ...
Nadolazeći događaji p> CSS za izradu tih višestrukih stupaca počinje s onim što ste ranije vidjeli:
.content {-moz-column-count: 3; -webkit-kolona-broj: 3; broj stupaca: 3; -moz-stupac-praznina: 30px; -webkit-stup-gap: 30px; stupac-praznina: 30px; } Sada je izazov jer preglednik želi podijeliti ovaj sadržaj ravnomjerno pa ako je duljina sadržaja tih odjeljaka drugačija, taj preglednik će zapravo podijeliti sadržaj pojedine podjele, dodajući njegov početak u jedan stupac i a zatim nastavite u drugu (možete vidjeti ovo pomoću ovog koda da biste pokrenuli eksperiment i dodali različite duljine sadržaja unutar svake odjeljaka)!
To nije ono što želite. Želite da svaka od tih odjeljaka stvori zaseban stupac i, bez obzira koliko velik ili mali sadržaj pojedine podjele može biti, nikada nećete želite podijeliti. To možete postići dodavanjem ove dodatne linije CSS-a:
.content div {display: inline-blok; } To će prisiliti one dijelove koji su unutar "sadržaja" da ostanu netaknuti, čak i ako ih preglednik dijeli na više stupaca. Čak i bolje, budući da ovdje nismo dali ništa fiksnu širinu, ti će se stupci automatski promijeniti veličinu, budući da ih preglednik mijenja veličinu, čineći ih idealnom aplikacijom za responzivne web stranice . S tim "inline-block" stilom, svaka od vaših 3 odjeljaka bit će različit stupac sadržaja.
Upotreba stupca širine
Postoji 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.
Sadržaj će ići ovdje ...
Nadolazeći događaji p> CSS za izradu tih višestrukih stupaca počinje s onim što ste ranije vidjeli:
.content {-moz-column-count: 3; -webkit-kolona-broj: 3; broj stupaca: 3; -moz-stupac-praznina: 30px; -webkit-stup-gap: 30px; stupac-praznina: 30px; } Sada je izazov jer preglednik želi podijeliti ovaj sadržaj ravnomjerno pa ako je duljina sadržaja tih odjeljaka drugačija, taj preglednik će zapravo podijeliti sadržaj pojedine podjele, dodajući njegov početak u jedan stupac i a zatim nastavite u drugu (možete vidjeti ovo pomoću ovog koda da biste pokrenuli eksperiment i dodali različite duljine sadržaja unutar svake odjeljaka)!
To nije ono što želite. Želite da svaka od tih odjeljaka stvori zaseban stupac i, bez obzira koliko velik ili mali sadržaj pojedine podjele može biti, nikada nećete želite podijeliti. To možete postići dodavanjem ove dodatne linije CSS-a:
.content div {display: inline-blok; } To će prisiliti one dijelove koji su unutar "sadržaja" da ostanu netaknuti, čak i ako ih preglednik dijeli na više stupaca. Čak i bolje, budući da ovdje nismo dali ništa fiksnu širinu, ti će se stupci automatski promijeniti veličinu, budući da ih preglednik mijenja veličinu, čineći ih idealnom aplikacijom za responzivne web stranice . S tim "inline-block" stilom, svaka od vaših 3 odjeljaka bit će različit stupac sadržaja.
Upotreba stupca širine
Postoji 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.
CSS za izradu tih višestrukih stupaca počinje s onim što ste ranije vidjeli:
.content {-moz-column-count: 3; -webkit-kolona-broj: 3; broj stupaca: 3; -moz-stupac-praznina: 30px; -webkit-stup-gap: 30px; stupac-praznina: 30px; }Sada je izazov jer preglednik želi podijeliti ovaj sadržaj ravnomjerno pa ako je duljina sadržaja tih odjeljaka drugačija, taj preglednik će zapravo podijeliti sadržaj pojedine podjele, dodajući njegov početak u jedan stupac i a zatim nastavite u drugu (možete vidjeti ovo pomoću ovog koda da biste pokrenuli eksperiment i dodali različite duljine sadržaja unutar svake odjeljaka)!
To nije ono što želite. Želite da svaka od tih odjeljaka stvori zaseban stupac i, bez obzira koliko velik ili mali sadržaj pojedine podjele može biti, nikada nećete želite podijeliti. To možete postići dodavanjem ove dodatne linije CSS-a:
.content div {display: inline-blok; }To će prisiliti one dijelove koji su unutar "sadržaja" da ostanu netaknuti, čak i ako ih preglednik dijeli na više stupaca. Čak i bolje, budući da ovdje nismo dali ništa fiksnu širinu, ti će se stupci automatski promijeniti veličinu, budući da ih preglednik mijenja veličinu, čineći ih idealnom aplikacijom za responzivne web stranice . S tim "inline-block" stilom, svaka od vaših 3 odjeljaka bit će različit stupac sadržaja.
Upotreba stupca širine
Postoji 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.