11 Effetti visivi

Sommario

11.1 Eccedenza e ritaglio

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'

'overflow'
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

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:

visible
Questo valore indica che il contenuto non è ritagliato, ossia può essere reso fuori del riquadrato a blocco.
hidden
Questo valore indica che il contenuto è ritagliato e che nessun meccanismo di scorrimento [scrolling] dovrebbe essere fornito per vedere il contenuto al di fuori della regione di ritaglio; gli utenti non avranno accesso al contenuto ritagliato. La dimensione e la forma della regione di ritaglio sono specificate dalla proprietà 'clip'.
scroll
Questo valore indica che il contenuto è ritagliato e che se il programma utente usa un meccanismo di scorrimento visibile sullo schermo (come una barra di scorrimento o un meccanismo di panoramica [panner]), tale meccanismo dovrebbe essere visualizzato per un riquadrato, anche nel caso in cui il suo contenuto non viene ritagliato. Si evita in questo modo ogni problema con le barre di scorrimento che appaiono e scompaiono in un ambiente dinamico. Quando questo valore è specificato ed il media di arrivo è 'print' o 'projection', il contenuto in eccedenza dovrebbe essere stampato.
auto
Il comportamento del valore 'auto' dipende dal programma utente, ma dovrebbe fare in modo che venga fornito un meccanismo di scorrimento per i riquadrati in eccedenza.

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

Esempi(o):

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'.

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

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

auto
La regione di ritaglio ha la stessa dimensione e collocazione del riquadrato dell'elemento.
<shape>
Nei CSS2, l'unico valore di <shape> valido è: rect (<top> <right> <bottom> <left>) dove <top>, <bottom> <right>, e <left> specificano gli spostamenti dai rispettivi lati del riquadrato.

<top>, <right>, <bottom>, and <left> possono avere valore <length> o 'auto'. Lunghezze negative sono permesse. Il valore 'auto' sta ad indicare che un dato limite della regione di ritaglio sarà lo stesso del limite del riquadrato generato dell'elemento (ossia 'auto' è lo stesso che '0'.)

Quando le coordinate sono arrotondate in coordinate pixel, bisogna fare attenzione affinchè nessun pixel resti visibile quando <left> + <right> è uguale alla larghezza dell'elemento (o <top> + <bottom> eguaglia la sua altezza), e di contro che nessun pixel resti nascosto quando questi valori sono 0.

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.

Esempi(o):

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]

Nota. Nei CSS2, tutte le regioni di ritaglio sono rettangolari. Anticipiamo future estensioni per consentire un ritaglio non-rettangolare.

11.2 Visibilità: la proprietà 'visibility'

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

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:

visible
Il riquadrato generato è visibile.
hidden
Il riquadrato generato è invisibile (completamente trasparente), ma influenza ancora l'impaginazione.
collapse
Si prega di consultare la sezione sugli effetti dinamici per righe e colonne nelle tabelle. Se usato su elementi diversi da righe o colonne, 'collapse' ha lo stesso significato di 'hidden'.

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>