Slik bruker du CSS3-kolonner

Med økende mangfold i skjermstørrelser er det ikke praktisk å designe enkeltblokker med tekst som tar opp hele bredden på skjermen. Den tradisjonelle løsningen er å splitte tekst i kolonner manuelt, noe som er veldig tidskrevende; eller å splitte tekst dynamisk med JavaScript, som ikke fungerer universelt. Dessuten er dette et presentasjonsproblem, vi burde kunne stile det med CSS uten bruk av rutenett eller flyter bør ikke vi?

CSS3 gir deg faktisk en måte å style teksten din inn i ulike kolonner, det gir deg også muligheten til å sette en rigg - mellomrommet mellom disse kolonnene - på denne måten har du full kontroll i stedet for rammen eller rutenettet som setter disse hullene for deg .

Best av alt, nedbryter CSS3 grasiøst, så hvis noen surfer i Netscape Navigator, vil nettstedet ditt ikke bryte.

Nettleserstøtte

Det er viktig å merke seg at mens alle nåværende nettlesere støtter flere kolonner i CSS3 - ja selv IE10 - mange nyere versjoner - for eksempel IE9 - gjør det ikke. Selv om støtten er god, vil du inkludere nettleserprefikser for webkit (-webkit-) og mozilla (-moz-). Det er ikke nødvendig å inkludere -ms- eller -o- for IE og Opera, da de enten støtter funksjonen i sin helhet, eller slet ikke.

Egenskapene

Denne CSS-funksjonen gir deg faktisk en håndfull egenskaper for å gi deg full kontroll over hvordan innholdet ditt blir skrevet ut i nettleseren, og disse egenskapene er:

• kolonneantal: her angir du antall kolonner du vil søke på elementet.
• kolonnebredde: bredden på en enkelt kolonne. Vær oppmerksom på at denne verdien sannsynligvis vil bli endret av nettleseren.
• kolonneavstand: bredden på gapet mellom kolonnene.
• kolonne-regelbredde: Regeldelen er en grense for kolonnene dine, og her angir du bredden på den grensen.
• kolonne-regel-stil: også som grensen, hvis du trenger å spesifisere stilen.
• kolonne-regel-farge: her fargen på regelen.
• kolonneoversikt: verdien her inne vil fortelle nettleseren hvor mange kolonner du vil ha et element å spanne, dette er bra for overskrifter og fungerer som colspan og rowspan i tabeller.

Med alle disse egenskapene tror jeg ikke at vi faktisk trenger noe annet for å ha full kontroll over våre kolonner. Selvfølgelig er ikke alle disse egenskapene nødvendige for at multikolonneoppsettet skal fungere. Det er faktisk bare kolonnestellingen som er nødvendig, men du bør også alltid bruke kolonnekaret for å gi teksten et lite rom og ikke ha alle kolonnene på toppen av hverandre.

For å få dette til bruk, tar det bare to kodelinjer:

/* 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 å bruke en regel til kolonnene, trenger du bare å legge til de ekstra egenskapene:

/* 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;}

Som den mer vanlige grenseegenskapen kan du også stable farge, stil og bredde i samme linje, slik som:

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

Hvis du har en overskrift og du vil at overskriften skal strekke seg over alle kolonnene, må du bare legge til en linje:

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

Demo

Du kan bruke dette til nesten hvilken som helst HTML, fra et enkelt avsnitt til flere