Veebisaidi kujundamise loomisel on CSS-i ujukid juba aastaid olnud suurepärane, kuid vajalik osa. Kui teie disain kutsus mitut veergu, siis pöörasite ujukitele . Selle meetodi probleemiks on see, et hoolimata uskumatust leidlikkusest, mida veebidisainerid / arendajad on oma komplekssete saidipaigutuste loomisel näitasid, ei kasutata selliseid CSS-i hõljukeid kunagi.
Kuigi ujukite ja CSS-i positsioneerimine on veebidisaini kindel koht paljudeks aastateks, pakuvad uued kujundusvõtted, sealhulgas CSS Grid ja Flexbox, veebilehtede kujunduse loomiseks uusi võimalusi. Teine uus paigutusvõte, mis näitab palju potentsiaali, on CSS-i mitu veergu.
CSS veerud on juba mõnda aega olnud, kuid vanemate brauseritega (peamiselt Internet Exploreri vanemate versioonidega) toetuse puudumine on paljudel veebi spetsialistidel hoidnud nende stiilide kasutamist oma tootmistegevuses.
Nende IE vanemate versioonide toetuse lõppemisega katsetavad mõned veebidisainerid nüüd uusi CSS-i kujundusvalikuid, CSS-veerud ja arvasid, et nende uute lähenemisviisidega on palju rohkem kontrolli, kui nad ujukitega tegid.
CSS veergude põhitõed
Nagu nimigi ütleb, võimaldab CSS mitu veergu (tuntud ka kui CSS3 mitme veergude kujundus), mille abil saate jagada sisu kindlaksmääratud arvude veergudeks. Kõige lihtsamad CSS-i omadused, mida te kasutate:
- veeru arv
- veeru-lõhe
Veeru loendamiseks määrate vajalike veergude arvu. Veeru lõhe on need veerud või ristlõiked. Brauser võtab need väärtused ja jagab sisu ühtlaselt teie määratud veergude arvuga.
Tavaliselt on tavaline CSS-i veergude näide teksti sisu ploki jagamiseks mitmesse veergu sarnaselt sellele, mida näete ajaleheartiklis. Ütle, et teil on järgmine HTML-märgistus (märkus, et näiteks eesmärkidel panen alustama ainult ühte lõiget, kuid praktikas võib selles märgistuses olla mitu paragrahvi sisu):
Artikli pealkiri
Kujutlege siin palju teksti lõikeid ...
Kui siis kirjutasite need CSS-i stiilid:
. sisu {-moz-kolonn-arv: 3; -webkit-kolonn-arv: 3; kolonn-arv: 3; -moz-kolonn-tühik: 30 pikslit; -webkit-kolonn-tühik: 30px; veergude vahe: 30 px; }See CSS-i reegel jagab "sisu" jagunemise 3 võrdseks veeruks, mille vahele on nende vahe 30 pikslit. Kui soovite kolme asemel kahe veeru, muudaksite selle väärtuse lihtsalt ja brauser arvutab nende veergude uued laiused, et jagada sisu ühtlaselt. Pange tähele, et me kasutame kõigepealt tarnija eelistatud omadusi, millele järgneb mitte-eelnevalt määratletud deklaratsioonid.
Nii lihtne kui see on, selle kasutamine sellisel viisil on veebisaidi kasutamisel küsitav. Jah, saate jagada hulga sisu mitmesse veergu, kuid see ei pruugi Web-i jaoks parim lugemisoskusi, eriti kui nende veergude kõrgus jääb ekraani "klahv" alla.
Lugejad peaksid seejärel kogu sisu sirvimiseks üles ja alla liikuma. Siiski on CSS-veergude printsiip nii lihtne, kui näete siin, ja seda saab kasutada palju rohkem kui lihtsalt mõne paragrahvi sisu jagamine - seda saab tõepoolest paigutuse jaoks kasutada.
CSS veergude kujundus
Ütle, et teil on veebisait, mille sisu ala sisaldab 3 veergu sisust. See on väga tüüpiline veebisaitide paigutus ja nende kolme veeru saavutamiseks peaksite hõlpsalt levima jagunemisvorme. CSS-i mitmest veergu kasutades on see palju lihtsam.
Siin on mõni HTML-i näidis:
Viimased uudised
Sisu läheks siia ...
Sisu läheks siia ...
Tulevased sündmused
Sisu läheks siia ...
Nende mitmekordsete veergude tegemine CSS-i algab varasema nägemisega:
. sisu {-moz-kolonn-arv: 3; -webkit-kolonn-arv: 3; kolonn-arv: 3; -moz-kolonn-tühik: 30 pikslit; -webkit-kolonn-tühik: 30px; veergude vahe: 30 px; }Nüüd seisab väljakutse selles, et kuna brauser soovib selle sisu ühtlaselt jagada, siis, kui nende jagude sisu pikkus on teistsugune, siis selle brauseriga tegelikult jagatakse üksikute jagude sisu, lisades selle ühe veeru alguse ja siis jätkatakse teisega (näete seda koodi kasutades eksperimendi käivitamiseks ja iga jagamise sisuks erinevat pikkust)!
See pole see, mida sa tahad. Tahad, et kõik need jagud moodustaksid eristatava veeru ja ükskõik kui suur või väike üksikute osade sisu võiks olla, siis ei taha seda kunagi jagada. Saate seda saavutada, lisades selle ühe täiendava CSS-rida:
.content div {display: inline-block; }See sunnib neid "" sisuga "jagunemisi jääma puutumatuks, isegi kui brauser jagab selle mitmeks veerguks. Veelgi parem, kuna me ei andnud siin midagi fikseeritud laiust, muudavad need veerud brauseri suurust automaatselt, muutes need ideaalseks rakenduseks reageeritavatele veebisaitidele . Selle "inline-block" stiili puhul on kõik teie 3 jagud eraldi sisu veerud.
Veeru laius
Veel üks "veeru-loend" on vara, mida saate kasutada ja sõltuvalt paigutusvajadusest võib see teie saidil paremaks valikuks olla. See on veeru laius. Kasutades sama HTML-märgistust, nagu varem on näidatud, võime selle asemel teha meie CSS-iga:
. sisu {-moz-column-laius: 500px; -webkit-column-laius: 500px; veeru laius: 500px; -moz-kolonn-tühik: 30 pikslit; -webkit-kolonn-tühik: 30px; veergude vahe: 30 px; } .content div {display: inline-block; }See toimib nii, et brauser kasutab seda veeru laiust kui selle veeru maksimaalset väärtust. Nii et kui brauseri aken on väiksem kui 500 pikslit lai, ilmuvad need 3 jagud ühes veerus, mis on üks teise tippu. See on tüüpiline paigutus, mida kasutatakse mobiilseadmete / väikeste ekraanipaigutuste jaoks.
Kui brauseri laius suureneb, nii et see sobib 2 veergu koos määratud veeru vahemikega, läheb brauser automaatselt ühest veerupaigast kahe veergu juurde. Jätkake ekraani laiuse suurendamist ja lõpuks saate 3 veeru disaini, millest igaüks meie 3 osast kuvatakse oma veerus. Jällegi on see suurepärane viis, kuidas saada reageerivaid ja mitme seadmega sõbralikke paigutusi, ja te ei pea paigutusstiilide muutmiseks isegi meediumipäringuid kasutama!
Muud veeru omadused
Lisaks siinkohal kaetud omadustele on ka veeru reegli omadused, sealhulgas värvi, stiili ja laiuse väärtused, mis võimaldavad teil luua reegleid oma veergude vahel. Neid kasutatakse piiride asemel, kui soovite, et oleksid veerud eristatavad.
Katsetamise aeg
Praegu on CSS mitme veergude kujundus väga hästi toetatud. Prefiksidega saab enam kui 94% veebikasutajatest neid stiile näha ja see toetamata grupp oleks tõesti lihtsalt palju vanemaid Internet Exploreri versioone, mida te ei pruugi ikkagi enam toetada.
Selle praeguse toetuse tasemega pole põhjust alustada eksperimenteerimist CSS-veergudega ja nende stiilide kasutamist tootmises valmis veebisaitidel. Saate käivitada oma katsed käesolevas artiklis esitatud HTML-i ja CSS-i abil ning mängida erinevate väärtustega, et näha, mis teie saidi kujunduse vajadustele kõige paremini sobib.