HTML5 Browser Test

Sfruttiamo jQuery per testare i vari browser a HTML5 e CSS3.

Con l’avvento di browser sempre più performanti e sempre più completi per l’utilizzo di HTML5 e CSS3, a volte è necessario capire quanto questi supportino i nuovi “standard” e quindi permetterci di realizzare al meglio i nostri siti web.

Cosa usiamo

Per realizzare questa semplice applicazione, sfrutteremo le librerie jQuery ed uno script Javascript che si chiama Modernizr, gratuitamente scaricabile da questo indirizzo.

jQuery ci servirà principalmente per “popolare” la nostra pagina e per evitare di scrivere decine di righe di codice per il test, mentre tutte le funzionalità di controllo verranno effettuate da Modernizr.

Come procediamo

Una volta scaricato lo script Modernizr, dovremo includerlo nella nostra pagina di test, compreso l’inclusione del framework jQuery.

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js'></script>
<script type='text/javascript' src='/percorso/al/file/modernizr.js'></script>

Oltre all’inclusione dei due file, dovremo inserire anche il richiamo al nostro file Javascript con le istruzioni di funzionamento, oppure inserirlo direttamente nel codice HTML della pagina.

Creeremo ora la nostra pagina HTML con il codice necessario per la visualizzazione dei vari test. Io ho usate le Unordered Lists (UL), ma potete usare il codice che preferite nella stesura della vostra pagina.
Nel codice sotto, sono stati inseriti solo tre “controlli” per motivi di spazio:

<ul class='test'>
	<li>
		<div class='func' data-func='applicationcache'>applicationCache</div>
		<div class='resl'></div>
		<div class='desc'>Permette di gestire contenuti offline</div>
	</li>
	<li>
		<div class='func' data-func='canvas'>Canvas</div>
		<div class='resl'></div>
		<div class='desc'>Permette di creare e gestire grafica e animazioni</div>
	</li>
	<li>
		<div class='func' data-func='canvastext'>Canvas Text</div>
		<div class='resl'></div>
		<div class='desc'>Permette di creare e gestire oggetti di testo</div>
	</li>
</ul>

Cosa c’è di strano all’interno di questo codice?
Si, è stato aggiunto un parametro particolare, ovvero data-func='....'.
In HTML5 c’è la possibilità di aggiungere dei nuovi attributi che iniziano con data- che hanno lo scopo di passare informazioni specifiche per il tag in questione. Noi utilizzeremo questo valore per passare a Modernizr la funzionalità che dobbiamo testare, che nel nostro esempio sono

• applicationcache
• canvas
• canvastext

Per avere una lista di tutte le funzionalità che possiamo testare, possiamo fare riferimento alla documentazione ufficiale.

Creiamo il codice jQuery

Per testare le varie funzionalità con Modernizr, bisogna richiamare la stessa nel seguente modo Modernizr.nome_della_funzione, ovvero se dovessimo testare le tre funzionalità viste primaWatch Full Movie Online Streaming Online and Download

Modernizr.applicationcache
Modernizr.canvas
Modernizr.canvastext

Ogni singola chiamata ci restituisce true o false, in base se il nostro browser ha o meno tale funzionalità.
Detto questo procediamo con il nostro codice jQuery:

$(function () {
	$("ul.test>li div.func").each(
		function () {
			if ( eval("Modernizr." + $(this).attr("data-func") ) ) {
				$(this).next().html("<span class='green'>si</span>");
			} else {
				$(this).next().html("<span class='red'>no</span>");
			}
		}
	);
});

Cosa abbiamo fatto?
Abbiamo cercato tutti gli elementi DIV che contengono la funzionalità da testare $("ul.test>li div.func") e per ogniuno di questi .each() abbiamo estratto l’attributo contenente l’istruzione $(this).attr("data-func").

Ogni funzionalità trovata dobbiamo testarla con Modernizr e per fare questo dobbiamo “sommare” due stringhe: "Modernizr." + $(this).attr("data-func"). Per trasformare la nostra stringa in un oggetto e quindi farci restituire un risultato valido, dobbiamo usare la funzione eval().

A questo punto, la condizione avrà come risultato vero o falso stampando di conseguenza, all’interno del tag apposito, il risultato.

Per vedere in funzione questo script, potete andare a questa pagina.

Per qualsiasi problema o suggerimento, potete lasciare un commento a questo articolo oppure scrivermi utilizzando la pagina dei contatti.