Kuten tiedätte, on paljon enemmän reagoivien verkkosivustojen rakentamista kuin leveyttä. Tarvitset antureita, jotka antavat palautetta sivustojen sopeuttamiseksi muihin tekijöihin perustuen.
Paras tapa parantaa palautetta käyttäjän tunnistimesta tai selaimesta on käyttämällä nimeltään JavaScript-kirjastoa Modernizr. Tässä artikkelissa selitän, miksi, kun ylität leveyttä, Modernizr on tällainen korvaamaton työkalu.
Etupään kehittämisessä kehittäjät käyttivät sivuston sopeuttamista tietyn selaimen käyttämän ulkoasumoottorin rajoitusten mukaan. Vuonna 2003 oli vain kolme selausta: Netscape, Internet Explorer ja Opera. Firefox, Safari ja ensimmäinen mobiiliselain, Opera Mini, julkaistiin vuoteen 2005. Chrome julkaistiin vasta vuonna 2008.
Tällä hetkellä on viisi suurta selausta, joista jokaisella on oma mobiiliversio. Selainten joukossa on myös vanhempia versioita, joita käyttäjät eivät ole päivittäneet. Samalla tavalla, että useiden eri kokoisten kokoelmien luominen useille näytökoidoille muuttuu lopulta nollasummaksi, niin useiden selainten useiden etupäiden rakentaminen.
Käytämme reagoivaa web-suunnittelua uusien, huippuluokan mobiiliselainten mukautumiseen. Mutta sopeutettaessa uusia selaimia, on tärkeätä olla tekemättä vanhempien selainten kustannuksella.
Historiallisesti optimointi on tullut tuotteen luomiseksi sivuston suosituimmista selaimista ja sitten muokkaamista varmistaa sivuston näyttää samalta joukolle suosittuja selaimia. Mallien tulee sopeuttaa kaikkien selainten ominaisuudet.
Progressiivinen lisäys on yksi strategia selviytyä selainten epäonnistumisesta nykyaikaisten ominaisuuksien tukemiseen. On kiusaus rakentaa uusimmista ominaisuuksista, mutta reagoivassa verkossa sivuston suunnittelu on kontekstuaalinen kehykseen, jota sitä tarkastellaan. Responsive web design on tullut suosittu, koska se ratkaisee ilmeisimmän muuttuvan kontekstin - kehyksen koon - mutta selaimen konteksti kulkee paljon syvemmälle kuin sen näkymän koko.
SVG tarjoaa erinomaisen ratkaisun korkean resoluution näytöille, mutta entä selaimesi tuki? Se ei ole tuettu IE 8: ssa tai uudemmassa, joten sinun on luotava varalle, jos tuet selaimen. Voit tunnistaa selaimen ja tarjota vaihtoehtoisia tyylejä kyseistä selausta vastaan, mutta sinun pitäisi palvella samoja vaihtoehtoisia tyylejä jokaiselle selaimelle, joka ei tue SVG: tä.
Eikö olisi helpompaa, jos voisitte vain kirjoittaa tyylin, jota käytettiin jokaista selainta vastaan, joka ei tue SVG: ää? Näin sinun ei tarvitse seurata vanhempien versioiden käyttäjiä tekemistä vikailmoituksista. Voisit vain asettaa varauksen kerran ja unohtaa sen.
Perinteisesti ominaisuuden havaitseminen on suoritettu havaitsemalla selaimen käyttäjäagentti. Tämä tehdään JavaScriptin avulla navigaattoriobjektin avulla. Navigator-objekti on peräisin Netscapen päivistä ja se on ollut kehittäjän paras työkalu selaimen yhteensopivuudessa.
Jos sinulla on Chrome ja olet ottanut DevToolsin käyttöön, avaa selaimesi verkkotarkastaja napsauttamalla hiiren kakkospainikkeella sivua ja valitsemalla Tarkasta elementti. Napsauta sitten Consolea ja kirjoita "navigator.userAgent" ja syötä Enter. Tämä palauttaa nykyisen selaimen käyttäjänagentin, joka on tekstin merkki, joka tunnistaa käytössä olevan selaimen. Chrome palauttaa seuraavat tiedot:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.35 (KHTML, like Gecko) Chrome/27.0.1443.2 Safari/537.35Useilla tavoilla navigaattori on yksi parhaista antureista, joita meillä on käytettävissämme, jotta voimme tiedottaa järjestelmästämme siitä, mitä käyttäjä pystyy. mutta se ei ole kovin tulevaisuuden ystävällinen. Se perustaa sivustosi toimilaitteille paljon oletuksia siitä, mitä selaimesi tekee ja ei tue. Se on myös epäluotettava, koska käyttäjät voivat määrittää sen päästäkseen sivustoihin, joita selain ei välttämättä pysty tukemaan.
Modernizr on JavaScript-kirjasto, jota käytetään selaimesi ominaisuuksien havaitsemiseen. Se on ladattu sivusi päähän ja toimii sivun latauksen aikana. Sen lisääminen sivustoosi on yhtä helppoa kuin minkä tahansa muun JavaScript-kirjaston lisääminen, kuten jQuery, mutta kun se on lisätty, Modernizer antaa sinulle uskomattoman määrän valvontaa sivusi renderöinnissä ja varmistaa, että jokaiselle käyttäjälle tarjotaan laadukas kokemus.
Kun se on ladattu, Modernizr suorittaa useita tarkistuksia käyttäjän selainta vasten selvittämään, mitä ominaisuuksia selain tukee ja luo JavaScript-objektin, jota voit käyttää testattaessa. Modernizr ei luo tukea näille ominaisuuksille; se vain antaa sinulle mahdollisuuden antaa takaisintukea nykyaikaisille ominaisuuksille. Esimerkiksi SVG: n tapauksessa Modernizr antaa meille mahdollisuuden antaa varmuuskopio SVG-tuen puutteellisille selaimille.
Modernizr soveltaa myös sarjoja luokkiin HTML-tunnisteeseen, jolloin voit muokata sivun CSS: ää käyttäen vastaavia CSS-luokkia. Näiden CSS-luokkien avulla voit käyttää CSS-järjestelmiä sellaisten toimilaitteiden luomiseen, jotka säätävät sivuja, jotta sivun käytettävissä olevat progressiiviset parannukset ovat mahdollisia.
Käyttäjäagenttiä käytettäessä Modernizr havaitsee ominaisuuksia suoraan suorittamalla sarjan JavaScript-testejä, jotka palauttavat booleja (tosi tai virheellisiä) arvoja. Tämä sallii luokitukset, jotka on asetettu html-tunnisteeseen, ja antaa sinulle mahdollisuuden käyttää JavaScriptä havaitsemaan, onko ominaisuus käytettävissä.
Modernizr-ohjelmiston asentaminen on yhtä helppoa kuin linkittäminen JavaScript-kirjastoon sivun yläosassa, mutta asennusprosessi saattaa monimutkaiseksi luoda tarvittavan version. Modernizr on ladattavissa kahdessa versiossa, kehitysversio ja tuotantoversio.
Kehitysversio on täysi 42 KB: n pakkaamaton tiedosto. Tämä versio on hyvä, jos olet hyvin perehtynyt JavaScript-tilaan ja haluat tehdä joitain muutoksia testeihin, joita se suorittaa. Koska se on pakkaamatonta, se on helppo lukea ja lisätä, mutta se on parasta jättää kehittäjille vakaalla JavaScript-käsityksellä.
Niille teistä, jotka eivät välttämättä ole kokeneita JavaScript-ohjelmissa tai haluavat nopeasti rakentaa räätälöidyn version Modernizr-ohjelmistosta, tämä on silloin, kun kirjaston tuotantoversio tulee peliin. Sivuston tuotantoversion rakennus työkalu antaa sinulle mahdollisuuden luoda versio, jossa on vain tarvittavat testit.
Tämä on kätevää, kun tiedät, että tarvitaan vain tiettyjä testejä. Sivustosi ei esimerkiksi välttämättä hyödynnä CSS-laatikko-varjoja, mutta se saattaa joutua tukemaan CSS-kaltevuuksia. Rakennustyökalun avulla voit sisällyttää tarvittavat testit ja sulkea pois ne, joita et tarvitse, pitämällä lähdekoodin leikkaus ja käyttäjän latausaika alhaalla.
Esimerkkinäni työskentelen kehitystyössä. Huomaan, että kun rakennan sivuston, kannattaa työskennellä täydellä versiolla ja sitten kun tiedät, mitä ominaisuuksia käytät sivustossasi, leikkaa versio alaspäin.
Tehdään yksinkertainen ominaisuuden tunnistus Modernizrilla. Aloitamme raaka-näyteikkunalla.
Käytetään tätä pienintä testiä havaitsemaan, selaimemme pystyy tukemaan SVG: ää. Yksinkertaisuuden vuoksi lisäämme vain kaksi span-tunnistetta sivulle tuen tunnistamiseksi.
Huzzah! You have SVG support.BOO! You don't have SVG support.Jos testat tätä SVG: n tukemassa selaimessa, näet viestin "Huzzah! Sinulla on SVG-tuki. "Jos sinulla on selain, joka ei tue SVG: tä, löydät" BOO! Sinulla ei ole SVG-tukea ".
Tämä esimerkki on melko alkeellinen, mutta se näyttää Modernizrin käyttämisen keskeisen käsityksen ristiinselaimen ongelmien korjaamiseksi. Jos teimme saman korjauksen vanhan käyttäjäagentti-menetelmän avulla, meillä olisi oltava tyylisivu jokaiselle selaimelle, joka ei tue SVG: ää ja joka muuttaa CSS: tä jokaiselle. (Kaikkien kiinnostuneiden kannalta ainoat suuret selaimet, joilla ei ole SVG-tukea, ovat Internet Explorer 7 ja alle.)
Lisäämällä svg / no-svg-luokan html-sivulle CSS: ssä on nyt valitsin, jolla voidaan ohittaa olemassa olevat CSS-säännöt. Koska se on useimmissa tunnisteissa, se voi ohittaa muiden luokkien sivun.
Joten tässä tapauksessa molempien span-tunnisteiden annetaan näyttö: none ;. Jos SVG-tukea ei ole, näytöllä: inline-lausuma span-tunnisteen kanssa .no-luokassa ohittaa näytön: piilotettu html-tagin no-svg-säännön ansiosta.
Yritetään hyödyllisempi esimerkki samasta ideasta. Saatat haluta saada sivun SVG-taustakuvan, joka palaa PNG: hen, jos selain ei tue SVG: tä. Oletusarvoisesti käytämme PNG-kuvaa. Tällä tavoin SVG: tä ei palvele, ellei sitä tarvita ja siitä tulee progressiivinen lisälaite.
Nyt meillä on mahtava SVG-kallo, joka näyttää mahtavalta ja teräväksi käyttäjille, joilla on korkean resoluution näytöt, ja silti näyttää hyvältä vanhempien selainten käyttäjille.
Modernizr-ohjelmasta on paljon tietoa. Osoitimme sinulle, miten se toimii selaimessa toimivien selaimella ilman, että tarvitsee muistaa tai ylläpitää käynnissä olevaa luetteloa selaimista, jotka tukevat SVG: ää.
Se toimii poikkeuksellisesti järjestelmänä, jonka avulla palveluntarjoajasi voivat luoda nopeita ja erittäin toimivia verkkosivustoja.
Käytätkö Modernizr-ohjelmaa projekteissasi? Mitä muita menetelmiä olet käyttänyt reagoivan sisällön tarjoamiseen? Kerro meille kommentit.
Esitetty kuva / pikkukuva, divergent riviä kuva kautta Shutterstock.