HTML5 Polyfills

HTML5 är bra för webben, det är bra för webbutvecklare och det är bra för användarna. Därför är det viktigt att vi kan börja använda HTML5 nu och inte vänta tills alla webbläsare stöder alla de funktioner i HTML5 som gör webben bättre. Hur gör man för att säkerställa att HTML5-funktionalitet fungerar i exempelvis äldre versioner av Internet Explorer? Genom att använda så kallade HTML5 polyfills kan du säkerställa att dina HTML5-webbsidor fungerar överallt.

Även om HTML5 stöds av de flesta webbläsarna på marknaden så finns det webbläsare som många använder som inte stöder HTML5. Ett vanlig förekommande begrepp när det kommer till att lösa dessa typer av problem är att man kan använda sig av en så kallad HTML5 polyfill, begreppet myntades av utvecklaren Remy Sharp 2009 som ett begrepp för att lösa dessa typer av problem, det vill säga att hjälpa browsers att uppfylla HTML5-funktioner de inte klarar av out-of-the-box.

Hur fungerar Polyfills?

Vad är det då som är så magiskt med så kallade polyfills? Jo, det magiska är att de inte tvingar dig att lösa saker som vi löste saker på webben förut, med workarounds och hack. Med polyfills kan du fokusera på att lösa problem på ett korrekt sätt med HTML5-markup, CSS3 och HTML5 JavaScript API:er och låta Polyfillsen sköta om att saker och ting fungerar för de browsers som inte än är kapabla att göra det du vill. Tjusningen med en polyfill är att du med tiden kommer bli mindre och mindre beroende av den om Microsoft, Mozilla, Google, Opera och Apple sköter sig och implementerar de standarder som polyfills finns till för att stöda. Polyfilla är amerikanska för spackel, dvs en polyfill fyller samma funktion som spackel, den fyller igen sprickor och hjälper till att ge ett slätt och fint intryck. När en del pratar om polyfills så kommer även begreppet Regressive Enhancement upp. Innebörden av båda begreppen är: "Använda alla de nya funktioner som HTML5 erbjuder, använd sen JavaScript för att emulera det korrekta beteendet i äldre webbläsare."

Några populära polyfills för HTML5

Nedan har vi listat några av de mest populära polyfills som du kan använda idag

  • Raphaël - Ett bibliotek för vektorgrafik (SVG) med fallback till VML för Internet Explorer
  • excanvas - Ett bibliotek för att få stöd för HTML5 Canvas i Internet Explorer
  • HTML5Shiv - html5shiv som hjälper Internet Explorer att rendera HTML5 element på ett korrekt sätt
  • HTML5Media - Gör att du får stöd för <audio> och <video> taggar i alla webbläsare
  • socket.io - WebSocket funktionalitet för alla webbläsare
  • GeoLocation Shim - Ett script för stöd av GeoLocation i alla webbläsare
  • History.js - Stöd för HTML5 History / State API (pushState, replaceState, onPopState) i alla webbläsare

Det finns en uppsjö av bra och användbara HTML5 polyfills och beroende på vad du vill åstadkomma så bör du leta inom rätt härad. Modernizr har en fantastiskt bra lista av polyfills för alla olika HTML5, CSS3 och olika HTML5 JavaScript API:er.

Ska man använda Polyfills?

Vi tycker att man ska göra det. Det finns vissa som hellre väntar på att alla webbläsare stöder en funktion innan de använder sig av den, det tror inte vi på, vi tror på att driva webben framåt genom att använda alla de möjligheter som HTML5 skapar för att bygga bättre webbsidor för användarna.

Dela

Köp HTML och CSS-boken

html5 och css3 bok

Lär dig HTML5 och CSS3. Den sjunde upplagan av HTML och CSS-boken täcker in HTML5, XHTML och CSS. Boken börjar från grunden och innehåller allt du behöver veta för att skriva webbsidor.

Köp den nu

Ställ en fråga

Bli en expert på HTML5 och CSS3

Få gratis tips i brevlådan om hur du bygger en bättre webbsida.