Modernizr JavaScript-bibliotek innvarsler neste generasjons webdesign

Modernizr er open source JavaScript-biblioteket som hjelper nettutviklere med å bygge den neste generasjonen webdesign ved å bruke kraften til HTML5 og CSS3. Manuell deteksjon av funksjoner er ikke nødvendig lenger fordi Modernizr løser problemet med å spørre nettleseren om den kan utføre visse oppgaver, spesielt med henvisning til nye egenskaper i HTML5 og CSS3-koding. Modernizr-biblioteket gjør det enkelt for webutviklere å legge til støtte på sidene sine for forskjellige nivåer av brukeropplevelser basert på nettleseren som er oppdaget.

Støttede nettlesere inkluderer: IE6 +, Firefox 3.5+, Opera 9.6+, Safari 2+ og Chrome. På mobil støtter den iOS's mobile Safari, Android's WebKit-nettleser, Opera Mobile og Firefox Mobile, men det er fortsatt mer testing som må gjøres med hensyn til støtte for Blackberry 6+.

Navnet Modernizr er faktisk avledet fra målet om å modernisere utviklingspraksis og det kollektive teamet av utviklere. På denne måten parerer Modernizr ekstremt godt med skript som gir støtte for innfødte nettlesere når støtte for visse egenskaper mangler. Generelt kalles disse skriptene polyfill, også kalt en shim eller en shiv som inneholder JavaScript som replikerer standard API for ikke støttede nettlesere.

Mange implementeringer av nettsteder benytter sniffingmetoder for brukeragenter for å oppdage en brukers nettleser med verktøy som den konfigurerbare navigator.userAgent- egenskapen. Modernizr bruker funksjonsdeteksjon som er en mer pålitelig metode for å etablere hva nettleseren kan og ikke kan gjøre:

  • Tester over 40 HTML5- og CSS3-funksjoner på få sekunder
  • Oppretter et JavaScript-objekt som inneholder resultatene fra disse testene som boolske egenskaper
  • Legger til klasser i html-elementet som forklarer nøyaktig hvilke funksjoner som ikke støttes og ikke
  • Tilbyr en skriptlaster slik at du kan hente inn polyfyll for å fylle ut funksjonaliteten i gamle nettlesere

For å installere Modernizr, kan du lage et tilpasset sett med funksjoner for eget bruk, spesialisert for å passe dine behov, og dette hjelper til med å holde koden til et minimum. Når du er på nedlastingssiden, velger du hvilke funksjoner du vil bruke til prosjektet ditt; de inkluderer valg fra CSS3, HTML5 og andre. Du kan også bruke en utviklergruppe som inkluderer en ukomprimert versjon av alle funksjonene. Dette lar deg lære om funksjonene, og når du er klar for produksjon, kan du bruke nedlastingsverktøyet til å velge og bygge bare de du velger. En skjermdumping av nedlastingssiden for funksjonsvelgeren vises nedenfor.

Når du har satt opp skriptet og lastet ned det, legger du til skriptkodene i HTML-dokumentene. Og for best ytelse, anbefales det at skriptet følger etter stilarkreferansen av to grunner: HTML5 Shiv (som muliggjør HTML5-elementer i IE) må kjøres før, og hvis du bruker noen av CSS-klassene som Modernizr legger til, vil du forhindre flash av ustylet innhold.

Sannsynligvis er en av de beste funksjonene ved bruk av Modernizr at det er en polyfyll for omtrent hver HTML5-eiendom som den kjenner seg igjen, noe som betyr at du kan utvikle deg for fremtiden med HTML5 og CSS3-elementer og kunne sikre replikering i ikke-støttende nettlesere .

Det er mye mer å modernisere enn det som kan formidles i denne raske gjennomgangen av det fantastiske verktøyet, men dette vil sette deg i gang på rett spor for å aktivere webdokumenter for nå og inn i fremtiden for HTML5 og CSS3 webutvikling.

Andre ressurser
  • Modernizr.load Tutorial
  • Funksjoner oppdaget av Modernizr
  • Modernizr utvidbarhet
  • Github Repository for Modernizr

© Copyright 2020 | mobilegn.com