Modernizer aktiverer HTML5 på eldre nettlesere

For et par uker siden skrev jeg om hvordan jeg brukte Modernizr for å legge til støtte for HTML5-elementer til eldre nettlesere. I dag vil jeg gå nærmere inn på Modernizr, fordi det gir utviklere muligheten til å bruke HTML5 i dag mens de tar opp bekymringene rundt eldre nettlesere.

Modernizr er et JavaScript-bibliotek som oppdager støtte for forskjellige HTML- og CSS-funksjoner. Selv om det er mulig å gjøre dette arbeidet selv, gjør Modernizr det i en brukervennlig pakke som er godt testet og enkelt konfigureres. Den oppdager hva nettleserens funksjoner er og kan bruke JavaScript for å legge til DOM elementene og CSS-klassene du trenger - dette er kjent som en polyfyll. Ut av esken har den en håndfull polyfyller for å legge seksjonselementene til eldre versjoner av Internet Explorer (jeg brukte det til akkurat dette formålet).

Et av de store problemene med polyfyll (annet enn å lage koden for å oppdage den nødvendige funksjonaliteten og legge den til, som er en kjedelig oppgave) er at den kan bli veldig tung. Tross alt kjører du gjennom massevis av JavaScript-koder for å oppdage funksjoner, og deretter legge til objekter til DOM. For å gjøre ytelsen enda dårligere, jo eldre nettleseren er, desto mer må legges til ... og eldre nettlesere er tregere på JavaScript enn nyere. Modernizr håndterer dette ved å la deg tilpasse en pakke som bare har den støtten du trenger.

Å komme i gang med Modernizr er enkelt. Dokumentasjonen for å få den distribuert til nettstedet ditt er et avsnitt langt. Som du ser i figur A, lar nedlastingssiden deg konfigurere Modernizr-nedlastingen til dine nøyaktige behov. Figur A

Nedlastingsskjermen til Modernizr gir mulighet for tilpasning. (Klikk på bildet for å forstørre.)

Bortsett fra de innebygde polyfyllene, blir Modernizr brukt til å oppdage funksjoner og ta beslutninger basert på hva som blir oppdaget (inkludert lasting av passende polyfyll). Hvis du trenger flere polyfyller, lister Modernizr GitHub-depot zillioner av dem. Det fine med Modernizr er at den faktisk oppdager tilgjengeligheten til funksjonalitet, i stedet for bare å sjekke hvilken brukeragent som brukes og sammenligne den med et funksjonalitetskart. Dette sikrer at Modernizr-funksjonen gjenkjenning alltid er nøyaktig.

Det er veldig enkelt å bruke funksjonsdeteksjonen til å laste polyfyll. Når du har lagt Modernizr til siden din, kan du bruke Modernizr.load () -metoden for å oppdage en funksjon og laste de riktige filene basert på den. Den grunnleggende syntaks er:

 Modernizr.load ({ 

test: testnavn,

Jepp: ' fil som skal lastes hvis funksjonen støttes ',

nope: ' fil som skal lastes hvis funksjonen ikke støttes '

});

Syntaksen kan bli mer komplisert etter hvert som dine behov blir mer sofistikerte. Du kan bruke &&-operatøren i testene dine for å forsikre deg om at flere tester er bestått før du laster inn et skript. Dette lar deg ta med deg en haug med polyfyller for å kompensere for en veldig utdatert nettleser. Flere ressurser kan lastes ved å spesifisere navnene deres i array-syntaks (for eksempel 'fil 1', 'fil 2'). Når du laster inn flere ressurser, vil de laste ned parallelt. Du kan også bruke en "begge" klausul (eller "last" klausulen) for å laste inn ressurser uavhengig av om betingelsene er oppfylt, og en "fullstendig" eller "tilbakeringing" klausul for å gi kode som skal kjøres når den er ferdig. Den fullstendige dokumentasjonen for innlastingsfunksjonaliteten er på janopejs-siden.

Det virker som hver gang jeg skriver om HTML5, et vanlig spørsmål fra utviklere er, "men når kan jeg begynne å bruke det?" Den gode nyheten er at med forsiktig bruk av Modernizr kan du begynne å bruke HTML5 i dag med en høy grad av kompatibilitet selv på eldre nettlesere.

J.Ja

Hold dine tekniske ferdigheter oppdatert ved å registrere deg på TechRepublics gratis nyhetsbrev om Software Engineer, levert hver tirsdag.

© Copyright 2021 | pepebotifarra.com