Soluzione agli HACK di CSS per Web Designer
11 aprile 2011 
Gli hack di css per i web designer sono tantissimi, spesso e volentieri riescono a farci perdere molto tempo visto che nella maggior parte dei casi sono problemi legati al cross-browser e all’interpretazione dei vari browser.
Per questo oggi ho raccolto quella serie soluzioni per i problemi che avvengono durante il taglio della grafica portando il tutto in css.
1) Bloccare ridimensionamento textarea
Con l’avvento di browser moderni Safari e Chrome, uno dei problemi maggiori e cercare di bloccare il ridimensionamento della textarea, che può scomporre le varie parti del layout.
Per bloccarle servono queste poche righe di codice:
1 2 3 | textarea { resize: none; } |
2) Eliminare il bordo delle input text
Altro problema legato ai css è quello di eliminare il bordo dalle input text. Infatti se da foglio di stile inseriamo border: none; il bordo non scompare.
Per eliminare il bordo per tutti i browser dobbiamo intervenire sul attributo style:
1 | <input type='text' style='border: none'> |
Tale regola vale pure nel caso volessimo colorare il bordo:
1 | <input type='text' style='border: 1px solid red'> |
3) Trasformare testo in Maiuscolo o Minuscolo
Nei nostri amati menu , per motivi legati al design può capitare spesso di voler trasformare un testo da maiuscolo a minuscolo o viceversa.
Per questo css di offre una serie di proprietà base capaci di trasformare i testi: text-trasform. I valori che usa sono uppercase , lowercase , capitalize.
1 2 3 4 5 6 7 8 9 10 11 | p.tutto_maiuscolo { text-transform: uppercase; } p.tutto_minuscolo { text-transform: lowercase; } p.prima_lettera_maiuscola { text-transform: capitalize; } |
4) Colorare la selezione di testo
Può capitare che in un nostro progetto, al visitatore voglia copiare a incollare il testo di una pagina, ma quando seleziona il testo , questo diventa in guardabile visto che lo sfondo della selezione lo scurisce troppo.
Per ovviare a questo problema di consiglio di utilizzare questa proprietà:
1 2 3 4 5 6 7 8 9 | ::selection { /* solo per safari e chrome */ background: #cc0000; } ::-moz-selection { /* solo per firefox mozilla */ background: #cc0000; } |
5) Eliminare selezione dalle Input dei form
Sicuramente vi sarà capitato di navigare con Google Chrome e selezionare una qualsiasi input di form, e vedere quel fastidioso bordo attorno , che sta a segnalarci la selezione di un campo di modulo.
Per eliminarlo basta inserire queste poche righe di codice:
1 2 3 | input, input:focus { outline-width:0; } |
6) Nascondere scroll bar dal browser
Può capitare di voler eliminare la scroll bar dai browser per tantissimi motivi, un esempio potrebbe essere realizzare un sito fatto in jquery con scorrimento verticale, attraverso qualche plugin.
Per nascondere la scrollbar da tutti i browser possiamo usare queste semplici regole css:
1 2 3 | body, html { overflow: hidden; } |
Vi è piaciuto l’articolo ? Volete dire la vostra ? Scrivete un commento e condividete 
Potresti trovare interessante anche
Oppure usare il css reset di yahoo ?