In questi giorni ho pensato a dei post sul web design e grafica da fare.
Apro con questo post sugli input che riguarda i tag HTML input, textarea e select e correlati, “visivamente” caselle di testo, bottoni etc.
Non so che sistema operativo usiate o browser ma ognuno ha le sue dichiarazioni grafiche di default.
Purtroppo mi è capitato di vedere alcuni siti o CMS o temi grafici che hanno personalizzato l’input senza tenere conto delle loro dichiarazioni di default.
Su Windows (almeno fino alla versione XP, Vista penso di averlo usato sì e no un’ora in totale e Seven mai usato) questo non è un problema e neanche su Mac da quanto ne so (neanche questo l’ho usato molto, al massimo iOS di iPod Touch).
Invece lo stesso non può essere detto dei Browser dei S.O. che usano un server X11, tra i quali si può citare GNU Linux.
Il problema è che ci sono moltissime combinazioni per esempio Gecko/GTK (es Firefox) o Webkit/GTK o Webkit/QT e non esiste un tema di default su cui contare o su un tema di default a maggioranza altrimenti (cosa comunque sbagliata).
Per esempio io ho provato un tema GTK chiamato Nodka Dark che personalizza anche gli input, rendendoli marroni/neri con il colore del testo grigio.
Ora supponiamo di usare il browser Firefox che usa il tema GTK e un tema di una chat che ha gli input con sfondo grigio ma non cambia il colore. Si ottiene così l’illeggibilità di ciò che si scrive, cosa che in qualsiasi applicazione ma soprattutto in una chat che richiede all’utente il continuo uso degli input rende difficile l’uso e il massimo godimento/fruizione dell’utente finale.
Perciò per riassumere quando si personalizzano gli input c’è da personalizzarli totalmente.
Questo riguarda input text, input password, select, textarea ma anche abbastanza gli elementi input ti tipo submit, reset e button.
Un altro problema correlato a questi tag è per esempio la personalizzazione degli input text e password che se si usa una sintassi simile a input { } intacca anche questi elementi che in pratica sono i bottoni.
La risoluzione del problema che prevede l’inserimento di questi tag in un div apposito non è sempre possibile e neanche la più corretta a mio parere.
Infatti tra i selettori CSS ufficiali del W3C ci sono anche i selettori per attributo.
Scrivendo per esempio input[type=submit] { } serve per selezionare gli input di tipo submit.
Questa è una regola molto utile e standard ma tuttavia una versione di Internet Explorer non la supporta mi pare, se non sbaglio la 6.
Spero che questi appunti siano di aiuto.