Le blianta fada, bhí snámháin CSS mar chomhábhar géar, ach riachtanach, maidir le leagan amach láithreán gréasáin a chruthú. Má d'iarr do dhearadh do cholúin éagsúla, d'iompaigh tú chuig snámhphointe . Is í an fhadhb leis an modh seo ná, in ainneoin an ionchreidte dochreidte gur léirigh dearthóirí / forbróirí gréasáin le leagan amach casta láithreáin a chruthú, níor cheart go mbeadh i gcónaí úsáid as snámháin CSS mar seo.
Cé go bhfuil áitiú flótaí agus CSS cinnte go bhfuil áit i ndearadh gréasáin le blianta fada le teacht, tá teicnící leagan amach níos nuaí, lena n-áirítear Greille CSS agus Flexbox anois ag tabhairt bealaí nua dearthóirí gréasáin chun a leagan amach láithreáin a chruthú. Is é atá i gceist le teicníc nua leagan amach a léiríonn go leor féideartha ná Colúin Il-CSS.
Tá Colúin CSS ar siúl le cúpla bliain anois, ach tá easpa tacaíochta i mbrabhsálaithe níos sine (go príomha le leaganacha níos sine de Internet Explorer) coinnigh go leor gairmithe gréasáin ó na stíleanna seo a úsáid ina gcuid oibre táirgthe.
Le deireadh na tacaíochta do na leaganacha níos sine sin d'IE, tá roinnt dearthóirí gréasáin ag tástáil anois le roghanna nua leagan amach CSS, tá Colúin CSS san áireamh, agus a aimsiú go bhfuil an oiread sin smachta acu leis na cur chuige nua seo ná mar a rinne siad le snámhphointe.
Bunghnéithe na gColúin CSS
Mar a thugann a ainm le fios, is féidir le Colúin Il-CSS (ar a dtugtar leagan amach ilcholún CSS3) leat ábhar a roinnt i líon socraithe de na colúin. Is iad na hairíonna CSS is bunúsaí a d'úsáidfí ná:
- colún-chomhaireamh
- colún-bhearna
Le haghaidh cuntais cholún, sonraigh tú líon na gcolún atá uait. Ba é an bearna colún ná na gutters nó an spásáil idir na colúin sin. Glacfaidh an brabhsálaí na luachanna seo agus scoiltfidh sé an t-ábhar go cothrom leis an líon colúin a shonraíonn tú.
Sampla coiteann de na colúin ilbhliantúla CSS a bheadh i gcleachtas ná bloc ábhar téacs a roinnt i gcolúin éagsúla, cosúil leis an méid a fheiceann tú in earra nuachtáin. Abair go bhfuil an marc HTML seo a leanas agat (tabhair faoi deara go bhfuil críocha mar shampla, níl mé ag tosú ach mír amháin, agus is dócha go mbeadh go leor míreanna san ábhar seo sa mharcáil seo):
Ceannteideal d'alt
Samhlaigh go leor míreanna téacs anseo ...
Má scríobh tú ansin na stíleanna CSS seo:
.tentent {-moz-column-count: 3; -webkit-column-count: 3; colún-chomhaireamh: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; colún-bhearna: 30px; }Roinnnódh an riail CSS seo an roinn "ábhar" ina 3 colún comhionann le bearna de 30 picteilín eatarthu. Má theastaigh uait dhá cholún in ionad 3, bheadh tú ag athrú go díreach an luach sin agus ríomhfadh an brabhsálaí leithead nua na gcolún sin chun an t-ábhar a roinnt go cothrom. Fógra go ndéanaimid úsáid as na hairíonna díoltóir-réitithe den chéad uair, agus na dearbhuithe neamh-réitithe ina dhiaidh sin.
Chomh héasca agus is é sin, tá sé inmhuirearaithe maidir le húsáid ar an láithreán gréasáin é. Sea, is féidir leat roinnt ábhar a roinnt i gcolúin éagsúla, ach b'fhéidir gurb é seo an t-eispéireas léitheoireachta is fearr don Idirlíon, go háirithe má thagann airde na gcolún seo faoi "huaire" an scáileáin.
Ansin bheadh ar léitheoirí scrollnú suas agus síos chun an t-ábhar iomlán a léamh. Mar sin féin, tá príomhoide na gColáistí CSS chomh furasta agus a fheiceann tú anseo, agus is féidir é a úsáid chun an oiread sin a dhéanamh seachas ábhar roinnt míreanna a roinnt - is féidir é a úsáid, dáiríre, don leagan amach.
Leagan Amach Le Colúin CSS
Abair go bhfuil leathanach gréasáin agat le réimse ábhar a bhfuil 3 gcolún de ábhar ann. Is leagan amach an-tipiciúil é seo an láithreán gréasáin, agus chun na 3 cholún sin a bhaint amach, d'fhéadfá na rannáin atá i gceist a shnámh de ghnáth. Le ilpholúin CSS, tá sé i bhfad níos éasca.
Seo roinnt sampla HTML:
Nuacht is Déanaí
Bheadh ábhar anseo ...
Ón mBlag Ár
Bheadh ábhar anseo ...
Imeachtaí atá le Teacht
Bheadh ábhar anseo ...
Tosaíonn CSS chun na colúin éagsúla seo a dhéanamh leis an méid a chonaic tú roimhe seo:
.tentent {-moz-column-count: 3; -webkit-column-count: 3; colún-chomhaireamh: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; colún-bhearna: 30px; }Is é an dúshlán anseo anois, ós rud é gur mian leis an bhrabhsálaí an t-ábhar seo a roinnt go cothrom, mar sin má tá fad ábhar na rannán seo difriúil, déanfaidh an bhrabhsálaí seo roinnt rannóg aonair a roinnt, agus cuirfear tús leis an gcolún amháin agus leanúint ar aghaidh go ceann eile (is féidir leat é seo a fheiceáil tríd an gcód seo a úsáid chun turgnamh a reáchtáil agus faid éagsúla den ábhar a chur taobh istigh de gach roinn)!
Ní hé sin an rud is mian leat. Ba mhaith leat gach ceann de na rannáin seo colún ar leith a chruthú agus, is cuma cé chomh mór nó is beag is féidir le cion roinne aonair, ní scoiltfidh tú riamh é. Is féidir leat é seo a bhaint amach tríd an líne seo amháin CSS breise a chur leis:
.ontent div {display: inline-block; }Cuirfidh sé seo i bhfeidhm na ranna sin atá taobh istigh den "ábhar" a bheith slán fiú mar a scaipeann an brabhsálaí seo i gcolúin éagsúla. Níos fearr fós, ós rud é nach bhfuair muid aon leithead seasta anseo, déanfaidh na colúin seo athrú go huathoibríoch mar a athraíonn an bhrabhsálaí, rud a fhágann go mbeidh siad ina n-iarratas idéalach ar láithreáin ghréasáin atá freagrúil . Leis an stíl "inline-block" sin, beidh gach ceann de do 3 roinn ina gcolún ar leith den ábhar.
Úsáid Colún-Leithead
Tá maoin eile seachas "colún-chomhaireamh" gur féidir leat é a úsáid, agus ag brath ar do riachtanais leagan amach, d'fhéadfadh sé gur rogha níos fearr é i ndáiríre do do shuíomh. Seo "colún-leithead". Ag baint úsáide as an marc céanna HTML mar a thaispeántar roimhe seo, d'fhéadfaimis é seo a dhéanamh lenár CSS:
.tentent {-moz-column-width: 500px; -webkit-colún-leithead: 500px; colún-leithead: 500px; -moz-column-gap: 30px; -webkit-column-gap: 30px; colún-bhearna: 30px; } .ontent div {display: inline-block; }Is é an bealach a oibríonn sé seo go n-úsáideann an brabhsálaí an "leithead colún" seo mar luach uasta an cholúin sin. Mar sin, má tá an fhuinneog brabhsálaí níos lú ná 500 picteilín ar leithead, feicfeadh na 3 rannáin seo i gcolún amháin, ceann de bharr an duine eile. Is leagan amach tipiciúil é seo a úsáidtear le haghaidh leagan amach soghluaiste / scáileáin bheaga.
De réir mar a mhéadaíonn leithead an bhrabhsálaí a bheith mór go leor chun 2 cholún a chomhtháthú chomh maith leis na bearnaí colún sonraithe, téann an brabhsálaí go huathoibríoch ó leagan amach colún amháin le dhá cholún. Coinnigh méadú ar leithead an scáileáin agus ar deireadh thiar, gheobhaidh tú dearadh 3 colún, le gach ceann de na 3 ranna ar taispeáint ina gcolún féin. Arís, is bealach iontach é seo roinnt leagan amach cairdiúil , soghluaiste atá ilghnéitheach a fháil, agus ní gá duit fiú fiosrúcháin sna meáin a úsáid chun na stíleanna leagan amach a athrú!
Airíonna Colún Eile
Chomh maith leis na maoine atá clúdaithe anseo, tá airíonna ann freisin le haghaidh "riail colún", lena n-áirítear luachanna dath, stíl agus leithead a ligeann duit rialacha a chruthú idir do cholúin. Úsáidfear iad sin in ionad na dteorainneacha más mian leat go mbeadh roinnt línte ag scaradh do cholúin.
Am chun Turgnamh
Faoi láthair tá tacaíocht an-mhaith ag Leagan Amach na Colún CSS. Le réimírí, bheadh níos mó ná 94% d'úsáideoirí gréasáin in ann na stíleanna seo a fheiceáil, agus ní bheadh leaganacha i bhfad níos sine de Internet Explorer i gceist leis an ngrúpa gan tacaíocht a d'fhéadfá a bheith ag tacú níos mó ar aon nós.
Leis an leibhéal tacaíochta seo anois i bhfeidhm, níl aon chúis gan tosú ag triail a dhéanamh le Colúin CSS agus na stíleanna sin a úsáid i suíomhanna gréasáin réidh a tháirgeadh. Is féidir leat do chuid turgnaimh a thosú ag baint úsáide as an HTML agus CSS a chuirtear i láthair san Airteagal seo agus go n-imríonn siad timpeall le luachanna difriúla le feiceáil ar cad a bheadh ag obair is fearr do riachtanais leagan amach do shuíomh.