Vi proponiamo una lista di 8 piccoli trucchi da usare se state muovendo i primi passi con i CSS, alcuni saranno sicuramente già noti, altri potranno risultarvi nuovi. In ogni caso, si tratta di suggerimenti che possono sempre rivelarsi utili in caso di dubbi.

1. Centrare verticalmente con la proprietà line-height

Croce e delizia di tutti i web designer, l’allineamento verticale con i CSS può essere risolto in maniera indolore nel caso in cui abbiamo a che fare con un DIV ad altezza fissa:

#nomediv p {height: 200px; line-height: 200px; }

Ricordate che il valore di line-height dev’essere pari al valore dell’altezza del DIV.

2. Evitare che immagini troppo grandi in un blog o in un forum possano “spaginare” il vostro layout fisso

Se volete evitare questa eventualità, potete impostare la proprietà overflow su hidden. La parte in eccesso dell’immagine verrà nascosta, ma il vostro layout rimarrà intatto.

#nomediv { overflow: hidden; }

3. Evitare le interruzioni di riga nei link

Per disabilitare l’andata a capo nei link si può sfruttare la proprietà “white-space” del CSS:

a { white-space: nowrap; }

4. Visualizzare sempre la barra di scorrimento verticale in Firefox

Firefox visualizza la barra di scorrimento verticale solamente se la pagina che si sta visualizzando richiede uno scroll verticale. Questo comportamento può causare uno sgradevole effetto di spostamento orizzontale se, ad esempio, si passa dalla home page che non richiede lo scroll ad una pagina interna del sito che invece lo richiede.
Per visualizzare sempre e comunque la barra di scorrimento verticale possiamo procedere come segue:

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

5. Centrare gli elementi “block” orizzontalmente

Semplicissimo, basta aggiungere la seguente riga alle proprietà dell’elemento:

#nomediv {margin: 0px auto; }

6. Rimuovere la barra di scorrimento verticale di una text area in Internet Explorer

Per evitare che Internet Explorer visualizzi la barra di scorrimento verticale in una text area, si può impostare la proprietà overflow come segue:

textarea { overflow: auto; }

7. Forzare le interruzioni di pagina nella stampa

Se si vuole suddividere il contenuto stampato su più pagine, è possibile forzare le interruzioni di pagina applicando questa proprietà alle intestazioni:

h2 { page-break-before: always; }

8. Rimuovere i bordi puntinati intorno ai link

Benchè non sia molto consigliato dal punto di vista dell’accessibilità e dell’usabilità, è possibile rimuovere il bordino puntinato che viene applicato dai browser ai link appena cliccati:

a:link, a:focus { outline: none }



Altri articoli che potrebbero interessarti