Shaun Inman ha presentato sul suo blog una tecnica per modificare l'aspetto di campi di form di tipo file (<input type="file">). àˆ un caso per certi versi esemplare rispetto a due diversi ambiti.
La tecnica è basata su una combinazione di CSS e Javascript, e rispetta in pieno i dettami del cosiddetto progressive enhancement. Se Javascript è disabilitato e sui browser su cui non funziona, tutto degrada senza inficiare la funzionalità . Di seguito uno screenshot dell'esempio su Safari (supportato) e Opera (non supportato):
Leggendo il post troverete tutti i dettagli tecnici. La base è rappresentata da questo semplice markup HTML:
<label class="cabinet">
<input type="file" class="file" />
</label>
e da queste regole CSS:
.SI-FILES-STYLIZED label.cabinet
{
width: 79px;
height: 22px;
background: url(btn-choose-file.gif) 0 0 no-repeat;
display: block;
overflow: hidden;
cursor: pointer;
}
.SI-FILES-STYLIZED label.cabinet input.file
{
position: relative;
height: 100%;
width: auto;
opacity: 0;
-moz-opacity: 0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
}
Tramite il CSS si imposta un'immagine di sfondo per l'elemento label e poi si nasconde l'input sfruttando l'opacità (che è uguale a 0). In questo modo, a differenza di quanto avviene con display:none o visibility:hidden, il campo risulta comunque cliccabile. Il resto è svolto dal Javascript, che va attivato con una dichiarazione del tipo SI.Files.stylizeAll();.
Tutto bene? Sotto l'aspetto puramente estetico/visuale forse sì. Quel che balza subito agli occhi però è che la tecnica pone un immediato problema di usabilità . In questo tipo di input è presente di default una sezione accanto al pulsante che visualizza il percorso locale del file selezionato: è una forma di feedback e controllo indispensabile e che nell'esempio realizzato da Inman si perde (fatto di cui l'autore è ovviamente consapevole come si evince dai commenti).
Con questo arriviamo al secondo motivo di esemplarità che un esperimento come questo può sollevare. La tentazione di agire sull'aspetto grafico dei form è forte, ma i rischi connessi sono tanti e non trascurabili.
Per la cronaca, scorrendo la lista dei commenti si scopre che: qualcosa di simile era stato già creato e che sul sito di Disney UK è stato in qualche modo risolto il problema del feedback visuale rispetto al nome e al percorso del file. Si parta da questa pagina e si selezioni dalla tendina in basso l'opzione 'Technical question', per poi provare a inviare un file usando il pulsante 'Browse' (che è un input di tipo file racchiuso però da uno span).