CSS: visibilità e overflow

Le proprietà CSS overflow e visibility appartengono al capitolo sugli effetti visuali delle specifiche CSS 2.1. Vediamole in dettaglio.

Overflow: la proprietà overflow

In genere il contenuto di un box di blocco è confinato nei limiti del contenuto del box. In alcuni casi il contenuto può fuoriuscire, ossia trovarsi fuori dal box.

'overflow'

Valore:	visible | hidden | scroll | auto | inherit
Iniziale:	visible
Si applica a:	elementi di blocco non rimpiazzati, celle di tabella ed elementi inline-block
Ereditata:	no
Percentuali:	N/A
Media:	visuale
Valore calcolato:	come specificato

Questa proprietà specifica se il contenuto di un elemento di blocco viene tagliato quando fuoriesce dal box. I valori sono:

visible

Il contenuto non è tagliato e viene reso fuori dal box.

hidden

Questo valore indica che il contenuto viene tagliato e che non viene dato un meccanismo di scorrimento per poterlo vedere.

scroll

Questo valore indica che il contenuto viene tagliato e che il browser fornisce delle barre di scorrimento per poterlo vedere.

auto

Il comportamento dipende dal browser, che comunque dovrebbe fornire un meccanismo di scorrimento.

Esempio:

.box {
	border-style: solid;
	width: 60%;
	height: 50px;
	overflow: auto;
}

Visibilità: la proprietà visibility

'visibility'

Valore:	visible | hidden | collapse | inherit
Iniziale:	visible
Si applica a:	tutti gli elementi
Ereditata:	si
Percentuali:	N/A
Media:	visuale
Valore calcolato:	come specificato

La proprietà 'visibility' specifica se i box generati da un elemento debbano essere resi o meno. I box invisibili influenzano il layout, a differenza del valore 'none' della proprietà 'display'. I valori sono:

visible

Il box è visibile.

hidden

Il box è invisibile, ma influenza ancora il layout.

collapse

Usato per alcuni elementi di tabella.

Esempio:

.hide {
    visibility: hidden;
}