Wie al eens wat met HTML5 heeft gedaan weet dat het ‘t leven van een front- en backenddeveloper vele malen makkelijker kan maken. Eenvoudig video en audio toevoegen, games en (dynamische) vormen weergeven op het scherm via canvas, local storage, geolocation en een hele rits gebruiksvriendelijke input types waarbij automatisch de inhoud gevalideerd wordt schelen ons een hoop uren werk. Vandaar dat ik bij deze zeg; zet HTML5 wel al breed in. Gebruik niet alleen de nieuwe header tag, maar kijk ook naar de rest.

 

Zoals al eerder op dit blog is besproken kan er via Modernizr gecheckt worden of een bepaalde HTML5 functie ondersteund wordt. En als het niet ondersteund wordt, kan je dat opvangen met een hele hoop javascript / flash oplossingen. Dat noemen we polyfills; manieren om de gaten van oude browsers te dichten. Addy Osmani heeft hier voor Flash in the Can Toronto een hele mooie presentatie met voorbeelden voor in elkaar gezet, maar om wat dieper in te gaan op specifieke HTML5 elementen wil ik er in deze blogpost een paar onder elkaar zetten:

 

Video

Media Element.js door John Dyer
is een Flash speler die de specificaties van een video element automatisch overneemt en terugvalt op Flash waar nodig. Zeer eenvoudig te intergreren.

 

Video for everybody door Kroc Camen
Is een volledig op html-gebaseerde manier van video embedden. Valt ook terug op Flash, maar laat dit volledig door de browser doen, erg slim gemaakt, maar lastiger door te voeren aangezien je altijd twee bestanden dient te hebben; een video geschikt voor HTML5 en een Flash-file of YouTube embed met dezelfde video.

 

Audio

jPlayer
Gebruik jQuery om automatisch ondersteuning te detecteren en valt terug op Flash als dat nodig is.

 

audio.js
Moeite van het vermelden waard omdat deze ook met een custom player in HTML5 komt. Mooie interface en wederom een fallback op Flash.

 

Canvas

FlashCanvas door Shinya Muramatsu
Zoals de naam al doet vermoeden valt FlashCanvas terug op Flash voor canvas elementen. Is een rete-snelle oplossing (sneller dan Google’s excanvas bijvoorbeeld) en is daarom -wat mij betreft- de beste optie voor canvas fallbacks.

 

Een andere mogelijkheid is om Modernizr te gebuiken voor feature-detection en zodoende raphael.js in te laden om via SVG te tekenen op canvas. Is wat trager, maar op die manier kun je Flash wel helemaal omzeilen.

 

Local Storage

Storage polyfill door remy sharp
Is een op javascript gebaseerde oplossing die werkt met javascript cookies.

 

Amplify.js door appendTo
Wederom een javascript oplossing. Erg makkelijk te implementeren.

 

Webformulieren

WebShims Library door Alexander Farkas
Bied een brede dekking voor input types. Zowel op validatie gebied als widget gebied (er zit bijvoorbeeld een date-selection in).

 

H5F door Ryan Seddon
Bied ondersteuning voor email en url type invulvelden. Is lightweight en is vooral goed voor automatische emailvalidatie.

 

Er is geen enkele reden om de bovenstaande HTML5 elementen niet meer te gebruiken, behalve dan misschien pageload time… met al die polyfills die ingeladen moeten worden kan het een zware pagina worden. Maar daarvoor kun je natuurlijk weer prima Modernizr inzetten; check eerst of er ondersteuning is voor een bepaald element of een bepaalde functie voor je de extra bestanden inlaad.

 

Hopelijk heb je iets aan dit korte overzichtje. Mocht je nog iets toe te voegen hebben dan kan dat uiteraard zoals altijd in de comments