Že vrsto let, CSS plava so bili izbirčen, a nujen sestavni del pri ustvarjanju postavitev spletnih mest. Če je vaš dizajn zahteval več stolpcev, ste se obrnili na plavajoče. Težava te metode je v tem, da kljub neverjetni iznajdljivosti, ki so jo spletni oblikovalci / razvijalci pokazali pri ustvarjanju zapletenih spletnih mest postavitve, Plovci CSS v resnici nikoli niso bili namenjeni za uporabo na ta način.
Medtem ko bodo floats in pozicioniranje CSS zagotovo imeli mesto v spletnem oblikovanju še mnogo let, novejša postavitev tehnike, vključno s CSS Grid in Flexbox, dajejo spletnim oblikovalcem nove načine za ustvarjanje postavitev njihovih spletnih mest. Druga nova tehnika postavitve, ki kaže veliko potenciala, je več stolpcev CSS.
Stolpci CSS obstajajo že nekaj let, vendar pomanjkanje podpore v starejših brskalnikih (predvsem starejših različice Internet Explorerja) je mnogim spletnim strokovnjakom preprečil uporabo teh stilov pri njihovi izdelavi delo.
Ob koncu podpore za starejše različice IE nekateri spletni oblikovalci zdaj eksperimentirajo z novo postavitvijo CSS možnosti, vključno s stolpci CSS, in ugotovili, da imajo s temi novimi pristopi toliko večji nadzor kot prej plava.
Osnove stolpcev CSS
Kot že ime pove, več stolpcev CSS (znanih tudi kot CSS3 postavitev z več stolpci) omogoča razdelitev vsebine na določeno število stolpcev. Najosnovnejše lastnosti CSS, ki bi jih uporabili, so:
- števec stolpcev
- vrzel v stolpcu
Za štetje stolpcev določite želeno število stolpcev. Reža stolpca bi bila žlebovi ali razmik med temi stolpci. Brskalnik bo vzel te vrednosti in vsebino enakomerno razdelil na določeno število stolpcev.
Pogost primer več stolpcev CSS v praksi bi bil razdelitev bloka besedilne vsebine na več stolpcev, podobno kot bi videli v časopisnem članku. Recimo, da imate naslednje oznake HTML (upoštevajte, da smo na primer postavili samo začetek en odstavek, medtem ko bi bilo v praksi v tej oznaki verjetno več odstavkov vsebine):
Naslov vašega članka.
Predstavljajte si veliko odstavkov besedila tukaj ...
Če ste potem napisali te sloge CSS:
.content {
-moz-count-count: 3;
-webkit-count-count: 3;
število stolpcev: 3;
-moz-razmik med stolpci: 30 slikovnih pik;
-webkit-kolona-vrzel: 30 slikovnih pik;
vrzel v stolpcu: 30 slikovnih pik;
}
To pravilo CSS bi razdelilo vsebino na 3 enake stolpce z razmikom 30 slikovnih pik. Če bi želeli dva stolpca namesto 3, bi preprosto spremenili to vrednost in brskalnik bi izračunal nove širine teh stolpcev, da bi vsebino enakomerno razdelil. Upoštevajte, da najprej uporabimo lastnosti, ki so predfigirane s strani prodajalca, nato pa še nepredfiksne izjave.
Tako enostavna je njegova uporaba na ta način vprašljiva za uporabo spletnih strani. Da, kup vsebine lahko razdelite na več stolpcev, vendar to morda ni najboljše branje izkušnje s spletom, še posebej, če višina teh stolpcev pade pod "pregib" zaslon.
Bralci bi se potem morali pomikati gor in dol, da bi lahko prebrali celotno vsebino. Kljub temu je glavni del stolpcev CSS tako enostaven, kot vidite tukaj, in z njim lahko naredimo veliko več kot le razdelimo vsebino nekaterih odstavkov - res ga lahko uporabimo za postavitev.
Postavitev s stolpci CSS
Recimo, da imate spletno stran s področjem z vsebino, ki vsebuje 3 stolpce vsebine. To je zelo pogosta postavitev spletnega mesta in če želite doseči te tri stolpce, bi običajno plavali v oddelkih, ki so znotraj. Z CSS z več stolpci je tako veliko lažje.
Tu je nekaj vzorčnih HTML-jev:
Iz našega bloga.
Vsebina bi šla sem ...
Prihajajoči dogodki.
Vsebina bi šla sem ...
CSS za izdelavo teh več stolpcev se začne s tem, kar ste že videli:
.content {
-moz-count-count: 3;
-webkit-count-count: 3;
število stolpcev: 3;
-moz-razmik med stolpci: 30 slikovnih pik;
-webkit-kolona-vrzel: 30 slikovnih pik;
vrzel v stolpcu: 30 slikovnih pik;
}
Zdaj je izziv v tem, da želi brskalnik to vsebino enakomerno razdeliti, tako da če je dolžina vsebine teh oddelkov drugačna, bo ta brskalnik dejansko razdelil vsebino posamezne delitve, v en stolpec dodate začetek le-tega in nato nadaljujete v drugega (to lahko vidite tako, da s to kodo izvedete preizkus in dodate različne dolžine vsebine znotraj vsakega delitev).
To ni tisto, kar si želite. Želite, da vsak od teh oddelkov ustvari ločen stolpec in ne glede na to, kako velika ali majhna je vsebina posameznega oddelka, je nikoli ne želite razdeliti. To lahko dosežete z dodajanjem te dodatne vrstice CSS:
.content div {
zaslon: vrstni blok;
}
To bo prisililo tiste oddelke, ki so znotraj "vsebine", da ostanejo nedotaknjeni, tudi če jih brskalnik razdeli na več stolpcev. Še bolje, ker tukaj nismo dali ničesar fiksne širine, se bodo ti stolpci samodejno spreminjali, ko bo brskalnik spreminjal velikost, zaradi česar so idealna aplikacija za odzivna spletna mesta. S tem slogom "vstavljeni blok" bo vsak od vaših treh oddelkov ločen stolpec z vsebino.
Uporaba širine stolpca
Poleg funkcije »štetje stolpcev« lahko uporabite še eno lastnost, ki je morda boljša izbira za vaše spletno mesto, odvisno od vaših postavitev. To je "širina stolpca". Z enakim označevanjem HTML, kot je bilo prikazano prej, bi lahko to storili z našim CSS:
.content {
-moz-širina stolpca: 500px;
-webkit-širina stolpca: 500px;
širina stolpca: 500 slikovnih pik;
-moz-razmik med stolpci: 30 slikovnih pik;
-webkit-kolona-vrzel: 30 slikovnih pik;
vrzel v stolpcu: 30 slikovnih pik;
}
.content div {
zaslon: vrstni blok;
}
To deluje tako, da brskalnik uporablja to "širino stolpca" kot največjo vrednost tega stolpca. Torej, če je okno brskalnika široko manj kot 500 slikovnih pik, se bodo ti trije oddelki pojavili v enem stolpcu, eden na vrhu drugega. To je tipična postavitev, ki se uporablja za postavitve za mobilne / majhne zaslone.
Ko se širina brskalnika poveča, da je dovolj velika, da prilega 2 stolpca skupaj z navedenimi vrzelmi stolpcev, bo brskalnik samodejno prešel iz postavitve enega stolpca v dva stolpca. Nadaljujte s povečevanjem širine zaslona in sčasoma boste dobili zasnovo s 3 stolpci, pri čemer bo vsak od naših 3 oddelkov prikazan v svojem stolpcu. Še enkrat, to je odličen način, da dobite nekaj odzivnosti, prijazen do več naprav postavitev in vam niti ni treba uporabljati medijska vprašanja za spremembo slogov postavitve!
Druge lastnosti stolpca
Poleg tukaj zajetih lastnosti obstajajo tudi lastnosti za »pravilo stolpca«, vključno z vrednostmi barve, sloga in širine, ki omogočajo ustvarjanje pravil med stolpci. Te bi uporabili namesto robov, če želite imeti nekaj vrstic, ki ločujejo vaše stolpce.
Čas za eksperimentiranje
Trenutno je postavitev CSS z več stolpci zelo dobro podprta. S predponami bi lahko več kot 94% spletnih uporabnikov videlo te sloge in ta nepodprta skupina bi bila v resnici le veliko starejše različice Internet Explorerja, ki tako ali tako niso več podprte.
Ob tej ravni podpore, ki je zdaj vzpostavljena, ni razloga, da ne bi začeli eksperimentirati s stolpci CSS in uvesti te sloge na spletna mesta, pripravljena za produkcijo. Eksperimente lahko začnete z uporabo HTML in CSS, predstavljenih v tem članku, in se poigrate z različnimi vrednostmi, da vidite, kaj bi najbolje ustrezalo potrebam postavitve vašega spletnega mesta.