Progressive enhancement / Graceful degradation: quando usarli ed esempi pratici


Ricordo Chris Pruett al Google I/O a proposito dello sviluppo di giochi in tempo reale su android.
Il concetto ridondante di quel keynote è stato: “prediligere la flessibilità sulle performance finché questa non intacca la user experience”.
Quando sviluppo html e css risuona spesso questo concetto nella mia mente. Se potessi usare CSS3 liberamente otterrei maggior flessibilità, più velocità nel caricamento e migliorerei l’user experience generale.
Purtroppo successivamente si insinua nella mia mente un tarlo che logora la mia idea di flessibilità: il supporto crossbrowser (ed in particolare il supporto ai vecchi browser).
Fortunatamente due discussissime tecniche corrono in nostro aiuto: il loro scopo è simile, il risultato dovrebbe essere identico, ciò che fondamentalmente cambia è il modus operandi.
Lo scopo è di rendere i contenuti del progetto fruibili ad un pubblico più ampio possibile, intaccando il meno possibile l’esperienza di navigazione generale utilizzando due approcci differenti.
Graceful degradation (degrado grazioso) è quella tecnica che cerca di utilizzare al massimo le specifiche dei browser moderni, utilizzando appunto tutte quelle specifiche html5 e css3 che ci potrebbero semplificare la vita, creando poi un callback per i browser più ancestrali.
Ma la tecnica che preferisco, dato che mi ha dato meno problemi è la tecnica del Progressive enhancement. Il risultato è lo stesso ma utilizza un procedimento inverso. Si parte sviluppando per i browser medievali per poi “potenziare” il progetto per ottenere i vantaggi in termini di flessibilità, ux e velocità per i browser moderni.

Entrambe le tecniche implicano il fatto che in queste due categorie di browser (vecchi e moderni) il vostro sito sia visualizzato in maniera differente, è quindi comprensibile che queste tecniche non sono utilizzabili in tutte le circostanze.

Ultimamente abbiamo realizzato il sito della tipografia di un caro amico, ho quindi voluto usare il Progressive enhancement nei form del preventivo del sito dato che a mio avviso questo progetto era il candidato perfetto.

Scegliere il “candidato perfetto” è stato abbastanza semplice. Dipende principalmente da due fattori: il tipo di cliente e il tipo di audience.
In questo caso andavo sul sicuro dato che in questa tipografia utilizzano sistemi mac e quindi i browser utilizzabili sarebbero stati sicuramente nel gruppo dei “browser moderni” (Safari, Firefox, Chrome). Anche l’audience è ideale: un sito di una tipografia è principalmente utilizzato da agenzie pubblicitarie e designer: questi ultimi solitamente hanno una conoscenza informatica tale da utilizzare un browser moderno o abbastanza aggiornato.

Ma torniamo al discorso della flessibilità. Nel form che aveva progettato Cristina, i campi da compilare avevano uno stile ben preciso: il problema era che avevano diverse misure e tipologie. Dai menu a tendina (select) alle textarea animate che cambiano dimensione passando per diverse misure di campi semplici (input di testo).

Se utilizzassi i background per ottenere l’effetto del layout originale, dovrei utilizzare diverse immagini per simulare le misure oppure un markup molto complesso assieme a “pezzetti” dei campi.
Con i CSS3 potrei usare bordi arrotondati, gradienti e ombre non avendo problemi di sorta.

Il Markup

Avendo un doppio bordo ho bisogno di markup addizionale, non mi bastano i semplici input. Il codice html di base resta comunque semplice:

<div class=”inputcontainer”>
<div>
<input type=”text” name=”azienda”/>
</div>
</div>

Probabilmente questo markup basterebbe anche per usare una soluzione basata su immagini di background, ma tramite CSS3, mantenendo tutto “parametrico”, posso cambiare proprietà di un elemento (es. colori, dimensioni) senza aprire un editor di immagini. Come dicevo prima: flessibilità.

Il CSS

La fase successiva è ottenere un rendering decente nel peggiore dei browser… Lynx! Scherzo, ie6 (Internet Explorer 6)!

Questa è la regola finale del div più esterno
.inputcontainer{
width: 150px;
background: #ededed;
background: -webkit-gradient(linear,
left bottom, left top, from(rgb(235,235,235)), color-stop(0.6, rgb(240,240,240)), to(rgb(250, 250, 250)));
background: -moz-linear-gradient(
center bottom, rgb(235,235,235) 0%, rgb(240,240,240) 60%, rgb(250, 250, 250) 100%);
zoom : 1;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#f7f7f7′, endColorstr=’#f2f2f2′);
padding: 2px;
font-size: 12px;
float: left;
margin-right: 10px;
-webkit-border-radius : 5px;
-moz-border-radius : 5px;
}

Le parti che interessano a noi sono:
background: #ededed; lo sfondo di fallback, nel caso le regole non fossero supportate
zoom : 1;
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=’#f7f7f7′, endColorstr=’#f2f2f2′);
Con queste due proprietà facciamo in modo che su ie6/7 appaia un bel gradiente.

