JavaScript  »  Articoli  »  Mondo Javascript 

Progressive enhancement

Il progressive enhancement è divenuto noto -almeno il nome- nel 2003, quando Steve Champeon iniziò ad usarlo su Webmonkey e durante la conferenza SXSW di Austin. Esso inizia esattamente all'estremo opposto rispetto alla graceful degradation: si inizia con la versione più di base, poi si aggiungono miglioramenti per quelli che hanno dispositivi in grado di gestirli. Ancora una volta, facendo il confronto con gli approcci al web design, il progressive enhancement è paragonabile all'approccio strutturale. Che inizia con il markup e aggiunge poi gli stili (cosa che è di per sé un esempio di progressive enhancement).

La più comune situazione riscontrabile in fatto di progressive enhancement è rappresentata dai fogli di stile CSS esterni. Essi vengono ignorati dai browser che non supportano i CSS, che così ottengono solo il semplice markup e lo rendono a schermo nel modo conseguente. Vengono però applicati dai browser più avanzati, migliorando così sia l'estetica sia l'usabilità per la maggior parte degli utenti.

Altri esempi di progressive enhancement sono le varie tecniche di image replacement, il metodo Flash satay e (talvolta) Ajax.

Il progressive enhancement, relativamente a Javascript, si sta sempre più diffondendo negli ultimi tempi. L'approccio è noto con il nome di 'Javascript non intrusivo'. Un script non intrusivo è ignorato dai dispositivi che non lo supportano, ma è applicato da quelli più avanzati. Esattamente come un foglio di stile esterno.

Rivediamo il menu visto in precedenza. Come dovrebbe essere implementato secondo i dettami del progressive enhancement?

Inizieremo con il creare il markup, cercando di ottenere una sorta di minimo comun denominatore: HTML. Un menu di navigazione è in fin dei conti e semanticamente una lista di link. L'ordine di questi link non influisce sul significato della lista nel suo complesso. Perciò sarà una lista non ordinata:

Questo codice funzionerà su tutti i browser, da Lynx e Mosaic fino all'ultima versione di Opera, Firefox e Safari. Googlebot e gli spider suoi cugini lo ameranno ugualmente.

Il passo successivo è di aggiungere dei miglioramenti per la vasta maggioranza degli utenti i cui browser supportano i CSS. Aggiungiamo infatti una serie di regole in un CSS esterno per dare uno stile al menu. Dopo aver aggiunto l'elemento link con un riferimento al foglio di stile esterno, il menu apparirà sicuramente migliore alla maggior parte dei visitatori. Questa aggiunta, però, non arreca alcun danno a chi usa Lynx o a Googlebot (Ok, dovranno scaricare qualche byte in più, ma è un download trascurabile anche su lente connessioni dial-up o su un cellulare GSM).

Possiamo però ulteriormente migliorare il menu aggiungendo l'effetto dinamico che espande le voci principali e mostra i sotto-menu, facendo ricorso ad un Javascript non intrusivo. Per ridurre il peso del codice cominciamo ad assegnare un id agli elementi della lista:

Altri articoli

Altre guide

Altre newsletter