Rimuovere gli spazi bianchi da campi di testo e textarea
Roger Johansson di 456bereastreet.com ha recentemente pubblicato un nuovo interessante articolo dedicato alla rimozione degli spazi bianchi attorno alle textarea e ai campi di input testuali; il post nascerebbe da una recente osservazione dello sviluppatore che ha rivelato di non aver mai fatto caso alla quantità di spazio bianco che viene generata automaticamente lungo i bordi degli elementi considerati.
Questo fenomeno può essere facilmente adattato sulla base dei propri progetti in modo da controllare e personalizzare gli spazi bianchi, il Webdesigner dovrà però tenere conto delle immancabili problematiche cross-browser che potrebbero dar luogo a risultati imprevisti dovuti a comportamenti differenti in seguito alla definizione delle regole di stile; a questo scopo Johansson propone una semplice soluzione che dovrebbe consentire di rendere omogeneo il rendering sui vari programmi di navigazione:
input,
textarea {
margin:0;
vertical-align:bottom;
}
La necessità di tale fix deriverebbe dal fatto che ogni browser ha un suo diverso modo di gestire gli spazi bianchi relativi ai campi di testo:
- Internet Explorer non li aggiungerebbe o li inserirebbe in modo impercettibile;
- Firefox si limiterebbe ad aggiungere un limitato spazio verticale attorno alle textarea, ciò non avverrebbe invece per gli input text;
- Safari, Chrome e le altre applicazioni basate sull’engine WebKit inserirebbero spazi bianchi intorno ad entrambi gli elementi;
- Opera aggiungerebbe spazi bianchi su Mac Os X ma non su Windows.
Naturalmente, il fix proposto potrà essere personalizzato, se per esempio si volesse applicare la regola soltanto agli input text si dovrebbe sostituire “input” con “input[type=”text”]”.
