Effetti visivi

Generalmente, il contenuto di un riquadrato a blocco è confinato nei limiti del contenuto del riquadrato. In alcuni casi, un riquadrato può eccedere [overflow, letteralmente "strabordare"], ossia il suo contenuto si viene a trovare in parte o completamente fuori dal riquadrato. Per esempio:

Ogni qualvolta ricorre un'eccedenza [overflow], la proprietà 'overflow' specifica come (e se) un riquadrato è ritagliato [clipped]. La proprietà 'clip' specifica la dimensione e la forma della regione di ritaglio. Specificare una piccola regione di ritaglio può causare il ritaglio di contenuti altrimenti visibili.

11.1.1 Eccedenza: la proprietà 'overflow'

Questa proprietà specifica se il contenuto di un elemento a livello di blocco è ritagliato quando supera il riquadrato dell'elemento (che si comporta come un blocco contenitore per il contenuto). I valori hanno i seguenti significati:

Anche se 'overflow' è impostato su 'visible', il contenuto può essere ritagliato nella finestra del documento di un programma utente dall'ambiente operativo nativo.

Si consideri il seguente esempio di una citazione di blocco (BLOCKQUOTE) che è troppo grande per il suo blocco contenitore (stabilito da un DIV). Ecco il documento sorgente:

<DIV>
<BLOCKQUOTE>
<P>I didn't like the play, but then I saw
it under adverse conditions - the curtain was up.
<DIV class="attributed-to">- Groucho Marx</DIV>
</BLOCKQUOTE>
</DIV>

Ecco il foglio di stile che controlla le dimensioni e lo stile dei riquadrati generati:

DIV { width : 100px; height: 100px;
      border: thin solid red;
      }

BLOCKQUOTE   { width : 125px; height : 100px;
      margin-top: 50px; margin-left: 50px; 
      border: thin dashed black
      }

DIV.attributed-to { text-align : right; }

Il valore iniziale di 'overflow' è 'visible', sicchè BLOCKQUOTE verrebbe formattato senza ritaglio, così:

Eccedenza resa [D]

Impostare 'overflow' su 'hidden' per l'elemento DIV, d'altro canto, fa in modo che BLOCKQUOTE sia ritagliato dal blocco contenitore:

Eccedenza ritagliata [D]

Un valore di 'scroll' direbbe ai programmi utente di supportare un meccanismo visibile di scorrimento, così da far accedere gli utenti al contenuto ritagliato.

11.1.2 Ritaglio: la proprietà 'clip'

Una regione di ritaglio definisce quale porzione del contenuto reso di un elemento è visibile. Per impostazione predefinita, la regione di ritaglio ha la stessa forma e dimensione del riquadrato dell'elemento. Tuttavia, la regione di ritaglio può essere modificata dalla proprietà 'clip'.

La proprietà 'clip' si applica agli elementi che hanno la proprietà 'overflow' con un valore diverso da 'visible'. I valori hanno i seguenti significati:

Gli antenati dell'elemento possono avere anch'essi regioni di ritaglio (nel caso che la loro proprietà 'overflow' non sia 'visible'); ciò che viene reso è l'intersezione delle varie regioni di ritaglio.

Se la regione di ritaglio supera i limiti della finestra del documento del programma utente, il contenuto può essere ritagliato in quella finestra dall'ambiente operativo nativo.

Le seguenti due regole:

P { clip: rect(5px, 10px, 10px, 5px); }
P { clip: rect(5px, -5px, 10px, 5px); }

creeranno le regioni rettangolari di ritaglio delimitate dalle linee tratteggiate nelle seguenti illustrazioni:

Due regioni di ritaglio [D]

11.2 Visibilità: la proprietà 'visibility'

La proprietà 'visibility' specifica se i riquadrati generati da un elemento sono resi o meno. I riquadrati invisibili influenzano ancora l'impaginazione [layout] (si imposti la proprietà 'display' su 'none' per sopprimere al contempo la generazione dei riquadrati). I valori hanno i seguenti significati:

Questa proprietà può essere usata in unione con script per creare effetti dinamici.

Nel seguente esempio, la pressione dei bottoni del modulo invoca [invoke, termine comunemente usato in programmazione] una funzione di script definita dall'utente che fa in modo che il corrispondente riquadrato diventi visibile e che l'altro sia nascosto. Poichè questi riquadrati hanno la stessa dimensione e posizione, l'effetto è che uno rimpiazza l'altro. (Il codice di script è in un ipotetico linguaggio di scripting. Può o non può avere effetto in un programma utente che supporti i CSS.)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<STYLE type="text/css">
<!--
   #container1 { position: absolute; 
                 top: 2in; left: 2in; width: 2in }
   #container2 { position: absolute; 
                 top: 2in; left: 2in; width: 2in;
                 visibility: hidden; }
-->
</STYLE>
</HEAD>
<BODY>
<P>Choose a suspect:</P>
<DIV id="container1">
   <IMG alt="Al Capone" 
        width="100" height="100" 
        src="suspect1.jpg">
   <P>Name: Al Capone</P>
   <P>Residence: Chicago</P>
</DIV>

<DIV id="container2">
   <IMG alt="Lucky Luciano" 
        width="100" height="100" 
        src="suspect2.jpg">
   <P>Name: Lucky Luciano</P>
   <P>Residence: New York</P>
</DIV>

<FORM method="post" 
      action="http://www.suspect.org/process-bums">
   <P>
   <INPUT name="Capone" type="button" 
          value="Capone" 
          onclick='show("container1");hide("container2")'>
   <INPUT name="Luciano" type="button" 
          value="Luciano" 
          onclick='show("container2");hide("container1")'>
</FORM>
</BODY>
</HTML>

Valore:	visible \| hidden \| scroll \| auto \| inherit
Iniziale:	visible
Si applica a:	elementi a livello di blocco e elementi rimpiazzati
Ereditata:	no
Percentuali:	N/A
Media:	visuale

Valore:	<shape> \| auto \| inherit
Iniziale:	auto
Si applica a:	elementi a livello di blocco ed elementi rimpiazzati
Ereditata:	no
Percentuali:	N/A
Media:	visuale

Valore:	visible \| hidden \| collapse \| inherit
Iniziale:	inherit
Si applica a:	tutti gli elementi
Ereditata:	no
Percentuali:	N/A
Media:	visuale

11 Effetti visivi

11.1 Eccedenza e ritaglio

11.1.1 Eccedenza: la proprietà 'overflow'

11.1.2 Ritaglio: la proprietà 'clip'

11.2 Visibilità: la proprietà 'visibility'