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):
Naslov vašega članka
Predstavljajte si veliko odstavkov besedila ...
Č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:
Zadnje novice
Vsebina bi bila tukaj ...
Iz našega spletnega dnevnika
Vsebina bi bila tukaj ...
Prihajajoči dogodki
p>
CSS, da se ti stolpci začnejo s tem, kar ste že videli:
.content {-moz-stolpec-število: 3; -webkit-stolpec-štetje: 3; število stolpcev: 3; -moz-stolpec-vrzel: 30px; -webkit-stolpec-prepad: 30px; stolpec-razmik: 30px; }Zdaj je izziv tukaj, ker želi brskalnik enakomerno razdeliti to vsebino, tako da če je vsebinska dolžina teh delitev drugačna, bo ta brskalnik dejansko razdelil vsebino posamezne delitve, pri čemer bo dodal začetek na en stolpec in nato pa nadaljujete v drugo (to lahko vidite s pomočjo te kode za izvajanje preizkusa in dodajanje različnih dolžin vsebine znotraj vsake razdelke)!
To ni tisto, kar hočeš. Želite, da vsaka od teh razdelkov ustvari ločen stolpec in, ne glede na to, kako velika ali majhna je vsebina posamezne delitve, nikoli ne želite, da se razdeli. To lahko dosežete tako, da dodate to eno dodatno vrstico CSS:
. vsebina div {display: inline-block; }To bo prisililo, da delitve, ki so znotraj vsebine, ostanejo nepoškodovane, tudi če se brskalnik razdeli v več stolpcev. Še bolje, ker tukaj nismo dali ničesar določene fiksne širine, se ti stolpci samodejno spreminjajo glede na velikost brskalnika, zaradi česar so idealna aplikacija za odzivna spletna mesta . S tem "inline-block" slogom, bo vsaka od vaših treh oddelkov ločen stolpec vsebine.
Uporaba širine stolpca
Poleg "štetje stolpcev" je še eno lastnost, ki jo lahko uporabite in odvisno od vaših potreb v postavitvi, je dejansko lahko boljša izbira za vaše spletno mesto. To je "širina stolpcev". Z uporabo iste oznake HTML, kot je prikazano prej, bi namesto tega lahko naredili z našim CSS:
. vsebina {-moz-column-width: 500px; -webkit-stolpec-širina: 500px; stolpec-širina: 500px; -moz-stolpec-vrzel: 30px; -webkit-stolpec-prepad: 30px; stolpec-razmik: 30px; }. vsebina div {display: inline-block; }Način, kako to deluje, je, da brskalnik uporablja to "stolpec-širino" kot največjo vrednost tega stolpca. Torej, če je okno brskalnika široko manj kot 500 slikovnih pik, se te tri razdelke pojavijo v enem stolpcu, enem od vrhov drugega. To je tipična postavitev, ki se uporablja za postavitve mobilnih / majhnih zaslonov.
Ker se širina brskalnika poveča tako, da je dovolj velika, da ustreza dvema stolpoma skupaj z določenimi vrzeli stolpcev, bo brskalnik samodejno prešel iz ene same stolpce na dva stolpca. Povečajte širino zaslona in sčasoma dobite 3 stolpce, pri čemer je vsaka od treh razdelkov prikazana v svojem stolpcu. Še enkrat, to je odličen način, da dobite odzivne, prijazne postavitve za več naprav , in sploh ne potrebujete medijskih poizvedb za spreminjanje stilov postavitve!
Druge lastnosti stolpcev
Poleg tu navedenih lastnosti so tudi lastnosti za »pravilo stolpca«, vključno z barvnimi, slognimi in širinskimi vrednostmi, ki vam omogočajo, da ustvarite pravila med vašimi stolpci. Te bi bile uporabljene namesto meja, če želite imeti nekaj vrstic, ki ločujejo vaše stolpce.
Čas do preizkusa
Trenutno je postavitev CSS z več stolpci zelo dobro podprta. S predponami bi lahko več kot 94% spletnih uporabnikov videli te sloge in to nepodprto skupino bi bilo res samo veliko starejših različic brskalnika Internet Explorer, za katere morda ne boste več podpirali.
S to stopnjo podpore, ki je zdaj na voljo, ni nobenega razloga, da bi začeli eksperimentirati s CSS Stolpci in uvajati te sloge v spletne strani, ki so pripravljene na proizvodnjo. Poskusi lahko začnete z uporabo HTML in CSS, ki so predstavljeni v tem članku, in se igrajte z različnimi vrednostmi, da vidite, kaj bi najbolje delovalo pri postavitvi vašega spletnega mesta.