I mange år, CSS flyder har været en fin, men alligevel nødvendig komponent i oprettelsen af websidelayouts. Hvis dit design krævede flere kolonner, vendte du dig til floats. Problemet med denne metode er, på trods af den utrolige opfindsomhed, som webdesignere / udviklere har vist ved oprettelse af komplekse websteder layout, CSS-floats var aldrig rigtig beregnet til at blive brugt på denne måde.
Mens floats og CSS-positionering helt sikkert vil have en plads i webdesign i mange år fremover, nyere layout teknikker, herunder CSS Grid og Flexbox, giver nu webdesignere nye måder at oprette deres sidelayouts på. En anden ny layoutteknik, der viser meget potentiale, er CSS Multiple Columns.
CSS-kolonner har eksisteret i et par år nu, men manglende support i ældre browsere (hovedsagelig ældre) versioner af Internet Explorer) har holdt mange web-professionelle fra at bruge disse stilarter i deres produktion arbejde.
Efter endt support til de ældre versioner af IE eksperimenterer nogle webdesignere nu med nyt CSS-layout optioner, inkluderet CSS-kolonner og at finde ud af, at de har så meget mere kontrol med disse nye tilgange, end de gjorde med flyder.
Grundlæggende om CSS-kolonner
Som navnet antyder, CSS flere kolonner (også kendt som CSS3 multi-column layout) giver dig mulighed for at opdele indhold i et sæt antal kolonner. De mest basale CSS-egenskaber, du vil bruge, er:
- kolonnetælling
- kolonnegab
For kolonnetælling angiver du det ønskede antal kolonner. Kolonnegabet ville være tagrenderne eller afstanden mellem disse kolonner. Browseren tager disse værdier og deler indholdet jævnt i det antal kolonner, du angiver.
Et almindeligt eksempel på CSS flere kolonner i praksis ville være at opdele en blok med tekstindhold i flere kolonner, svarende til hvad du ville se i en avisartikel. Sig, at du har følgende HTML-markering (bemærk at vi for eksempel kun har startet et afsnit, mens der i praksis sandsynligvis vil være flere afsnit af indholdet i denne markering):
Overskriften på din artikel.
Forestil dig mange stykker tekst her ...
Hvis du derefter skrev disse CSS-stilarter:
.indhold {
-moz-søjletælling: 3;
-webkit-søjletælling: 3;
søjletælling: 3;
-moz-søjle-hul: 30 pixel;
-webkit-kolonne-hul: 30 px;
kolonnegab: 30 px;
}
Denne CSS-regel ville opdele "indhold" -delingen i 3 lige store kolonner med et mellemrum på 30 pixels mellem dem. Hvis du ville have to kolonner i stedet for 3, ville du blot ændre denne værdi, og browseren ville beregne de nye bredder af disse kolonner for at opdele indholdet jævnt. Bemærk, at vi først bruger de sælger-præfikserede egenskaber efterfulgt af de ikke-præfikserede erklæringer.
Så let som dette er, er brugen på denne måde tvivlsom til brug af websteder. Ja, du kan opdele en masse indhold i flere kolonner, men det er muligvis ikke den bedste læsning oplevelse på nettet, især hvis højden på disse kolonner falder under "folden" på skærm.
Læsere bliver derefter nødt til at rulle op og ned for at læse hele indholdet. Alligevel er rektor for CSS-kolonner så let som du ser her, og det kan bruges til at gøre så meget mere end bare at opdele indholdet af nogle afsnit - det kan faktisk bruges til layout.
Layout med CSS-kolonner
Sig, at du har en webside med et indholdsområde, der har 3 kolonner med indhold. Dette er et meget almindeligt webstedslayout, og for at opnå disse 3 kolonner flyder du normalt de divisioner, der er i. Med CSS flere kolonner er det så meget lettere.
Her er nogle eksempler på HTML:
Fra vores blog.
Indholdet ville gå her ...
Kommende arrangementer.
Indholdet ville gå her ...
CSS til at lave disse flere kolonner starter med det, du tidligere har set:
.indhold {
-moz-søjletælling: 3;
-webkit-søjletælling: 3;
søjletælling: 3;
-moz-søjle-hul: 30 pixel;
-webkit-kolonne-hul: 30 px;
kolonnegab: 30 px;
}
Nu er udfordringen her, at browseren vil opdele dette indhold jævnt, så hvis indholdet af disse divisioner er forskelligt, vil browseren faktisk opdele indholdet af en individuel division, tilføje starten på den til en kolonne og derefter fortsætte til en anden (du kan se dette ved at bruge denne kode til at køre et eksperiment og tilføje forskellige længder af indhold inde i hver division).
Det er ikke det, du vil have. Du vil have, at hver af disse divisioner opretter en særskilt kolonne, og uanset hvor stort eller lille en enkelt divisions indhold kan være, vil du aldrig have den opdelt. Du kan opnå dette ved at tilføje denne ekstra linje af CSS:
.indhold div {
display: inline-blok;
}
Dette vil tvinge de divisioner, der er inde i "indholdet", til at forblive intakte, selvom browseren deler dette i flere kolonner. Endnu bedre, da vi ikke gav noget her en fast bredde, ændres disse kolonner automatisk, når browseren ændrer størrelse, hvilket gør dem til et ideelt program til lydhøre hjemmesider. Med denne "inline-block" -stil på plads vil hver af dine 3 divisioner være en særskilt kolonne med indhold.
Brug af søjlebredde
Der er en anden egenskab udover "kolonnetælling", som du kan bruge, og afhængigt af dit layoutbehov kan det faktisk være et bedre valg for dit websted. Dette er "kolonnebredde". Ved at bruge den samme HTML-markering som vist tidligere kunne vi i stedet gøre dette med vores CSS:
.indhold {
-moz-søjlebredde: 500 px;
-webkit-kolonne-bredde: 500px;
søjlebredde: 500 px;
-moz-søjle-hul: 30 pixel;
-webkit-kolonne-hul: 30 px;
kolonnegab: 30 px;
}
.indhold div {
display: inline-blok;
}
Den måde, dette fungerer på, er at browseren bruger denne "kolonnebredde" som den maksimale værdi for denne kolonne. Så hvis browservinduet er mindre end 500 pixels bredt, vises disse 3 divisioner i en enkelt kolonne, en oven på en anden. Dette er et typisk layout, der bruges til mobile / små skærmlayouter.
Da browserbredden øges til at være stor nok til at passe til 2 kolonner sammen med de angivne kolonnehuller, går browseren automatisk fra et enkelt kolonnelayout til to kolonner. Bliv ved med at øge skærmbredden, og til sidst får du et design med 3 søjler, hvor hver af vores 3 divisioner vises i deres egen søjle. Igen er dette en fantastisk måde at blive lydhør over, multi-enhed venlig layout, og du behøver ikke engang at bruge medieforespørgsler for at ændre layoutstilarter!
Andre kolonneegenskaber
Ud over de egenskaber, der er dækket her, er der også egenskaber for "kolonne-regel", herunder farve-, stil- og breddeværdier, der giver dig mulighed for at oprette regler mellem dine kolonner. Disse ville blive brugt i stedet for grænser, hvis du vil have nogle linjer, der adskiller dine kolonner.
Tid til at eksperimentere
I øjeblikket understøttes CSS Multiple Column Layout meget godt. Med præfikser ville over 94% af webbrugere kunne se disse stilarter, og den ikke-understøttede gruppe ville virkelig bare være meget ældre versioner af Internet Explorer, som alligevel ikke understøttes længere.
Med dette supportniveau nu på plads, er der ingen grund til ikke at begynde at eksperimentere med CSS-kolonner og implementere disse stilarter på produktionsklare websteder. Du kan starte dine eksperimenter ved hjælp af HTML og CSS præsenteret i denne artikel og lege med forskellige værdier for at se, hvad der fungerer bedst til dit websteds layoutbehov.