Dolga leta so bili CSS plovci fini, a nujni, komponenta pri oblikovanju postavitev spletnih strani. Če je vaš dizajn zahteval več stolpcev, ste se obrnili na plavate. Problem s to metodo je, da kljub neverjetni iznajdljivosti, ki so jo ustvarili spletni oblikovalci / razvijalci pri ustvarjanju kompleksnih postavitev spletnega mesta, CSS plovci nikoli niso bili resnično namenjeni za uporabo na ta način.
Medtem ko so plavajoče in pozicioniranje CSS zagotovo v spletnem dizajnu v prihodnjih letih, novejše tehnike postavitve, vključno s CSS Grid in Flexbox, zdaj dajejo spletnim oblikovalcem nove načine za oblikovanje njihovih postavitev spletnega mesta. Druga nova tehnika postavitve, ki prikazuje veliko potenciala, je CSS več stolpcev.
Stolpci CSS so bili že nekaj let, vendar pomanjkanje podpore v starejših brskalnikih (večinoma starejših različicah Internet Explorerja) je mnoge spletne strokovnjake preprečilo uporabo teh stilov pri svojem proizvodnem delu.
Ob koncu podpore za starejše različice IE nekateri spletni oblikovalci zdaj preizkušajo z novimi možnostmi postavitve CSS-a, vključijo stolpce CSS in ugotovijo, da imajo s temi novimi pristopi toliko večji nadzor kot s plavajoci.
Osnove CSS stolpcev
Kot navaja ime, CSS več stolpcev (znan tudi kot razporeditev več stolpcev CSS3) vam omogoča, da razdeli vsebino v določeno število stolpcev. Najbolj osnovne lastnosti CSS, ki bi jih uporabljali, so:
- štetje stolpcev
- razlike med stolpci
Za število stolpcev določite število stolpcev, ki jih želite. Odprtina kolone bi bila žlebovi ali razmik med temi stebri. Brskalnik bo upošteval te vrednosti in enakomerno razdelil vsebino v število stolpcev, ki jih navedete.
Skupni primer več stolpcev CSS v praksi bi bil razdelitev bloka besedilne vsebine v več stolpcev, podobno temu, kar bi videli v časopisnem članku. Recite, da imate naslednjo oznako HTML (upoštevajte, da na primer zastavim začetek enega odstavka, medtem ko bi v tem primeru verjetno imeli več odstavkov vsebine):
Če ste nato napisali te sloge CSS:
.content {-moz-stolpec-število: 3; -webkit-stolpec-štetje: 3; število stolpcev: 3; -moz-stolpec-vrzel: 30px; -webkit-stolpec-prepad: 30px; stolpec-razmik: 30px; }
To pravilo CSS bi razdelilo razdelek »vsebina« v 3 enake stolpce z razdaljo 30 pikslov med njimi. Če bi želeli dva stolpca namesto 3, preprosto spremenite to vrednost in brskalnik bi izračunal nove širine teh stolpcev, da bi vsebino enakomerno razdelili. Upoštevajte, da najprej uporabimo predpone lastnosti ponudnika, ki ji sledijo neprefiksne deklaracije.
Tako preprosto je, da je njegova uporaba na ta način vprašljiva za uporabo spletne strani. Da, lahko razdelite skupino vsebine v več stolpcev, vendar to morda ni najboljša izkušnja branja za splet, še posebej, če višina teh stolpcev pade pod »krat« na zaslonu.
Bralci bi se morali nato pomikati navzgor in navzdol, da bi prebrali celotno vsebino. Še vedno je glavni stolpec CSS tako preprost, kot si videl tukaj, in ga lahko uporabite, če želite storiti več kot le razdelitev vsebine nekaterih odstavkov - se lahko dejansko uporabi za postavitev.
Postavitev s stolpci CSS
Recite, da imate spletno stran z vsebinskim področjem, ki ima 3 stolpce vsebine. To je zelo tipična postavitev spletnega mesta in za doseganje teh treh stolpcev običajno plavate razdelke, ki se nahajajo. Z več stolpci CSS je veliko lažje.
Tukaj je nekaj primerov HTML:
