Hvernig á að nota CSS3 dálka

Með vaxandi fjölbreytileika í skjástærð er ekki hagnýtt að hanna einn textabrot sem tekur upp alla breidd skjásins. Hin hefðbundna lausn er að skipta texta í dálka með höndunum, sem er mjög tímabundið; eða til að skipta um texta með JavaScript, sem virkar ekki almennt. Að auki, þetta er kynningarefni, við ættum að geta stíll það með CSS án þess að nota netkerfi eða fljóta ætti það ekki?

CSS3 gerir þér kleift að stilla texta þína í ýmsa dálka, það gefur jafnvel hæfileika til að setja Göturæsi - bilið á milli þessara dálka - þannig að þú hefur fulla stjórn í stað ramma eða ristakerfisins sem stillir þessi bil fyrir þig .

Best af öllu, CSS3 niðurbrot tignarlega, svo ef einhver er að vafra í Netscape Navigator, síðuna þína mun ekki brjóta.

Stuðningur við vafra

Það er mikilvægt að hafa í huga að meðan allir núverandi vafrar styðja marga dálka í CSS3 - já jafnvel IE10 - mörg nýleg útgáfa - IE9 til dæmis - ekki. Jafnvel þótt stuðningur sé góður, þá viltu láta vafraforskeyti fyrir webkit (-webkit-) og mozilla (-moz-) innihalda. Það er engin þörf á að innihalda -ms- eða -ó fyrir IE og Opera, þar sem þeir styðja annað hvort hlutann að fullu eða alls ekki.

Eiginleikar

Þessi CSS eiginleiki gefur þér reyndar handfylli eiginleika til að gefa þér fulla stjórn á því hvernig innihaldið þitt er prentað í vafranum og þessi eiginleikar eru:

• dálkur: Hér er tilgreint fjölda dálka sem þú vilt sækja um þáttinn.
• Dálkur-breidd: Breidd eins dálks. Vertu meðvituð um að þetta gildi mun líklega breyst af vafranum.
• dálkur: bilið milli bilanna milli dálka.
• Dálkur-regla-breidd: Regla hluti er góður af landamærum fyrir dálka þína og hér tilgreinir þú breidd þessarar landamæris.
• Dálkur-regla-stíl: Einnig eins og landamærin, ef þú þarft að tilgreina stíl.
• dálkur-regla-litur: hér litur reglunnar.
• dálkur: gildið hérna mun segja vafranum hversu margar dálkar þú vilt fá í lið, þetta er gott fyrir fyrirsagnir og virkar eins og colspan og rowspan í töflum.

Með öllum þessum eiginleikum held ég ekki að við þurfum í raun neitt annað til að hafa fulla stjórn á dálkunum okkar. Auðvitað eru ekki allar þessar eignir nauðsynlegir fyrir multi-dálka skipulag til að vinna, reyndar er aðeins súlufjöldinn nauðsynlegur en þú ættir alltaf að nota dálkaplann til að gefa textanum smá herbergi og ekki hafa alla dálkana á efst á annarri.

Til að setja þetta í framkvæmd tekur það aðeins tvær línur af kóða:

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

Ef þú vilt einnig að nota reglu við dálkana þarftu bara að bæta við auka eiginleikum:

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

Eins og algengari landamæri geturðu einnig staflað lit, stíl og breidd á sömu línu, eins og svo:

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

Ef þú ert með fyrirsögn og þú vilt að þessi fyrirsögn nái yfir alla dálkana skaltu bara bæta við einum línu:

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

Demo

Þú getur sótt þetta um nánast hvaða HTML sem er, frá einum málsgrein til margra