Am flynyddoedd lawer, mae floats CSS wedi bod yn gydran gwenwyn, ond angenrheidiol, wrth greu gosodiadau gwefannau. Pe bai eich dyluniad yn galw am nifer o golofnau, fe wnaethoch chi droi at fflôt . Y broblem gyda'r dull hwn yw, er gwaethaf yr anhygoel anhygoel y mae dylunwyr / datblygwyr gwe wedi ei ddangos wrth greu gosodiadau safle cymhleth, na fyddai bysgodiau CSS mewn gwirionedd yn cael eu defnyddio fel hyn.
Er bod lleoliad fflydau a CSS yn sicr o gael lle mewn dyluniad gwe ers blynyddoedd lawer, mae technegau cynllun newydd, gan gynnwys Grid CSS a Flexbox, bellach yn rhoi ffyrdd newydd i ddylunwyr gwe greu eu gwefannau. Techneg cynllun newydd arall sy'n dangos llawer o botensial yw Colofnau Lluosog CSS.
Mae Colofnau CSS wedi bod o gwmpas ers ychydig flynyddoedd yn awr, ond mae diffyg cefnogaeth mewn porwyr hŷn (fersiynau hŷn yn bennaf o Internet Explorer) wedi cadw llawer o weithwyr proffesiynol ar y we rhag defnyddio'r arddulliau hyn yn eu gwaith cynhyrchu.
Gyda'r gefnogaeth ddiweddaraf ar gyfer y fersiynau hŷn hyn o IE, mae rhai dylunwyr gwe ar hyn o bryd yn arbrofi gydag opsiynau cynllun CSS newydd, a chynhwysir Colofnau CSS, a chanfod bod ganddynt gymaint o reolaeth fwy â'r dulliau newydd hyn nag a wnânt â fflôt.
Hanfodion Colofnau CSS
Fel y mae ei henw yn awgrymu, mae Colofnau Lluosog CSS (a elwir hefyd yn gynllun aml-golofn CSS3) yn caniatáu ichi rannu cynnwys i nifer set o golofnau. Yr eiddo CSS mwyaf sylfaenol y byddech chi'n eu defnyddio yw:
- colofn-gyfrif
- bwlch golofn
Ar gyfer cyfrif colofn, nodwch nifer y colofnau yr ydych eu hangen. Y bwlch golofn fyddai'r cwteri neu'r gofod rhwng y colofnau hynny. Bydd y porwr yn cymryd y gwerthoedd hyn ac yn rhannu'r cynnwys yn gyfartal i nifer y colofnau rydych chi'n eu nodi.
Enghraifft gyffredin o linellau lluosog CSS yn ymarferol fyddai rhannu bloc o gynnwys testun i mewn i golofnau lluosog, yn debyg i'r hyn y byddech chi'n ei weld mewn erthygl papur newydd. Dywedwch fod gennych y marc HTML canlynol (nodwch, er enghraifft, mai dim ond dechrau un paragraff ydw i, ond yn ymarferol byddai'n debygol y bydd paragraffau lluosog o gynnwys yn y marc hwn):
Pennawd eich erthygl
Dychmygwch lawer o baragraffau o destun yma ...
Os ydych chi wedyn wedi ysgrifennu'r arddulliau CSS hyn:
.content {-moz-column-count: 3; -webkit-column-count: 3; colofn-gyfrif: 3; -moz-column-gap: 30px; -wisg-golofn-bwlch: 30px; bwlch golofn: 30px; }Byddai'r rheol CSS hon yn rhannu'r adran "cynnwys" yn 3 colofn cyfartal gyda bwlch o 30 picsel rhyngddynt. Os ydych chi eisiau dau golofn yn hytrach na 3, byddech yn syml yn newid y gwerth hwnnw a byddai'r porwr yn cyfrifo lled newydd y colofnau hynny i rannu'r cynnwys yn gyfartal. Rhowch wybod ein bod yn defnyddio'r eiddo gwerthfawrogi yn gyntaf, ac yna'r datganiadau nad ydynt wedi'u rhagnodi.
Yn rhwydd â hyn, mae ei ddefnydd yn y modd hwn yn amheus ar gyfer defnydd y wefan. Ydw, gallwch rannu criw o gynnwys i mewn i lawer o golofnau, ond efallai nad dyma'r profiad darllen gorau ar gyfer y We, yn enwedig os yw uchder y colofnau hyn yn disgyn o dan "blygu" y sgrin.
Yna byddai'n rhaid i ddarllenwyr sgrolio i fyny ac i lawr er mwyn darllen y cynnwys llawn. Yn dal i fod, mae pennaeth Colofnau CSS mor hawdd ag y gwelwch yma, a gellir ei ddefnyddio i wneud cymaint yn fwy na rhannu'r cynnwys rhai paragraffau - gellir ei ddefnyddio, yn wir, ar gyfer y cynllun.
Layout With CSS Columns
Dywedwch fod gennych dudalen we gyda maes cynnwys sydd â 3 colofn o gynnwys. Mae hwn yn gynllun gwefan nodweddiadol iawn, ac i gyflawni'r 3 cholofn hynny, byddech fel arfer yn arnofio'r rhanbarthau sydd ynddynt. Gyda cholofnau lluosog CSS, mae'n llawer haws.
Dyma rai sampl HTML:
Newyddion Diweddaraf
Byddai'r cynnwys yn mynd yma ...
From Our Blog
Byddai'r cynnwys yn mynd yma ...
Digwyddiadau i ddod
Byddai'r cynnwys yn mynd yma ...
Mae'r CSS i wneud y colofnau lluosog hyn yn dechrau gyda'r hyn a welwch yn flaenorol:
.content {-moz-column-count: 3; -webkit-column-count: 3; colofn-gyfrif: 3; -moz-column-gap: 30px; -wisg-golofn-bwlch: 30px; bwlch golofn: 30px; }Nawr, yr her yma yw, gan fod y porwr eisiau rhannu'r cynnwys hwn yn gyfartal, felly os yw hyd cynnwys yr adrannau hyn yn wahanol, bydd y porwr hwnnw mewn gwirionedd yn rhannu cynnwys adran unigol, gan ychwanegu'r cychwyn i un golofn ac yna parhewch i mewn i un arall (gallwch chi weld hyn trwy ddefnyddio'r cod hwn i redeg arbrawf ac ychwanegu gwahanol ddarnau o gynnwys y tu mewn i bob adran)!
Nid dyna'r hyn yr hoffech chi. Rydych chi eisiau i bob un o'r adrannau hyn greu colofn arbennig ac, ni waeth pa mor fawr neu fach yw cynnwys adran unigol, ni fyddwch byth yn dymuno ei rannu. Gallwch chi gyflawni hyn trwy ychwanegu'r un llinell ychwanegol hon o CSS:
.ontent div {display: inline-block; }Bydd hyn yn gorfodi'r rhanbarthau hynny sydd y tu mewn i'r "cynnwys" i aros yn gyfan gwbl hyd yn oed wrth i'r porwr rannu hyn i nifer o golofnau. Hyd yn oed yn well, gan na wnaethom roi lled sefydlog i unrhyw beth yma, bydd y colofnau hyn yn newid yn awtomatig wrth i'r porwr ei haddasu, gan eu gwneud yn gais delfrydol ar gyfer gwefannau ymatebol . Gyda'r arddull "mewn-bloc" yn ei le, bydd pob un o'ch 3 rhanbarth yn golofn benodol o gynnwys.
Defnyddio Colofn-Lled
Mae yna eiddo arall heblaw "cyfrif-golofn" y gallwch ei ddefnyddio, ac yn dibynnu ar anghenion eich cynllun, efallai y bydd yn well dewis ar gyfer eich safle mewn gwirionedd. Mae hyn yn "lled colofn". Gan ddefnyddio'r un marc HTML fel y dangoswyd yn flaenorol, gallem yn hytrach wneud hyn gyda'n CSS:
.content {-moz-column-width: 500px; -webkit-column-width: 500px; colofn-lled: 500px; -moz-column-gap: 30px; -wisg-golofn-bwlch: 30px; bwlch golofn: 30px; } .ontent div {display: inline-block; }Y ffordd y mae hyn yn gweithio yw bod y porwr yn defnyddio'r "lliw colofn" hwn fel gwerth uchaf y golofn honno. Felly, os yw ffenestr y porwr yn llai na 500 picsel o led, byddai'r 3 rhanbarth hyn yn ymddangos mewn un golofn, un o bennau'r llall. Mae hwn yn gynllun nodweddiadol a ddefnyddir ar gyfer gosodiadau sgriniau symudol / bach.
Gan fod lled y porwr yn cynyddu'n ddigon mawr i ffitio 2 golofn ynghyd â'r bylchau colofn penodedig, bydd y porwr yn mynd yn awtomatig o un set colofn i ddwy golofn. Cadwch gynyddu lled y sgrin ac yn y pen draw, cewch gynllun 3 colofn, gyda phob un o'n 3 rhanbarth yn cael eu harddangos yn eu golofn eu hunain. Unwaith eto, mae hon yn ffordd wych o gael rhai cynlluniau cyfeillgar ymatebol, aml-ddyfais , ac nid oes angen i chi hyd yn oed ddefnyddio ymholiadau cyfryngau i newid arddulliau'r cynllun!
Eiddo Colofn Eraill
Yn ogystal â'r eiddo a gwmpesir yma, mae yna hefyd eiddo ar gyfer "rheol-golofn", gan gynnwys gwerthoedd lliw, arddull a lled sy'n eich galluogi i greu rheolau rhwng eich colofnau. Byddai'r rhain yn cael eu defnyddio yn hytrach na ffiniau os ydych am gael rhai llinellau yn gwahanu'ch colofnau.
Amser i Brofi
Ar hyn o bryd, cefnogir Cynllun Colofn Lluosog CSS yn dda iawn. Gyda rhagddodiaid, byddai dros 94% o ddefnyddwyr y we yn gallu gweld yr arddulliau hyn, ac mai dim ond fersiynau llawer hynaf o Internet Explorer fyddai'r grŵp heb gefnogaeth, ac efallai na fyddwch yn cefnogi anymore beth bynnag.
Gyda'r lefel hon o gymorth nawr yn ei le, nid oes rheswm i beidio â dechrau arbrofi gyda Cholofnau CSS a defnyddio'r arddulliau hyn mewn gwefannau parod cynhyrchu. Gallwch ddechrau eich arbrofion gan ddefnyddio'r HTML a CSS a gyflwynir yn yr erthygl hon a chwarae o gwmpas gyda gwahanol werthoedd i weld beth fyddai'n gweithio orau ar gyfer anghenion eich safle.