Lo studio di nuove feature da poter usare nella programmazione induce ogni web developer a domandarsi “a che livello sia” la compatibilità tra browser per la funzionalità che desidera utilizzare. Oggi voglio brevemente analizzare il livello cross-browser per gli elementi HTML5 e proporre qualche trick che può essere utile per risolvere alcune lacune.
I browser e gli elementi supportati
Possiamo suddividere i browser in due gruppi:
- browser con migliore predisposizione per gli elementi HTML5 (Firefox, Chrome, Opera, Safari)
- browser con peggiore predisposizione per gli elementi HTML5 (Internet explorer)
Ovviamente però la fetta di mercato che domina la navigazione sul web è in mano a Microsoft poichè Internet explorer è ancora, putroppo, il browser più utilizzato.
I browser che hanno una più alta predisposizione per la compatibilità degli elementi HTML (Firefox, Chrome, ecc…) hanno in comune la compatibilità con gli elementi più diffusi (<audio>, <video>, <canvas>) per poi differenziarsi l’un l’altro con supporto per altre funzionalità più specifiche. Per analizzare meglio le varie funzionalità supportate per ogni browser è utile fare riferimento alle Feature lists che possiamo trovare tra la documentazione di ogni browser.
Internet explorer invece, seppur declamando un forte supporto ad HTML5, non supporta quasi nessun elemento. Nonostante ciò possiamo notare qualche rarissima eccezione (cross-document messaging). La situazione che può creare maggiori fastidi è la mancanza di corrispondenza tra TAG per la creazione della struttura HTML e regole CSS. Infatti se creiamo una struttura con elementi <header>, <footer> e così via e definiamo alcune regole CSS corrispondenti, Internet Explorer, non riconoscendo i TAG, non riesce ad applicare la formattazione desiderata.
Quindi, cosa possiamo fare?
Chiaramente era prevedibile che Internet Explorer potesse metterci i bastoni tra le ruote e qualcuno, prima di noi, ha già sperimentato un trick per poter rendere i tag riconoscibili dal browser di Microsoft. Usando la funzione Javascript document.createElement, l’elemento che viene passato come parametro è riconosciuto dal browser e le corrispondenti regole CSS vengono interpretate correttamente.
[javascript]
<script type="text/javascript">
document.createElement(‘header’);
document.createElement(‘footer’);
document.createElement(‘section’);
document.createElement(‘aside’);
document.createElement(‘nav’);
document.createElement(‘article’);
</script>
[/javascript]
Ovviamente chi non ha Javascript abilitato nel browser vedrà gli elementi HTML5 del sito senza formattazione.
Strumenti utili dal web
Su internet è possibile trovare molti strumenti utili che possono aiutarci a creare siti web con l’uso di elementi HTML5 senza doverci preoccupare della compatibilità tra browser.
Ecco due librerie Javascript utili e funzionanti per aiutarci nella battaglia con la compatibilità:
- Modernizr – http://www.modernizr.com
- HTML5 Shiv – http://remysharp.com/2009/01/07/html5-enabling-script/
Il mio consiglio è di quello di utilizzare sempre più gli elementi HTML5 cercando di testare ogni aspetto su più browser possibile in modo da guadagnare un bagaglio personale che può aiutare ad analizzare e progettare un sito web.
