Som du vet, er det mye mer å bygge responsive nettsteder enn bredde. Du trenger sensorer som gir deg tilbakemelding til å justere nettsteder basert på andre faktorer.
Den beste måten å forbedre tilbakemeldingen fra brukerens sensor eller nettleser, er å bruke et JavaScript-bibliotek som heter Modernizr. I denne artikkelen vil jeg forklare hvorfor, når du går utover bredden, er Modernizr et slikt uvurderlig verktøy.
I front-end-utviklingen brukte utviklere til å justere et nettsted for å passe begrensningene til layoutmotoren som brukes av en bestemt nettleser. I 2003 var det bare tre nettlesere: Netscape, Internet Explorer og Opera. Firefox, Safari og den første mobile nettleseren Opera Mini ble utgitt i 2005. Chrome ble ikke utgitt før 2008.
For tiden er det fem store nettlesere, hver med sin egen mobile versjon. Over det spekteret av nettlesere er det også eldre versjoner som brukerne ikke har oppgradert. På samme måte som å opprette flere layouter for flere skjermstørrelser blir det til slutt et null sumspill, og det gjør også flere frontender for flere nettlesere.
Vi bruker responsivt webdesign for å imøtekomme nye, banebrytende mobile nettlesere. Men mens du tar imot nye nettlesere, er det viktig å ikke gjøre det på bekostning av eldre nettlesere.
Historisk sett har optimalisering kommet som et produkt for å bygge et nettsted for de mest populære nettleserne og deretter tilpasse for at nettstedet skal sees på et sett med populære nettlesere. Designene må ta imot evnen til alle nettlesere.
Progressiv forbedring er en strategi for å takle nettleserens manglende støtte til moderne funksjoner. Det er en fristelse å bygge for de mest oppdaterte funksjonene, men i en responsiv web er utformingen av et nettsted kontekstuell til rammen som den blir vist gjennom. Responsive webdesign har blitt populært fordi det løser den mest åpenbare skiftende konteksten - størrelsen på rammen - men konteksten til en nettleser går mye dypere enn visningsstørrelsen.
SVG gir en flott løsning for høyoppløselige skjermer, men hva med støtte i eldre nettlesere? Det støttes ikke i IE 8 eller eldre, så du må bygge inn en tilbakekalling hvis du støtter denne nettleseren. Du kan identifisere nettleseren og vise alternative stilarter mot nettleseren, men da måtte du betjene de samme alternative stilene for hver nettleser som ikke støtter SVG.
Ville det ikke vært enklere hvis du bare kunne skrive en stil som ville bli brukt mot hver nettleser som ikke støttet SVG? På den måten trenger du ikke å følge med feilrapporter fra brukerne av eldre versjoner. Du kan bare sette nedfallet en gang og glemme det.
Tradisjonelt har funksjonsdeteksjon blitt oppnådd ved å oppdage nettleserens brukeragent. Dette gjøres via JavaScript, ved hjelp av navigatorobjektet. Navigatorobjektet går tilbake til Netscape-dagene og pleide å være utviklerens beste verktøy i kryssbrowser-kompatibilitet.
Hvis du har Chrome og har aktivert DevTools, åpner du nettleserens webinspektør ved å høyreklikke på en side og velge Inspiser element. Deretter klikker du på Console og, etter caret, skriver "navigator.userAgent" og trykker Enter. Dette vil returnere din nåværende nettleserens brukeragent, som er en streng med tekst som brukes til å identifisere nettleseren som er i bruk. Chrome returnerer følgende:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_2) AppleWebKit/537.35 (KHTML, like Gecko) Chrome/27.0.1443.2 Safari/537.35På mange måter er navigatorobjektet en av de beste sensorene vi har tilgjengelig for oss, for å informere vårt system om hva vår bruker er i stand til; Det er imidlertid ikke veldig fremtidsvennlig. Det baserer nettstedets aktuatorer på mange forutsetninger om hva nettleseren gjør og ikke støtter. Det er også upålitelig fordi brukere kan konfigurere det for å få tilgang til nettsteder som nettleseren kanskje ikke kan støtte.
Modernizr er et JavaScript-bibliotek som brukes til å oppdage funksjoner i nettleseren. Den er lastet i hodet på siden din og kjører under en sidelast. Hvis du legger til det på nettstedet ditt, er det like enkelt å legge til et annet JavaScript-bibliotek, for eksempel jQuery, men når en gang er lagt til, gir Modernizer deg en utrolig mengde kontroll når du gjengir siden din og sikrer at hver bruker får servert en kvalitetserfaring.
Etter å ha blitt lastet, kjører Modernizr en rekke kontroller mot brukerens nettleser for å finne ut hvilke funksjoner nettleseren støtter og oppretter et JavaScript-objekt som du kan bruke til å teste mot. Modernizr skaper ikke støtte for disse funksjonene; det gir deg bare en måte å gi tilbakebetaling støtte for moderne funksjoner. For eksempel, når det gjelder SVG, lar Modernizr oss gi et tilbakevendingsbilde for nettlesere som mangler SVG-støtte.
Modernizr gjelder også et sett med klasser til HTML-taggen, noe som gir deg muligheten til å endre sidens CSS ved hjelp av de tilsvarende CSS-klassene. Disse CSS-klassene lar deg bruke CSS-systemer til å bygge aktuatorer som vil justere sidene dine slik at de progressive forbedringene er tilgjengelige for en side.
I motsetning til bruk av brukeragenten, oppdager Modernizr funksjoner direkte ved å kjøre en rekke JavaScript-tester som returnerer boolske (sanne eller falske) verdier. Dette dikterer klassene som er satt til html-taggen, og gir deg muligheten til å bruke JavaScript for å oppdage om en funksjon er tilgjengelig.
Installere Modernizr er like enkelt som å koble til JavaScript-biblioteket i hodet på siden din, men der installasjonsprosessen blir komplisert, skaper du den versjonen du trenger. Modernizr er tilgjengelig for nedlasting i to versjoner, utviklingsversjonen og produksjonsversjonen.
Utviklingsversjonen er en komplett 42 KB ukomprimert fil. Denne versjonen er flott hvis du er godt kjent med JavaScript og vil gjøre noen tilpasninger til testene den utfører. Fordi det er ukomprimert, er det enkelt å lese og forstørre, men det er best igjen for utviklere med en solid forståelse av JavaScript.
For de av dere som kanskje ikke er helt dyktige på JavaScript, eller ønsker å raskt bygge en tilpasset versjon av Modernizr, er dette her hvor produksjonsversjonen av biblioteket kommer inn i spill. Utviklingsverktøyet for produksjonsversjon på nettstedet gir deg muligheten til å lage en versjon med bare de testene du trenger.
Dette kommer til nytte når du vet at du bare trenger et bestemt sett med tester. For eksempel kan nettstedet ditt ikke dra nytte av CSS-bokseskygger, men det kan være nødvendig å støtte CSS-gradienter. Ved hjelp av byggverktøyet kan du inkludere testene du trenger og ekskludere de du ikke trenger, holder kildekoden trim og brukerens totale belastningstid nede.
For vårt eksempel vil jeg jobbe med utviklingsversjonen. Jeg finner at når jeg bygger et nettsted, er det best å jobbe med den fullstendige versjonen, og så når du vet hvilke funksjoner du skal bruke på nettstedet ditt, kan du trimme versjonen ned.
La oss gjøre noen enkle funksjonsdeteksjon med Modernizr. Vi starter med en rå prøveplass.
La oss bruke denne lille testen for å oppdage om nettleseren vår er i stand til å støtte SVG. For enkelhets skyld skal vi bare legge til to strekkmerker til siden for å oppdage støtte.
Huzzah! You have SVG support.BOO! You don't have SVG support.Hvis du tester dette i en nettleser som støtter SVG, vil du se meldingen "Huzzah! Du har SVG-støtte. "Hvis du har en nettleser som ikke støtter SVG, finner du" BOO! Du har ikke SVG-støtte. "-Melding.
Dette eksemplet er ganske rudimentært, men det viser kjernen ideen om å bruke Modernizr for å fikse problemer med kryssbrowser. Hvis vi gjorde den samme løsningen ved hjelp av den gamle brukeragentmetoden, måtte vi ha et stilark for hver nettleser som ikke støtter SVG og endrer vårt CSS for hver enkelt. (For alle som er interessert, er de eneste store nettleserne som mangler SVG-støtte, Internet Explorer 7 og under.)
Ved å legge svg / no-svg-klassen til html på siden, har CSS nå en velger som kan brukes til å overstyre eksisterende CSS-regler. Fordi det er på den overordnede taggen, kan det brukes til å overstyre andre klasser på siden.
Så, i dette tilfellet er begge spenningskodene gitt display: none ;. Hvis det ikke er SVG-støtte, overstyrer displayet: Inline-deklarasjonen på span-merket med .no-klassen skjermen: skjult takket være no-svg-regelen på html-taggen.
La oss prøve et mer nyttig eksempel på den samme ideen. Vi vil kanskje ha et SVG-bakgrunnsbilde på siden, som faller tilbake til en PNG hvis nettleseren ikke støtter SVG. Som standard bruker vi PNG-bildet. På denne måten serveres SVG ikke med mindre det trengs og blir en progressiv forbedring.
Nå har vi en fantastisk SVG-skalle som vil se fantastisk og skarp ut for brukere med høyoppløselige skjermer, og fortsatt se bra ut for brukere med eldre nettlesere.
Det er en stor mengde informasjon å lære om Modernizr. Vi viste deg hvordan det gjør arbeidet med kryssbrowser-funksjonalitet uten å måtte huske eller vedlikeholde en løpsliste hvorav nettlesere støtter SVG.
Det fungerer eksepsjonelt som et system for å betjene brukeraktuatorer for å skape hurtige og svært funksjonelle nettsteder.
Bruker du Modernizr i dine prosjekter? Hvilke andre metoder har du brukt til å vise responsivt innhold? Gi oss beskjed i kommentarene.
Utvalgt bilde / miniatyrbilde, divergerende linjebilde via Shutterstock.