Il blog di Francesco D'Aguanno

8 trucchi CSS da una sola riga ciascuno

Pubblicato da Dag il giorno 10/03/2008.

Ecco alcuni semplici trucchi per risolvere con una riga di codice alcune piccole grandi problematiche affrontate con i fogli di stile; con una sola proprietà, possiamo gestire la scrollbar di Firefox, i bordi dei link attivi, l'allineamento orizzontale etc.

1. Allineamento centrato verticalmente. Con la proprietà line-height si risolve il problema dell'allineamento verticale al centro.
   a{line-height:24px;}
2. Layout compromesso da elementi fuori misura. Con la proprietà overflow, si può evitare che elementi troppo grandi vadano a deformare il layout.
   div.content{overflow:hidden;}
3. Evitare linee a capo. Per evitare i ritorni a capo all'interno delle celle di una tabella o semplicemente nel bel mezzo di un link, si può utilizzare la proprietà white-space.
   td{white-space:nowrap;}
4. Mostrare sempre le scrollbar di Firefox. Per ammorbidire le differenze fra Firefox e Internet Explorer, è possibile mostrare sempre le scrollbar di Mozilla Firefox; di nuovo grazie alla proprietà overflow.
   html{overflow:-moz-scrollbars-vertical;}
5. Allineare al centro orizzontalmente elementi di tipo block. Per allineare al centro i div e gli altri elementi di tipo block, si può sfruttare la proprietà margin.
   div.content{margin:0 auto;}
6. Rimuovere la scrollbar verticale dalla textarea su Internet Explorer. Per omogeneizzare le textarea di Internet Explorer con quelle di Firefox, è possibile rimuovere la scrollbar verticale del browser di casa Microsoft utilizzando la proprietà overflow.
   textarea{overflow:auto;}
7. Forzare le interruzioni di pagina in stampa. Per migliorare le stampe è possibile forzare le interruzioni di pagina con la proprietà page-break-before.
   h2{page-break-before:always;}
8. Rimuovere i bordi dai link attivi. Per rimuovere gli antiestetici bordi dai link attivi, si può ricorrere all'uso della proprietà outline.
   a:active, a:focus{outline:none;}

Non è un vero e proprio cheatsheet, ma spero possiate trovarlo utile.

Post scritto da Dag