Introduzione ai CSS - Overflow, clip e visibility
Tuesday 5 February 2008 Marco Bertoni, ultimo aggiornamento: Tuesday 19 August 2008.
Perché ciò che vedi a volte non è tutto.
La proprietà overflow
Quando un elemento è dimensionato in modo esplicito (per esempio div { width: 300px;}) c'è il rischio che non sia sufficientemente ampio per il contenuto.
La proprietà overflow consente di controllare il comportamento del contenuto quando supera le dimensioni del contenitore.
I valori possibili sono:
visible- Il contenuto non è tagliato e può superare i confini del box.
hidden- La porzione di contenuto che eccede la dimensione del box è tagliata e resa invisibile all'utente.
scroll- Il contenuto è mantenuto all'interno del contenitore ma il browser fornisce un metodo per accedere alla porzione di contenuto non visibile (solitamente barre di scorrimento).
auto- La gestione del contenuto è lasciata al browser.
La proprietà clip
Consente di rendere visibile selettivamente una porzione rettangolare di un elemento. Si applica solo agli elementi posizionati in modo assoluto.
img { clip: rect(5px, 310px, 255px, 10px); }
Questa regola ritaglia la parte dell'immagine che inizia a 5 pixel dal top e 10 pixel da sinistra ed è larga 300 pixel (310 - 10) e alta 250 pixel (255 - 5).
La proprietà visibility
Controlla la visibilità degli elementi. Il valore visible rende gli elementi visibili, il valore hidden li rende trasparenti.
La proprietà visibility non elimina lo spazio occupato dagli elementi al contrario della proprietà display che, se applicata con il valore none, letteralmente rimuove l'elemento dal documento.
Il valore collapse si applica alle tabelle.
IE 7 e le versioni precedenti non supportano il valore collapse.
