8 trucchi CSS di una sola riga

Le soluzioni semplici sono spesso le più efficaci

Questa è la traduzione dell’articolo 8 Premium One Line Css Tips di Alen Grakalic pubblicato originariamente su CSS Globe. La traduzione viene qui presentata con il consenso dell’editore e dell’autore.

Le migliori soluzioni sono spesso le più semplici. Ecco una lista di 8 tecniche e trucchetti CSS che contengono solo una proprietà.

1. Centrare verticalmente con line-height

line-height:24px;

Quando avete un elemento contenitore con altezza fissa, potete usare la proprietà line-height per centrare verticalmente il contenuto. Ecco una demo.

2. Impedire al contenuto eccedente di rovinare il layout

#main{
overflow:hidden;
}

Quando del contenuto molto grande (per esempio un’immagine di grandi dimensioni) è inserito in un contenitore a larghezza fissa e a cui sia applicato il float, può rovinare il layout. Per prevenire tutto ciò usate questo trucco. Nasconderà una parte del contenuto, ma almeno la struttura del layout rimarrà intatta. Su questo argomento ho scritto tempo fa un articolo specifico.

3. Prevenire l’interruzione di riga nei link

a{
white-space:nowrap;
}

Questo piccolo trucco impedirà l’interruzione forzata della riga sui vostri link. Suggerisco di usarlo con testi lunghi per evitare di avere link che si estendono su due righe.

4. Mostrare sempre la scrollbar su Firefox

html{
overflow:-moz-scrollbars-vertical;
}

Firefox, di default, nasconde sempre la scrollbar. Così, quando navigate su un sito che ha differenti altezze di pagina, potrete osservare uno spostamento orizzontale. Questo piccolo snippet di codice farà sì che la scrollbar sia sempre visibile, prevenendo dunque lo spostamento orizzontale.

5. Centrare elementi block orizzontalmente

margin:0 auto;

Su tutti i browser moderni questa semplice linea di codice è sufficiente per centrare orizzontalmente elementi di tipo block.

6. Rimuovere la scrollbar verticale sulle textarea in IE

textarea{
overflow:auto;
}

Su IE, le textarea hanno di default una scrollbar verticale visibile. Se volete rimuoverla usate questo codice.

7. Forzare l’interruzione di pagina nella stampa

h2{
page-break-before:always;
}

Con questa riga di codice potete controllare i punti in cui volete inserire l’interruzione delle pagine in fase di stampa del documento.

8. Rimuovere i bordi attorno ai link

a:active, a:focus{
outline:none;
}

Ho trovato questo trucco qui. Rimuove il bordo a puntini dai link in stato di focus e active.