Aastaid, CSS hõljub on veebisaitide kujundamisel olnud peen, kuid siiski vajalik komponent. Kui teie kujundus nõudis mitut veergu, pöördusite ujukite poole. Selle meetodi probleem seisneb selles, et hoolimata uskumatust leidlikkusest, mida veebidisainerid / -arendajad on keeruka saidi loomisel üles näidanud paigutused, CSS-ujukeid ei olnud kunagi mõeldud sellisel viisil kasutamiseks.
Kuigi ujukitel ja CSS-i positsioneerimisel on veebidisainis kindel koht veel aastaid, on uuem paigutus tehnikad, sealhulgas CSS Grid ja Flexbox, pakuvad nüüd veebidisaineritele uusi viise oma saidiplaanide loomiseks. Teine uus potentsiaalset küljendustehnikat on CSS mitu veergu.
CSS-veerud on olnud juba mõned aastad, kuid vanemates (peamiselt vanemates) brauserites puudub tugi Internet Exploreri versioonid) on takistanud paljusid veebiprofessionaale nende stiilide kasutamisel oma tootmises töö.
Nende IE vanemate versioonide toetuse lõppedes katsetavad mõned veebidisainerid nüüd uue CSS-paigutusega valikud, kaasatud CSS-i veerud ja leidmine, et neil on nende uute lähenemisviiside abil palju suurem kontroll kui neil hõljub.
CSS-i veergude põhitõed
Nagu nimigi ütleb, on CSSi mitu veergu (tuntud ka kui CSS3 mitme veeru paigutus) võimaldab teil jagada sisu määratud arvu veergudeks. Põhilised CSS-i atribuudid, mida kasutate, on:
- veergude arv
- veergude vahe
Veergude loendamiseks määrate soovitud veergude arvu. Kolonni vahe oleks nende veergude rennid või vahe. Brauser võtab need väärtused ja jagab sisu ühtlaselt teie määratud veergude arvuks.
CSS-i mitme veeru tavaline näide oleks tekstisisu ploki jagamine mitmeks veerguks, sarnaselt ajaleheartiklile. Oletame, et teil on järgmine HTML-i märgistus (pange tähele, et näiteks oleme selleks pannud ainult alguse üks lõik, kuigi praktikas oleks selles märgistuses tõenäoliselt mitu lõiku sisu):
Teie artikli pealkiri.
Kujutage siin ette palju tekstilõike ...
Kui kirjutasite siis need CSS-i stiilid:
.sisu {
-moz-veergude arv: 3;
-webkit-veergude arv: 3;
veergude arv: 3;
-moz-veeru vahe: 30px;
-webkit-column-gap: 30px;
veergude vahe: 30 pikslit;
}
See CSS-reegel jagaks jaotuse „sisu” kolmeks võrdseks veeruks, mille vahel oleks 30 pikslit. Kui soovite kolme veeru asemel kahte veergu, muudaksite lihtsalt seda väärtust ja brauser arvutaks nende veergude uued laiused, et sisu ühtlaselt jagada. Pange tähele, et me kasutame kõigepealt müüja eesliidetud atribuute, millele järgnevad eesliiteta deklaratsioonid.
Nii lihtne kui see ka pole, on selle kasutamine sellisel viisil veebisaidi jaoks küsitav. Jah, saate jagada hulga sisu mitmesse veergu, kuid see ei pruugi olla parim lugemine veebikogemus, eriti kui nende veergude kõrgus langeb allapoole ekraan.
Seejärel peaksid lugejad kogu sisu lugemiseks üles ja alla kerima. Sellegipoolest on CSS-i veergude põhimõte sama lihtne, nagu siin näete, ja seda saab kasutada nii palju kui lihtsalt lõigete sisu jagamiseks - seda saab tõepoolest kasutada paigutuseks.
Küljendus CSS-veergudega
Oletame, et teil on veebileht sisupiirkonnaga, millel on 3 sisuveeru. See on väga levinud veebisaidi paigutus ja nende kolme veeru saavutamiseks hõljuksite tavaliselt jaotusi, milles on. CSS-i mitme veeruga on see palju lihtsam.
Siin on mõned HTML-i näidised:
Meie ajaveebist.
Sisu läheks siia ...
Eesseisvad Sündmused.
Sisu läheks siia ...
Nende mitme veeru loomiseks mõeldud CSS algab sellest, mida nägite varem:
.sisu {
-moz-veergude arv: 3;
-webkit-veergude arv: 3;
veergude arv: 3;
-moz-veeru vahe: 30px;
-webkit-column-gap: 30px;
veergude vahe: 30 pikslit;
}
Nüüd on väljakutseks see, et brauser soovib selle sisu ühtlaselt jagada, nii et kui nende jaotuste sisu pikkus on erinev, jagab see brauser tegelikult ka individuaalse jaotuse, lisades selle alguse ühte veergu ja jätkates seejärel teise (näete seda, kui kasutate seda koodi katse käivitamiseks ja lisage igasse sisusse erineva pikkusega sisu) jaotus).
See pole see, mida soovite. Soovite, et kõik need jaotised loovad eraldi veeru ja hoolimata sellest, kui suur või väike on üksiku jaotuse sisu, ei soovi te seda kunagi tükeldada. Selle saavutamiseks lisage see üks täiendav CSS-rida:
.content div {
kuva: sisemine-plokk;
}
See sunnib jaotises, mis asub sisus, puutumata ka siis, kui brauser jagab selle mitmesse veergu. Veelgi parem, kuna me ei andnud siin millelegi fikseeritud laiust, muudetakse nende veergude suurust automaatselt, kui brauser suurust muudab, muutes need ideaalseks rakenduseks tundlikud veebisaidid. Kui see sisseehitatud-blokeeritud stiil on paigas, on kõik teie kolm jaotust eraldi sisuveerud.
Kasutades veeru-laiust
Lisaks veergude loendamisele on veel üks vara, mida saate kasutada, ja sõltuvalt teie paigutusvajadustest võib see olla teie saidi jaoks parem valik. See on “veeru laius”. Kasutades sama HTML-i märgistust, nagu varem näidatud, võiksime seda teha ka oma CSS-iga:
.sisu {
-moz-veeru laius: 500px;
-webkit-column-width: 500px;
veeru laius: 500 pikslit;
-moz-veeru vahe: 30px;
-webkit-column-gap: 30px;
veergude vahe: 30 pikslit;
}
.content div {
kuva: sisemine-plokk;
}
See töötab nii, et brauser kasutab seda veeru laiust maksimaalse väärtusena. Nii et kui brauseriakna laius on väiksem kui 500 pikslit, kuvatakse need 3 jaotust ühes veerus üksteise kohal. See on tüüpiline paigutus, mida kasutatakse mobiilsete / väikeste ekraanipaigutuste jaoks.
Kui brauseri laius kasvab piisavalt suureks, et mahutada 2 veergu koos määratud veergude vahedega, liigub brauser automaatselt ühe veeru paigutusest kahte veergu. Jätkake ekraani laiuse suurendamist ja lõpuks saate 3 veeru kujunduse, kusjuures kõik meie 3 jaotised kuvatakse oma veerus. Jällegi on see suurepärane võimalus reageerida, mitme seadmega sõbralik paigutusi ja te ei pea seda isegi kasutama meediapäringud paigutusstiilide muutmiseks!
Muud veeru omadused
Lisaks siin käsitletud omadustele on ka veeru reegli omadused, sealhulgas värvi, stiili ja laiuse väärtused, mis võimaldavad teil veergude vahel reegleid luua. Neid kasutatakse piiride asemel, kui soovite, et veerge eraldaksid mõned read.
Aeg katsetada
Praegu on CSS mitme veeru paigutus väga hästi toetatud. Eesliidete abil näeks neid stiile üle 94% veebikasutajatest ja see toetamata rühm oleks tegelikult Internet Exploreri palju vanemad versioonid, mida nagunii enam ei toetata.
Kui see tugiteenus on nüüd olemas, pole põhjust mitte hakata CSS-i veergudega eksperimenteerima ja neid stiile tootmisvalmis veebisaitidel juurutama. Oma katseid saate alustada selles artiklis toodud HTML-i ja CSS-i abil ning mängida erinevate väärtustega, et näha, mis teie saidi paigutusvajaduste jaoks kõige paremini sobib.