CSS3 Best Practices fyrir Hönnuðir
Ef þú ert fyrst og fremst hönnuður og hefur nýlega byrjað að læra CSS, hefur þú sennilega byrjað að fella inn nokkrar af nýju CSS eiginleikunum sem hafa verið bætt við tungumálið í CSS3 .
En ef þú hefur ekki mikla reynslu af CSS, þá reynir þú sennilega að finna út hvað er besta leiðin til að takast á við nokkrar af þeim áskorunum sem stafar af því að nota margar seljandaforskeyti, takast á við eldri útgáfur af Internet Explorer, og aðrar CSS3-sérstakar þættir.
Í þessari grein mun ég reyna að ná sumum mikilvægum hlutum sem þarf að muna þegar ég fjalla um þessi mál. Hafðu í huga að ekkert er sett í stein en þetta ætti bara að vera viðmiðunarreglur til að hjálpa þér að skrifa skilvirkari, auðveldara að viðhalda og framtíðarsvörunarkóða.
Vita stuðnings töflurnar þínar
Þú munt líklega ekki þurfa að leggja á minnið hvaða aðgerðir virka í hvaða vafra. Í flestum tilvikum virkar ekki CSS3 eiginleikar í öllum vafra sem notaðar eru til notkunar. Og í sumum tilvikum hafa jafnvel nýjustu útgáfur af vöfrum ekki fulla stuðning.
Svo það fyrsta sem þú ættir að gera er að skilja hvar stuðningur vantar. Aðal auðlindurinn sem þú ættir að nota er Hvenær get ég notað ... síða, sem inniheldur töflur fyrir CSS3, HTML5 og tonn meira. Þú getur jafnvel gert hlið við hliðar samanburð við mismunandi vafra, eins og sýnt er á skjámyndinni hér að neðan bera saman CSS3 stuðning í Firefox 3.6 vs IE9 :
Þó hvenær get ég notað ... er líklega eina stuðningsskráin sem þú þarft, hér eru nokkrar aðrar valkostir til að íhuga:
- CSS3 Smella Mynd
- CSS innihald og vafra eindrægni
- CSS samhæfni og Internet Explorer
- Samanburður á skipulagsmótum (CSS)
En veit að þótt CSS-eiginleiki gæti verið skráð einhvers staðar sem "studd" þá þýðir það ekki að það sé án galla eða ósamræmi. Svo prófaðu vandlega.
Ekki má nota ofnæmi fyrir fjöllyfjum
Vegna þrýstings viðskiptavina eða stofnunar eða bara sú staðreynd að þú viljir allt líta út og virka á sama hátt alls staðar, gætir þú freistast til að nota marga CSS Polyfills .
En margir af þessum skriftum geta hægkt á síðum þínum verulega - sérstaklega ef þú notar fleiri en einn. Það eru margar rannsóknir og heimildir sem sýna mikilvægi hraða vefsíðunnar, þannig að einhverjir fíkniefnaneysla ætti að íhuga vandlega og með síðuna þína eða heildar hagsmuni appins í huga.
Til að hjálpa þér að ákveða hvað á að nota með fósturláti og hvað á að leyfa þér að draga úr minni reynslu skaltu nota HTML5 Vinsamlegast staður. Eins og sýnt er í dæmi skjámyndinni hér að neðan, HTML5 Vinsamlegast mælið oft með því að forðast að nota pyfýill fyrir ákveðnar aðgerðir:
Prófaðu hvernig aðgerðir draga úr
Ef þú ert að forðast mikið af pólýprópýli þá þarftu að sjálfsögðu að leyfa mörgum CSS3 aðferðum til að draga úr meiri frumstæðu reynslu í eldri vöfrum (venjulega IE6-8). En ekki gera ráð fyrir að þetta muni gerast sjálfkrafa.
Í mörgum tilfellum (til dæmis þegar þú notar margar bakgrunnar) þarftu að lýsa yfir eign sem fær yfirskrifuð af CSS3 eiginleikanum, en það mun ennþá birtast í eldri vafra.
Til dæmis gætirðu gert þetta fyrir margar bakgrundir:
.element {background: url(images/fallback.jpg) no-repeat;background: url(images/example.png) center center no-repeat,url(images/example-2.png) top left repeat;}Takið eftir einu bakgrunni sem lýst er fyrir margar línur bakgrunnsmyndarinnar. Non-stuðningur vöfrum mun sýna eina myndina en mun hunsa 2. línuna. Stuðningur við vafra mun lesa báðar línur en fyrsta línan verður skrifin af öðrum.
Nokkrar aðrar CSS3 aðgerðir sem gætu notið góðs af þessari tegund af fallback eru RGBA litir, HSLA litir og stig.
Til að hjálpa þér að sjá hvernig CSS3 lögun niðurbrot í eldri vöfrum geturðu notað bókamerkið sem heitir deCSS3 .
Það virkar aðeins í Chrome og Safari, en slepptu bara tengilinn á bókamerkjalínuna þína og smelltu síðan á tengilinn á hvaða vefsvæði sem þú vilt 'de-CSS3' og það mun sýna þér síðuna með textaskuggum, hringlaga hornum og öðrum nýtt efni fjarlægt. Auðvitað er þetta ekki í staðinn fyrir raunverulegan vafraprófun, en getur verið gagnlegur leiðarvísir fyrir hraðari þróun áður en þú gerir lokapróf til loka verkefnisins.
Annað tól til að hjálpa við að takast á við fallbacks er Modernizr JavaScript bókasafn. En ef þú ert hræddur við bókasöfn, ekki vera. Modernizr er ekki erfitt að takast á við frá CSS sjónarhorni. Athuga þetta einkatími fyrir sársaukalausa kynningu.
Takast á við seljandaforskeyti
Einn af sóðalegum hlutum CSS3 er að þurfa að takast á við allar mismunandi seljandaforskeyti. Viðhalda kóðanum sem notar öll forskeyti er leiðinlegur og í sumum tilfellum þarftu ekki alla þá. Hver getur hugsanlega muna hvenær á að innihalda "-o-" eða "-ms-" og hvenær ekki?
Jæja, eins og nefnt er að nota stuðningsskýringarnar munu hjálpa. En hér eru nokkrar aðrar tillögur til að hjálpa að takast á við seljandaforskeyti.
Notaðu CSS preprocessor
Preprocessors eru öll reiði núna. En CSS byrjendur og hönnuðir sem eru ekki erfiðir verktaki eða forritarar geta átt erfitt með að takast á við þessar nýju verkfærin.
Svo þrátt fyrir að preprocessors eru vissulega ekki fyrir alla, þá eru þeir örugglega þess virði að íhuga, vegna þess að þeir geta alvarlega bætt framleiðslu og viðhaldstíma þína.
Víðtæk umfjöllun um forvinnsluaðila er vissulega utan þessa grein, en hér eru nokkrar tenglar til að byrja með:
Og ef þú finnur þessi efni of þung, hefur Chris Coyier af CSS-Bragðarefur einhverjum hugsanir á preprocessors Það gæti hjálpað þér að fá heildarsýn. Og hér er færsla á Nettuts + sem nær yfir nokkra eiginleika og ávinning af því að nota nokkrar af vinsælustu CSS preprocessors.
Vertu í samræmi við númerið þitt
Ef þú velur að fyrirframgreina ekki CSS þinn með því að nota eina af ofangreindum tækni, þá verður þú að takast á við að viðhalda öllum fyrirsögnum seljanda. Svo vertu viss um að velja stíl og pöntun fyrir seljandaforskeyti og halda fast við það. Þannig verður kóðinn þinn auðveldari að lesa og viðhalda.
Til dæmis, sumir CSS verktaki setja seljanda forskeyti línur í stafrófsröð, og nota innstreymi þannig að gildi allt línu, eins og þetta:
.element {-moz-transition: background-color linear .8s;-ms-transition: background-color linear .8s;-o-transition: background-color linear .8s;-webkit-transition: background-color linear .8s;transition: background-color linear .8s;}Það er bara ein leið til að gera það. En hvaða aðferð þú velur, bara vera í samræmi við kóðann þinn. Þetta væri sérstaklega mikilvægt ef þú vinnur í lið þar sem aðrir þurfa að lesa og / eða viðhalda kóðanum þínum.
Auðvitað eru ekki allir CSS3 eiginleikar þetta auðvelt að skipuleggja (til dæmis er kóðinn fyrir keyframe hreyfimyndir miklu flóknari), en í flestum aðgerðum ættir þú að vera fær um að hafa í samræmi stíl sem gerir þróun og viðhald sléttari.
Hvað um staðlaða eign?
Þú munt taka eftir í dæminu í fyrri hluta, síðasti eignin sem lýst er eftir að seljandalínur eru staðalbúnaður gististaðarins. Ef þú ert að fara að setja upp staðalinn, þá er þetta ákveðið hvernig þú ættir að gera það. Svo alltaf með það síðast þegar þú bætir því við.
Þetta er til að tryggja að söluaðili framkvæmd aðgerðarinnar sé skrifaður yfir með venjulegu útfærslunni. En það er varúð hér.
Fyrir nokkrar flóknar fjör og samskipti er hugsanlegt að framkvæmdin gæti breyst svo mikið að þegar vafrinn byrjar að styðja við staðlaða eignina gæti það haft óæskileg áhrif. Svo í sumum tilfellum gætir þú verið betra að fara út í venjulegu eignina að öllu leyti.
Ég skrifaði um þetta efni ítarlega á blogginu mínu , svo athugaðu það ef þú vilt fá meiri umfjöllun um þetta mál.
Notaðu Forskeyti
Eitt af auðveldasta leiðin til að takast á við alla vafraversluna er að nota handvirkt lítið tól sem heitir Forskeyti . Með Forskeyti, þróarðu bara kóðann eins og alltaf, og þú mátt bara nota einn seljandaforskeyti (til dæmis, aðeins "-moz-") fyrir alla CSS3. Þá, þegar þú ert búinn að prófa í þeirri vafra og hafa allt að virka eins og þú vilt, þá skaltu sleppa kóðanum þínum í Prefixr og það mun búa til allar auka seljanda kóða fyrir þig.
Forskeyti er einnig hægt að samþætta sjálfkrafa með textaritlinum þínum , og felur í sér stuðning við langvarandi keyframe fjörakóða. Að auki geturðu líka prófað tól sem ég bjó til sem kallast Hreyfimyndakóði sem bætir við viðbótarkóða fyrir keyframe hreyfimyndir.
Prófaðu vandlega
Síðasta tillaga sem ég gef hér er að prófa vel í öllum vöfrum sem þú ert að styðja. Þú getur notað heilmikið af tækjum og bókasöfnum til að aðstoða þig við þróun CSS3, en ekkert getur skipt ítarlegar prófanir í raunverulegum vafraumhverfum.
Og þetta ráð myndi vera sérstaklega mikilvægt ef þú ert að takast á við mikið af móttækilegum hönnunartengdum CSS3 (td fjölmiðlafyrirspurnum) og mikil notkun stafrænna eiginleika. Þú vilt að innihald þitt sé nothæft og læsilegt í öllum vöfrum, jafnvel þótt CSS3 aðgerðirnar séu ekki tiltækar.