Eins og þú veist er miklu meira að byggja upp móttækilegar vefsíður en breidd. Þú þarft skynjara sem gefur þér endurgjöf til að breyta vefsvæðum á grundvelli annarra þátta.
Besta leiðin til að bæta viðbrögð okkar frá skynjara notanda eða vafra er með því að nota JavaScript bókasafn sem heitir Modernizr. Í þessari grein mun ég útskýra hvers vegna, þegar þú ferð út fyrir breidd, er Modernizr svo ómetanlegt tól.
Í þróun framundan, notuðu verktaki til að stilla á síðuna til að passa við þvingun útlitsvélarinnar sem notaður er af tiltekinni vafra. Árið 2003 voru aðeins þrjár vélar: Netscape, Internet Explorer og Opera. Firefox, Safari og fyrsta farsíma vafrinn, Opera Mini, voru gefin út árið 2005. Króm var ekki gefin út fyrr en árið 2008.
Eins og stendur eru fimm helstu vafrar, hver með sína eigin farsímaútgáfu. Yfir þá fjölda vafra eru einnig eldri útgáfur sem notendur hafa ekki uppfært. Á sama hátt og að búa til margar skipanir fyrir margar skjástærðir verða að lokum núll summa leik, þá er það að byggja margar framhlið fyrir marga vafra.
Við erum að nota móttækilegan vefhönnun til að mæta nýjum, fremstu farsímaflettum. En þegar nýtt vafra er móttekið er mikilvægt að gera það ekki á kostnað eldri vafra.
Sögulega hefur hagræðing komið sem vara við að byggja upp síðuna fyrir vinsælustu vöfrurnar og síðan að klára til að tryggja að vefsvæðið sé það sama á safn af vinsælum vöfrum. Hönnunin þyrfti að mæta getu allra vafra.
Progressive enhancement er ein stefna að því að takast á við vafra að styðja við nútíma eiginleika. Það er freistandi að byggja upp nýjustu eiginleika, en í móttækilegu vefnum er hönnun vefsvæðis samhengisbundin við ramma sem hún er skoðuð í gegnum. Móttækilegur vefhönnun hefur orðið vinsæll vegna þess að það leysir augljósasta breytingasamhengið - stærð rammans - en samhengi vafrans keyrir miklu dýpra en það er viewport stærð.
SVG gerir þér kleift að finna frábær lausn fyrir skjámyndir í háum upplausn, en hvað um stuðning sinn í eldri vöfrum? Það er ekki studd í IE 8 eða eldri, þannig að þú verður að byggja í fallback ef þú styður þennan vafra. Þú gætir bent á vafrann og valið aðra stíl við þá vafra en þá verður þú að þjóna þeim sömu valkostum fyrir alla vafra sem styðja ekki SVG.
Vildi það ekki vera auðveldara ef þú gætir bara skrifað stíl sem væri notuð gegn öllum vafra sem ekki styðja SVG? Þannig þyrfti þú ekki að fylgjast með villuskýrslum frá notendum eldri útgáfa. Þú mátt bara setja fallhlífina einu sinni og gleyma því.
Hefð er að uppgötva eiginleika uppgötvun með því að greina notanda umboðsmanns vafrans. Þetta er gert með því að nota JavaScript, með því að nota navigator mótmæla. Flettitæki mótmæla er aftur á Netscape dagana og notað til að vera besta tól verktaki í samhæfni vafrans.
Ef þú ert með Chrome og hefur kveikt á DevTools skaltu opna vafrann þinn á vefnum með því að hægrismella á síðu og velja Inspector Element. Smelltu síðan á Console og smelltu á "Navigator.UserAgent" og smelltu á Enter. Þetta skilar notanda umboðsmanni núverandi vafrans, sem er strengur texti sem notaður er til að auðkenna vafrann sem er í notkun. Chrome skilar eftirfarandi:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.35 (KHTML, like Gecko) Chrome/27.0.1443.2 Safari/537.35Á marga vegu er siglingahópurinn einn af bestu skynjunum sem við höfum í boði fyrir okkur til að upplýsa kerfið okkar um það sem notandinn okkar er fær um; þó, það er ekki mjög framtíð vingjarnlegur. Það byggir actuators á síðuna þína á fullt af forsendum um hvað vafrinn gerir og styður ekki. Það er líka óáreiðanlegt vegna þess að notendur geta stillt það til að fá aðgang að síðum sem vafrinn gæti ekki staðið að.
Modernizr er JavaScript bókasafn notað til að greina aðgerðir í vafranum. Það er hlaðinn í hausnum á síðunni þinni og keyrir á blaðsíðu. Að bæta því við síðuna þína er eins einfalt og að bæta við öðru JavaScript-bókasafni, svo sem jQuery, en þegar þú hefur bætt við, þá býður Modernizer þér ótrúlega mikið af stjórn þegar þú gerir síðuna þína og tryggir að allir notendur fái góða reynslu.
Having verið hlaðinn, keyrir Modernizr nokkrar athuganir á vafra notandans til að ákvarða hvaða aðgerðir vafrinn styður og skapar JavaScript-hlut sem þú getur notað til að prófa á móti. Modernizr skapar ekki stuðning við þessar aðgerðir; það gefur þér einfaldlega leið til að veita stuðning fyrir nútíma eiginleika. Til dæmis, þegar um SVG er að ræða, gerir Modernizr okkur kleift að bjóða upp á bakkaskjámynd fyrir vafra sem skortir SVG stuðning.
Modernizr á einnig við flokkar í HTML merkið, sem gefur þér möguleika á að breyta CSS síðunnar með samsvarandi CSS flokkum. Þessar CSS flokkar leyfa þér að nota CSS kerfi til að byggja upp actuators sem vilja stilla síðurnar þínar til að leyfa framsækið aukahlutir í boði fyrir síðu.
Í stað þess að nota notandaviðmiðið, uppgötvar Modernizr aðgerðir beint með því að keyra röð af JavaScript prófum sem skilar Boolean (true or false) gildi. Þetta ræður þeim flokkum sem eru settar á HTML-merkið og gefur þér möguleika á að nota JavaScript til að greina hvort eiginleiki sé tiltækur.
Uppsetning Modernizr er eins einfalt og að tengja við JavaScript bókasafnið í hausnum á síðunni þinni, en þar sem uppsetningarferlið er flókið er að búa til útgáfuna sem þú þarft. Modernizr er hægt að hlaða niður í tveimur útgáfum, þróun útgáfa og framleiðslu útgáfu.
Þróunarútgáfan er fullur 42 KB, óþjappaður skrá. Þessi útgáfa er frábært ef þú ert vel versed í JavaScript og vilt gera smá klip við prófana sem hún framkvæmir. Vegna þess að það er óþjappað er auðvelt að lesa og auka en það er best eftir hjá forriturum með skilvirkan skilning á JavaScript.
Fyrir ykkur sem gætu ekki verið fullkomlega hæfileikaríkur á JavaScript, eða viljum fljótt byggja upp sérsniðna útgáfu af Modernizr, er þetta þar sem útgáfa útgáfa bókasafnsins kemur inn í leik. Framleiðsluútgáfubyggingartólið á vefsvæðinu gefur þér möguleika á að búa til útgáfu með aðeins prófunum sem þú þarfnast.
Þetta kemur sér vel þegar þú veist að þú þarft aðeins tiltekið sett af prófum. Til dæmis gæti vefsvæðið þitt ekki nýtt sér CSS kassaskugga, en það gæti þurft að styðja við CSS stig. Með því að nota uppbyggingartækið geturðu falið í sér þær prófanir sem þú þarft og útiloka þær sem þú þarft ekki, halda upprunakóðanum snyrtingu og heildarupphæð notandans niður.
Fyrir dæmi okkar mun ég vera að vinna í þróunarútgáfunni. Ég kemst að því að þegar ég er að byggja upp síðuna er best að vinna með fullri útgáfu og þá þegar þú veist hvaða aðgerðir þú notar á vefsvæðinu þínu skaltu klippa niður útgáfuna.
Við skulum gera nokkrar einfaldar aðgerðir við Modernizr. Við munum byrja með hrár sýnishorn síðu.
Við skulum nota þetta litla próf til að greina hvort vafrinn okkar sé fær um að styðja SVG. Fyrir einfaldleika munum við bara bæta við tveimur vísbendingum á síðunni til að greina stuðning.
Huzzah! You have SVG support.BOO! You don't have SVG support.Ef þú prófar þetta í vafra sem styður SVG, muntu sjá skilaboðin "Huzzah! Þú hefur SVG stuðning. "En ef þú ert með vafra sem styður ekki SVG, finnur þú" BOO! Þú hefur ekki SVG stuðning. "Skilaboð.
Þetta dæmi er nokkuð rudimentary, en það sýnir algerlega hugmyndin um að nota Modernizr til að laga vafraútgáfur. Ef við vorum að gera sömu festa með því að nota gamla notendaviðmiðunaraðferðina, þá þurfum við að hafa stíll lak fyrir hverja vafra sem styður ekki SVG og breyta CSS okkar fyrir hvert og eitt. (Fyrir þá sem hafa áhuga, eru aðeins helstu vafrar sem svíkja SVG stuðning Internet Explorer 7 og undir.)
Með því að bæta svg / no-svg bekknum við html á síðunni hefur CSS þinn nú val sem hægt er að nota til að hunsa núverandi CSS reglur. Vegna þess að það er á mestu tagi foreldris getur það notað til að hnekkja aðrar flokkar á síðunni.
Svo, í þessu tilviki, eru báðar span tags gefið sýna: none ;. Ef SVG-stuðningur er ekki til staðar, sýnir skjáinn: innri yfirlýsing á spanmerkið með .no bekknum skjánum: falinn þökk sé reglu á neikvæðu SVG á html-merkinu.
Við skulum reyna meira gagnlegt dæmi um sömu hugmynd. Við gætum viljað fá SVG bakgrunnsmynd á síðunni, sem fellur aftur í PNG ef vafrinn styður ekki SVG. Sjálfgefið munum við nota PNG myndina. Þannig er SVG ekki þjónað nema það sé þörf og verður framsækið aukning.
Núna höfum við ógnvekjandi SVG höfuðkúpu sem mun líta ógnvekjandi og skörpum fyrir notendur með háskerpu sýna og ennþá gott fyrir notendur með eldri vafra.
Það er mikið úrval upplýsinga til að læra um Modernizr. Við sýndu þér hvernig það virkar með vafrahæfileika án þess að þurfa að muna eða viðhalda hlaupandi lista þar sem vafrar styðja SVG.
Það virkar í undantekningartilvikum sem kerfi sem á að þjóna notendahreyfingum til að búa til skjót og mjög hagnýtar vefsíður.
Notir þú Modernizr í verkefnum þínum? Hvaða aðrar aðferðir hafa þú notað til að birta móttækilegt efni? Láttu okkur vita í athugasemdunum.
Valin mynd / smámynd, mismunandi línur mynd um Shutterstock.