Ancora più internamente ecco la regola per il div figlio di .inputcontainer
.inputcontainer div{
border: 1px solid #fff;
height: 22px;
-webkit-border-radius : 5px;
-moz-border-radius : 5px;
-webkit-box-shadow : 0px 1px 1px #ddd inset,
0px 1px 1px #ccc;
-moz-box-shadow : 0px 1px 1px #ddd inset,
0px 1px 1px #ccc;
}
Tutte le proprietà oltre le prime 2 verranno ignorate da internet explorer (hanno tutte il prefisso del browser vendor).

E questa infine la regola dell’input vero e proprio:
.inputcontainer input{
font-size: 12px;
color: rgb(80, 80, 80);
z-index: 80;
background: transparent;
width: 115px;
margin-left: 4px;
height: 22px;
_height : 18px
}
Da notare lo sfondo trasparente e la proprietà con l’underscore (_height) per correggere unicamente la visualizzazione di Internet Explorer 6.

Alla fine di questa prima fase ecco come appare l’input su internet explorer 6:

Abbastanza decente a mio avviso.
Da qui in avanti inizia la fase di enhancement: ho già incollato le proprietà chiave anche per quanto riguarda i browser moderni:

background: -webkit-gradient(linear,
left bottom, left top, from(rgb(235,235,235)), color-stop(0.6, rgb(240,240,240)), to(rgb(250, 250, 250)));
background: -moz-linear-gradient(
center bottom, rgb(235,235,235) 0%, rgb(240,240,240) 60%, rgb(250, 250, 250) 100%);

Per le sfumature del div .inputcontainer, la regola deve purtroppo essere ridefinita sia per Firefox che per i browser webkit (Safari, Chrome, etc).

-webkit-border-radius : 5px;
-moz-border-radius : 5px;

Quella sopra è per i bordi arrotondati.

-webkit-box-shadow : 0px 1px 1px #ddd inset,
0px 1px 1px #ccc;
-moz-box-shadow : 0px 1px 1px #ddd inset,
0px 1px 1px #ccc;
Qui vorrei soffermarmi un po’ di più. È questa la regola che ha reso il campo di testo incredibilmente somigliante a quello del layout grafico. Con questa regola definisco delle ombre sia per i browser Mozilla che per quelli webkit.
Spezzo di seguito il valore della proprietà:
0px spostamento ombra da sinistra, può avere un valore negativo (e si sposta verso sinistra)
1px spostamento ombra dall’alto, anche questo può avere un valore negativo
1px questo valore indica quanto l’ombra si “espande” sfumando delicatamente al colore di background
#ddd questo è il colore dell’ombra (è la versione abbreviata del colore, sarebbe in realtà #dddddd)
inset questo valore se presente indica che l’ombra deve essere verso l’interno

A questo punto la parte ancora più interessante: un altro valore di ombra separato da virgola. Sì, in pratica si possono definire ombre multiple per ogni elemento in css3!

Ed ecco quindi gli input definitivi renderizzati da un browser webkit:

Quasi identici non trovate?

Il form completo lo trovate sul sito della tipografia Form Preventivo – Tipografia Geny Siracusa

Partendo da questa base la personalizzazione per i vari tipi di input è stata minima. Ogni nuova dimensione, nuova caratteristica (come ad esempio un minilabel in alcuni input) o i tasti dei menu a tendina funzionavano senza hack in tutti i browser, solo con un aspetto leggermente diverso.
L’audience poi mi ha permesso di puntare molto sulla versione per browser moderni e sarà una cosa a cui si dovrebbe fare molta attenzione quando si sceglie di utilizzare una di queste tecniche. Dopotutto internet explorer ha ancora una fetta di mercato troppo ampia, ma sapendo che su Vista e Seven (WIndows 7) molti utenti aggiorneranno il loro browser a Internet Explorer 9 che supporta una buona parte delle specifiche dei css3 possiamo sviluppare tranquillamente con uno sguardo rivolto al futuro.



3 commenti

  • zak
    | 12.10.10 - h 14.58

    Bel post ed ottimo risultato. Unica nota dolente è che il css non è valido.

    • |12.10.10 - h 15.11

      Hai ragione Zak, il css non è valido purtroppo.
      Si potrebbe fare un 2° foglio di stile chiamato enhancement.css con le regole css3.
      Io al giorno d’oggi preferisco concentrarmi su un html valido per motivi di accessibilità e compatibilità, mentre tralascio spesso la validazione del css concentrandomi più sulla compatibilità cross browser (anche per accessibilità) che sulla validazione vera e propria. (quante volte ho scritto validazione?)


  • Joe
    | 14.10.10 - h 10.33

    good points and the details are more precise than somewhere else, thanks.

    - Joe

Lascia un commento








We
  • Wordpress
  • Ford Focus
  • Monitor Samsung
;-) Grazie per la visita