Progressive enhancement per i CSS

Insieme al concetto di graceful degradation, quello di progressive enhancement è divenuto nel tempo un caposaldo di una progettazione web attenta all'accessibilità  e alla fruizione di siti e applicazioni sul maggior numero possibile di device e piattaforme.

Tradizionalmente associato all'inclusione di interazioni in Javascript, il progressive enhancement prevede un approccio al design così espresso, in modo semplice, da Tommy Olson in un articolo tradotto a suo tempo per HTML.it:

[Il progressive enhancement] 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.

John Resig ha pubblicato recentemente sul suo blog un post in cui presenta una tecnica elaborata da Filament Group (web agency di Boston). Secondo le parole di Resig, nella tecnica in questione

il progressive enhancement è applicato avendo in mente la presentazione della pagina con i fogli di stile piuttosto che da una prospettiva basata esclusivamente sull'uso di Javascript.

Vediamo di cosa si tratta.

Tutto si basa su un file Javascript che verifica la capacità  del device con cui si accede alla pagina di gestire al meglio alcune fondamentali proprietà  CSS: il box-model, i posizionamenti, float e clear, overflow e line-height. Viene anche testato il supporto di alcune proprietà  Javascript: l'attraversamento del DOM, la capacità  di interpretare il ridimensionamento della finestra, la possibilità  di stampare direttamente dal browser.

Se il browser non passa il test, viene fornita una versione della pagina con presentazione minimale e senza interazioni Javascript, ma comunque in grado di far fruire il contenuto. Se il test viene superato, lo script, con una serie di interventi via DOM al markup di base, prepara la pagina ad accogliere il progressive enhancement e quindi a fornire agli utenti con dispositivi più capaci una versione migliorata (per esempio, viene aggiunta a body la classe enhanced, ottenendo quindi body.enhanced, per applicare stili più complessi per i dispositivi capaci). Ma per i dettagli implementativi vi rimando al post di Resig e a quello originale.

In fondo a quest'ultimo è presente una tabella riassuntiva dei test svolti dal team di Filament rispetto ai principali browser e sistemi operativi.