Ábhar
- Leagan Amach
- Clearfix
- Sizing bosca
- Il-cholúin
- Ríomhaireachtaí
- Stíl
- Trédhearcacht
- Scagairí
- Athsholáthar íomhá
- Físeán sofhreagrach
- Feidhmiúlacht
- Eilimintí a roghnú go héasca
- Eagair nua a chruthú
- Glan doiciméad agus rudaí fuinneoige
- Thaitin seo leis? Léigh iad seo!
Foilsíodh an t-alt seo den chéad uair in eagrán 234 den iris .net - an iris is mó díol ar domhan do dhearthóirí gréasáin agus d’fhorbróirí.
Is bealach í teicníc, atá mar chroílár, chun tasc a dhéanamh agus, mar fhorbróirí agus dearthóirí tosaigh, tá a lán tascanna againn. É sin ráite, déanaimid dearmad go minic ar an méid a d’athraigh an tírdhreach seo. Ó 2002 go 2010 bhí ár bpobal lofa le cód agus acmhainní, ag cur bac ar fheidhmíocht agus ar inbhuanaitheacht. Chun é sin a shárú, chruthaíomar cnuasach leideanna, cleasanna agus hacks a thugamar ‘teicníc’ orthu. Bhí tascanna á gcur i gcrích againn fós, ní amháin ar an mbealach is éifeachtaí.
Ag déanamh 360, le blianta beaga anuas tá caighdeáin agus cur chun feidhme caighdeán níos fearr tagtha chun cinn, rud a chuir ar ár gcumas mar phobal ‘teicnící’ níos nuaí agus níos airde a fhorbairt. Is é an tírdhreach nua seo an rud a mheastar a bheith ina ‘ngréasán nua-aimseartha’.
De réir mar a d’éirigh ‘Web 2.0’ marbhánta agus mearbhall, beidh an ‘gréasáin nua-aimseartha’ chomh maith. Tabhair am dó. É sin ráite, go dtí seo, is féidir linn an téarma a úsáid agus a mhí-úsáid chomh fada agus a bheidh comhthuiscint ann ar a léiríonn sé.
In 2010 tháinig an tsonraíocht HTML5 i dtír, ag soláthar timpeallacht gréasáin leathchaighdeánaithe nua-aimseartha. Ghlac brabhsálaithe mar Opera, Firefox, Chrome agus Safari leis an tonn nua seo agus bhrúigh siad a bhfoirne dev chuig teorainneacha nua maidir le cur chun feidhme caighdeán agus iniúchadh API. Chun tuairim a thabhairt duit faoi cé chomh ‘ar bord’ atá na brabhsálaithe seo, féach ar amharcléirithe www.html5readiness.com maidir le tacaíocht HTML5 a athrú.
Ná bíodh imní ort faoin easpa tacaíochta in Internet Explorer. Is féidir linn é seo a chomhrac a bhuíochas le Google Chrome Frame. Ó thug Google isteach é in 2010 tá sé anois mar an meicníocht tacaíochta le haghaidh Internet Explorer. Is féidir gach leagan de IE a dhíriú ar Chrome Frame, a spreagann úsáideoir nua breiseán a íoslódáil a thugann suíomhanna Gréasáin roghnaithe le leagan éadrom de Chrome, taobh istigh de IE. Chun Chrome Frame a chur i bhfeidhm cuirimid an chlib meta> seo a leanas laistigh de chlib cheann> ár suíomh.
meta http-equiv = "X-UA-Comhoiriúnach" content = "chrome = 1" />
Ón áit seo is féidir linn úsáideoirí IE a spreagadh chun an breiseán a íoslódáil, mura bhfuil sé suiteáilte cheana féin, ag úsáid JavaScript:
script type = "text / javascript" src = "http: // ajax.
googleapis.com/ajax/libs/chrome-frame/1/CFInstall.
min.js "> / script>
script>
window.onload = feidhm () {
CFInstall.check ({
mód: "forleagan",
ceann scríbe: "http://www.yourdomain.com"
});
};
/ script>
is féidir ceann scríbe a shocrú chun an t-úsáideoir a sheoladh chuig nasc áirithe tar éis an breiseán a shuiteáil. Focal rabhaidh: cé go dtugann Chrome Frame modh dúinn chun forbairt dhian a dhéanamh ar bhrabhsálaithe atá fíor-nua-aimseartha, ní mór dúinn dearmad a dhéanamh go bhfuil an rogha ag an úsáideoir gan an breiseán a íoslódáil mura bhfuil sé ag iarraidh. Mura ndéanann siad, agus má iarrtar ort tacaíocht a sholáthar do leagan amháin nó eile de IE, beidh ort níos mó ama a chaitheamh ag fáil amach cad is féidir leat a sholáthar agus nach féidir leat a sholáthar, le do thaithí féin, tras-bhrabhsálaí.
Agus an cód seo ag soláthar páirc imeartha i bhfad níos cothroime le forbairt ar an gcruach gréasáin nua-aimseartha, is féidir linn dul ar aghaidh lenár n-intinn ar a suaimhneas. B’fhéidir gur cuimhin leat roinnt hacks a bhaineann go sonrach le brabhsálaí a chruthú le go mbeadh tras-bhrabhsálaí ceart ag do shuíomh, ag cruthú líon gan áireamh d’eilimintí folmha le húsáid le d’íomhánna slisnithe, nó fiú ag scríobh cód JavaScript atá ró-bhriathrach nó iomarcach chun an an fheidhmiúlacht is simplí le bheith ag obair. Is iad na pianta seo go léir, ar bhealach áirithe, na fadhbanna céanna a bhfuil imní orainn inniu. Táimid fós ag troid ar son níos mó smachta agus uirlisí níos fearr chun leagan amach, stíl agus feidhmiúlacht a chomhrac ach ar leibhéal atá aibí.
Leagan Amach
Clearfix
Tugadh eilimint ar snámh isteach i CSS 2.1 ach níor éirigh linn riamh a bheith ar an réiteach iomlán a raibh súil againn leis. Ceann de na fadhbanna ba mhó ba ea toisí eilimint tuismitheora a choinneáil nuair a cuireadh eilimint linbh ar snámh. Chun aghaidh a thabhairt air seo, cruthaíodh an teicníc clearfix.
Tóg an HTML seo a leanas:
div>
div> ... / div>
div> ... / div>
/ div>
Scríobh Nicolas Gallagher an teicníc seo:
.clearfix: roimhe seo,
.clearfix: i ndiaidh {
ábhar: "";
taispeáint: tábla;
}
.clearfix: i ndiaidh {
soiléir: both;
}
.clearfix {
* súmáil: 1;
}
Má úsáideann tú HTML5Boilerplate chun do thionscadail a thosú, ansin beidh an leagan seo den teicníc clearfix bácáilte agat cheana féin.
Sizing bosca
Le blianta fada phléigh forbróirí cén cur i bhfeidhm samhail bosca a rinne ciall níos mó. Is éard a bhí i gceist i mód Quirks vs Standards i ndáiríre: ‘ar cheart toisí eilimint a athrú, tar éis a bheith socraithe, nuair a chuirtear teorainneacha agus stuáil i bhfeidhm, nó nach gcuirtear’.
Aontaítear go forleathan anois go ndéanann sé ciall níos mó do theorainneacha agus stuáil imeacht ón spás atá ar fáil laistigh d’eilimint, agus gan cur le leithead nó airde na dúile. Rinneadh an díospóireacht nach mbaineann le hábhar le cur i bhfeidhm forleathan na méide bosca. Tógfaidh an brabhsálaí a leideanna uait seachas a mhalairt.
Is é Chris Coyier agus Paul Irish a bhfuil tóir air, is féidir teicníc uilechuimsitheach a chur i bhfeidhm leis an méid seo a leanas:
* {
-webkit-box-sizing: teorainn-bhosca;
-moz-box-sizing: bosca teorann;
sizing bosca: teorainn-bhosca;
}
Pléadh an roghnóir * i CSS, mar gheall ar amas feidhmíochta a d’fhéadfadh a bheith ann. Tá na cineálacha éileamh seo suaibhreosach mura bhfuil tú ag baint leasa as gach gné eile de do shuíomh Gréasáin / aip. Trí bhosca teorann a úsáid, cuirfidh an brabhsálaí stuáil agus teorainneacha leis laistigh den tacar spáis atá ar fáil. Is féidir ‘Mód Caighdeán’ a úsáid trí mhéideanna bosca a chur ar bhosca ábhair.
Il-cholúin
Bhí an gréasán spreagtha go mór ag foirm agus cineál scríofa. Ar an drochuair, chuamar i bhfostú ag céim an phár. Tá cuid de na saincheisteanna seo ag teacht chun deiridh le sonraíochtaí Réigiún Paged-Media agus CSS a bhfuil súil leo le fada. É sin ráite, glacadh na chéad chéimeanna i dtreo leagan amach níos mó cosúil le hirisí nuair a thosaigh brabhsálaithe ag cur ilcholúin CSS i bhfeidhm. Tá an cód chun an éifeacht seo a ghiniúint sách simplí:
p {
-webkit-column-count: 2;
-moz-column-count: 2;
comhaireamh colún: 2;
}
Is féidir leat níos mó a fhoghlaim faoi shonraíocht ilcholún CSS3, chomh maith le cúltaca JavaScript is féidir leat a úsáid le haghaidh brabhsálaí ar bith gan tacaíocht, ó bhlag A List Apart.
Ríomhaireachtaí
Is féidir toisí a ríomh a bheith deacair. Ar ais sna seanlaethanta, ní raibh aon bhealach againn ríomhanna aonaid de chineál ar bith a dhéanamh, gan trácht ar ríomhanna aonaid mheasctha. Tá sin uile athraithe a bhuíochas le calc. Éifeacht padded a chruthú nach ndéanann difear do leithead na n-eilimintí tosaigh nó a úsáideann rud éigin cosúil le sizing bosca: bosca teorann; ní raibh sé indéanta, go dtí le déanaí, ach trí eilimintí breise a chur leis.
.padded {
corrlach: 0 uathoibríoch;
seasamh: gaol;
leithead: -webkit-calc (100% - (20px * 2));
leithead: -moz-calc (100% - (20px * 2));
leithead: calc (100% - (20px * 2));
}
tugann calc () aire don ríomh leithead ceart bunaithe ar leithead tuismitheora .padded agus lúide stuáil shainithe 20px. Rinne mé é seo a iolrú faoi 2 do gach taobh de mo ghné, ag díriú an eilimint ag úsáid suite coibhneasta agus uathoibríoch corrlaigh chlé agus ar dheis.
Stíl
Trédhearcacht
Bhí an stíl cheart eilimint ag brath i gcónaí ar na cineálacha uirlisí a bhí ar fáil dúinn i CSS. Tá trédhearcacht ar cheann de na chéad leaganacha tacaíochta a chuirfeá isteach go luath go lár na 2000idí.
Le teacht HTML5 agus iarrachtaí ar chaighdeáin níos dírithe, tá cur i bhfeidhm caighdeánach ag brabhsálaithe ar an maoin teimhneachta, agus tá tacaíocht cainéil alfa nochtaithe acu de réir shonraíocht nua an Mhodúil Datha. Cuimsíonn sé seo treoirlínte RGBA agus HSLA.
a {
dath: rgba (0,255,0,0.5);
cúlra: rgba (0,0,255,0.05);
teorainn: rgba (255,0,0,0.5);
}
Is féidir leat dathanna RGBA nó HSLA a úsáid cibé áit a bhfaighfeá luachanna HEX. Tá liosta leathnaithe de dathanna spraoi ann freisin le hainmneacha sainithe ar féidir leat a sheiceáil amach sa tsonraíocht. Tagann siad seo go handúil nuair is mian leat cumasc dinimiciúil a chruthú idir eilimintí.
Scagairí
Tá scagairí CSS thar a bheith spreagúil. Is iontach an cumas é cuma agus mothú eilimintí ar leathanach a athrú go dinimiciúil gan gá le breiseáin tríú páirtí, agus cuideoidh sé le do chuid ama a chaitear i Photoshop a laghdú go mór.
img src = "market.webp">
img {
-webkit-scagaire: liathscála (100%);
}
Ní thacaítear le scagairí CSS ach i mbrabhsálaithe WebKit faoi láthair agus mar sin ba cheart go mbeadh a n-úsáid de chineál breiseáin, gan a bheith ag brath. Léigh níos mó anseo.
Athsholáthar íomhá
Tá sé thart ar feadh i bhfad téacs a athsholáthar le híomhánna. Ar an drochuair, tá míbhuntáistí ann fós, atá inrochtana go ciallmhar, do na teicnící athsholáthair íomhá is déanaí agus is sofaisticiúla. Ach tháinig beirt chun solais le déanaí atá thar a bheith cliste, agus uathúil ina gcearta féin. Scríobh Scott Kellman an chéad cheann:
h1 class = ‘hide-text’> Lógó Mo Láithreán Gréasáin / h1>
.hide-téacs {
téacs-fleasc: 100%;
spás bán: nowrap;
thar maoil: i bhfolach;
}
Scríobh Nicolas Gallagher an dara ceann:
.hide-téacs {
cló: 0/0 a;
scáth-théacs: aon cheann;
dath: trédhearcach;
}
Físeán sofhreagrach
Is dúshlánach é na meáin a scála i gceart i dtimpeallacht sofhreagrach. Le níos mó agus níos mó suíomhanna Gréasáin ag urramú dearadh oiriúnaitheach, tá sé riachtanach toisí eilimintí agus cóimheas gné a láimhseáil i gceart.
Bhí físeán leabaithe ar cheann de na cineálacha meán is dúshlánaí le dul i léig mar gheall ar an mbealach a fhreastalaíonn seirbhísí tríú páirtí ar an ábhar. Breathnaíonn leabú tipiciúil YouTube rud éigin mar seo:
iframe width = "640" height = "390" src = "http: // www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
Ansin tá eilimint Flash nó eilimint leabaithe san eilimint iframe. Ag baint úsáide as rud éigin mar iframe {uasfhad: 100%; ní oibreoidh} toisc nach n-athraíonn na heilimintí neadaithe i gceart nuair a athraíonn an leithead. Mar sin, ní mór dúinn roinnt fánach a dhéanamh.
div>
iframe width = "640" height = "390" src = "http://www.youtube.com/embed/oHg5SJYRHA0" frameborder = "0" allowfullscreen = ""> / iframe>
/ div>
Trí an iframe a scriosadh in eilimint eile tabharfaidh sé dúinn an smacht a theastaíonn uainn chun feidhmiúlacht fhreagrúil cheart a chur leis an bhfíseán.
.video {
seasamh: gaol;
bun stuála: 56.25%;
airde: 0;
thar maoil: i bhfolach;
}
.video iframe,
réad .video,
.video leabaithe {
seasamh: absalóideach;
barr: 0;
ar chlé: 0;
leithead: 100%;
airde: 100%;
}
Bun stuála an fhillteáin .video a shocrú: 56.25%; an draíocht ar an modh seo. Trí stuáil a úsáid, beidh an céatadán a úsáidtear bunaithe ar leithead an tuismitheora; Cruthóidh ‘56 .25% ’cóimheas gné 16: 9. Déan an mhatamaitic leat féin, más mian leat. 9/16 = 0.5625. 0.5625 * 100 = 56.25 (is é seo ár gcéad).
Feidhmiúlacht
Eilimintí a roghnú go héasca
Agus an tóir a bhí ar roinnt leabharlanna JavaScript (jQuery, mar shampla), thug caighdeáin choiste ECMAScript agus W3C dá n-aire go raibh ceann de na píosaí lárnacha d’fhorbróirí feidhmiúlacht nach raibh dúchasach dóibh - roghnú eilimintí maith. Bhí modhanna mar getElementByID () agus getElementByClassName () tapa ach ní raibh siad chomh solúbtha agus chomh láidir leis na hinnill roghnóra a tháinig ó phobal na bhforbróirí; Ba é querySelectorAll () bealach an chomhlachta caighdeáin chun cuid den tsolúbthacht sin a aithris i modh roghnóra dúchais.
var míreanna = document.querySelectorAll (’# header .item’);
is féidir querySelectorAll () a roghnú le roghnóirí iolracha agus measctha. Léigh tuilleadh faoi seo.
Eagair nua a chruthú
Is rud suaithinseach é scríobh thar eagar. Ní haon spraoi é scríobh agus athscríobh le haghaidh () lúb. I leagan 1.6 JS tháinig an modh léarscáile () i dtír ag soláthar tacaíochta do bhealach éasca le hathrá a dhéanamh agus eagar nua a chruthú ó cheann eile.
var people = [‘Heather’, ‘James’, ‘Kari’, ‘Kevin’];
fáiltíonn var = people.map (feidhm (ainm) {
filleadh ‘Hi’ + ainm + ’!’;
});
Ag rith an chóid seo, dá mbeimis chun consól.log (fáilte a chur roimh) d’fheicfeá fáilte roimh eagar nua [‘Hi Heather!’, ‘Hi James!’, ‘Hi Kari!’, ‘Hi Kevin!’ ].
Glan doiciméad agus rudaí fuinneoige
Tá seans maith ann go ndéanfaidh leabharlanna tríú páirtí JavaScript praiseach le rudaí dúchasacha doiciméad agus fuinneoige. D’fhéadfadh sé seo a bheith ina fhadhb do leabharlanna tríú páirtí eile, agus don fhorbróir lena n-áirítear iad. Mar cheachtar páirtí, déan cinnte go bhfuil tú ag obair le leagan glan den dá réad trí shampla nua a chruthú díobh. Is é an bealach is fearr chun é seo a dhéanamh ná eilimint iframe a chruthú, é a chur isteach sa DOM agus cásanna nua na n-earraí sin a stóráil.
var iframe = document.createElement (‘iframe’);
iframe.style.display = "ceann ar bith";
iframe = document.body.appendChild (iframe);
var _window = iframe.contentWindow;
var _document = iframe.contentDocument ||
iframe.contentWindow.document;
document.body.removeChild (iframe);
Cé go bhfuil feabhsuithe móra déanta ar an gcruach gréasáin, tá sé fíorthábhachtach fós leanúint lenár sraith teicneolaíochta a shlánú agus a sofaisticiúlú chun freastal ar na dúshláin atá romhainn i leagan amach, stíl agus feidhmiúlacht ár dtionscadal. Chun éiceachóras maith fáis a choinneáil ní mór dúinn comhlachtaí caighdeán agus díoltóirí brabhsálaí a spreagadh chun dul chun cinn a dhéanamh le sonraíochtaí nua agus le gnéithe nuálacha a chur i bhfeidhm agus ár n-eolas féin a roinnt le comhfhorbróirí agus dearthóirí eile. Níos mó léargas, níos lú hacks.
Is forbróir a bhuaigh duaiseanna é Darcy Clarke, comhbhunaitheoir na cuideachta téama WordPress Themify agus an comhiomlánóir déileála laethúil DealPage, agus ball den Fhoireann jQuery. Oibríonn sé ag Polar Mobile mar fhorbróir sinsearach UX.
Thaitin seo leis? Léigh iad seo!
- Conas aip a thógáil
- Íoslódáil na clónna saor in aisce is fearr
- Scuaba Photoshop saor in aisce a chaithfidh a bheith ag gach cruthaitheach
- Ranganna teagaisc le maisitheoirí: smaointe iontacha le triail inniu!
- Samplaí iontacha d’ealaín doodle
- Roghnú teagaisc iontach Wordpress
- Na clónna gréasáin saor in aisce is fearr do dhearthóirí
- Íoslódáil uigeachtaí saor in aisce: ardtaifeach agus réidh le húsáid anois
