Sådan bruges CSS3-kolonner

Med stigende mangfoldighed i monitorstørrelser er det ikke praktisk at designe enkeltblokke af tekst, der optager hele bredden af ​​skærmen. Den traditionelle løsning er at dele tekst i kolonner manuelt, hvilket er meget tidskrævende; eller at splitte tekst dynamisk med JavaScript, som ikke fungerer universelt. Desuden er dette et præsentationsproblem, vi burde kunne style det med CSS uden brug af gittersystemer eller floats skal vi ikke?

CSS3 giver faktisk mulighed for at indstille din tekst i forskellige kolonner, det giver endda evnen til at sætte en rende - rummet mellem disse kolonner - på denne måde har du fuld kontrol i stedet for rammen eller gittersystemet, der angiver disse huller for dig .

Bedst af alt, nedbryder CSS3 yndefuldt, så hvis nogen surfer i Netscape Navigator, vil dit websted ikke bryde.

Browser Support

Det er vigtigt at bemærke, at mens alle nuværende browsere understøtter multikolonner i CSS3 - ja endda IE10 - mange nyere versioner - f.eks. IE9 - ikke. Selvom support er god, vil du gerne have browser præfiks for webkit (-webkit-) og mozilla (-moz-). Der er ikke behov for at inkludere -ms- eller -o- for IE og Opera, da de enten støtter funktionen i sin helhed eller slet ikke.

Egenskaberne

Denne CSS-funktion giver dig faktisk en håndfuld egenskaber for at give dig fuld kontrol over, hvordan dit indhold bliver udskrevet i browseren, og disse egenskaber er:

• kolonneantal: Her angiver du antallet af kolonner, du vil anvende til elementet.
• kolonnebredde: bredden af ​​en enkelt kolonne. Vær opmærksom på, at denne værdi sandsynligvis vil blive ændret af browseren.
• kolonne-gap: bredden af ​​spalten mellem kolonnerne.
• kolonne-regel-bredde: Regeldelen er en slags ramme for dine kolonner, og her angiver du bredden af ​​den pågældende grænse.
• kolonne-regel-stil: Ligesom grænsen, hvis du skal angive stilen.
• kolonne-regel-farve: her er farven på reglen.
• kolonne-spænding: Værdien her vil fortælle browseren, hvor mange kolonner du vil have et element at spænde over, dette er godt for overskrifter og fungerer som colspan og rowspan i tabeller.

Med alle disse egenskaber tror jeg ikke, at vi faktisk har brug for noget andet for at have fuld kontrol over vores kolonner. Selvfølgelig er ikke alle disse egenskaber nødvendige for at multi-kolonne layoutet fungerer, faktisk er kun kolonneantalet nødvendigt, men du bør altid også bruge kolonnehullet for at give teksten et lille rum og ikke have alle kolonnerne på øverst på hinanden.

For at sætte dette i praksis tager det kun to linjer kode:

/* This will produce a 3 column layout with a gap of 20px between each column */.cols3 {column-count: 3;column-gap: 20px;}

Hvis du også ønsker at anvende en regel til kolonnerne, skal du blot tilføje de ekstra egenskaber:

/* This will produce a 3 column layout and a gap of 20px between each column and a rule of 1px solid black */.cols3 {column-count: 3;column-gap: 20px;column-rule-width: 1px;column-rule-style: solid;column-rule-color: #000;}

Ligesom den mere almindelige grænseegenskab kan du også stable farve, stil og bredde i samme linje som sådan:

.cols3 {column-count: 3;column-gap: 20px;column-rule: 1px solid #000;}

Hvis du har en overskrift, og du vil have, at overskriften skal spænde over alle kolonnerne, skal du bare tilføje en linje:

/*This h1 will take up the space of the 3 columns*/.cols3 h1{column-span: all;}

Demo

Du kan anvende dette på stort set enhver HTML, fra et enkelt afsnit til flere