Corsi on-line

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”]”.

Post correlati
I più letti del mese
Tematiche