Tre propriet=E0 speciali: display, float clear | = Guida CSS

Tre propriet=E0=20 speciali: display, float clear =

Le tre propriet=E0 che esamineremo in questa lezione = possono=20 modificare radicalmente la presentazione del documento. = Sono,=20 dunque, strumenti potenti ma come quei giocattoli un p=F2 = pericolosi=20 vanno usati con molta cautela e sapendo bene cosa si fa, = tenendo=20 anche conto di serie implicazioni a livello di rendering tra = i=20 diversi browser.

display

Torniamo per un attimo alla prima lezione. Avevamo = chiarito in=20 quella sede la fondamenatle distinzione tra elementi = blocco,=20 inline e lista che =E8 alla base di (X)HTML. = Bene,=20 quello che sembrava un assioma inconfutabile, pu=F2 essere = sconvolto=20 con l'uso della propriet=E0 display. Essa ha una = sola, semplice=20 funzione: definire il trattamento e la presentazione di un = elemento.=20 Fin quando non la si usa ognuno segue la sua natura e il suo = comportamento standard, ma con display possiamo = intervenire=20 su di esso e in certi casi ribaltarlo. La propriet=E0 =E8 = ereditata.

Sintassi

<selettore> {display: = <valore>;}

Valori

La lista dei possibili valori =E8 lunghissima. Solo = alcuni di essi=20 sono per=F2 di normale utilizzo e supportati:

inline. Valore di default. L'elemento assume le = caratteristiche degli elementi inline.=20
block. L'elemento viene trattato come un = elemento=20 blocco.=20
list-item. L'elemento si trasforma in un = elemento=20 lista.=20
run-in. L'elemento viene incorporato e inserito = all'inizio del blocco seguente. L'effetto dovrebbe essere = simile a=20 quello visto per le liste quando si usa il valore = inside=20 per il marcatore. Il valore =E8 supportato solo da = Opera 5/6 e=20 parzialmente da Explorer 5 Mac.=20
compact. L'elemento viene piazzato al fianco di = un=20 altro. Non supportato da nessun browser.=20
marker. Questo valore fa s=EC che il contenuto = generato=20 con gli pseudo-elementi :before e :after sia = trattato come un marcatore di liste. Non supportato da = nessun=20 browser.=20
none. L'elemento non viene mostrato. O meglio: = =E8 come=20 se non fosse nemmeno presente nel documento, in quanto non = genera=20 alcun box. Diversa, come vedremo, la propriet=E0=20 visibility:hidden, che invece si limita a = nascondere=20 l'elemento.

Una serie di valori fa riferimento alla possibilit=E0 di = impostare=20 il display degli elementi come elementi di una tabella. tali = valori=20 trovano un supporto adeguato solo in Mozilla:

Esempi

Nel documento di esempio abbiamo verificato = alcuni=20 casi interessanti nell'uso della propriet=E0, limitandoci ai = valori=20 sufficientemente supportati e utili. Da essi potete capire = il=20 funzionamento del meccanismo.

Nel suo primo manuale sui CSS Eric Meyer si chiede:"Ma = perch=E8=20 esiste la propriet=E0 display?". Domanda legittima. A che = serve=20 cambiare l'ordine delle cose? Se ho a disposizione le liste, = perch=E8=20 devo impostare un paragrafo o un titolo come un list-item? = Vero. Ma=20 altri casi meno fantasiosi sono da prendere in = considerazione. Le=20 immagini, per esempio, sono per loro natura elementi inline, = si=20 inseriscono nel testo ed =E8 talvolta complicato gestirne il = posizionamento. Se volessi mostrarle in una riga tutta per = loro mi=20 basterebbe impostare il display su block, cos=EC:

img {display: block;}

Per non parlare dell'utilit=E0 del valore none. = Volete una=20 pagina alternativa fatta solo di testo in 10 secondi? = Facile.=20 Costruite un CSS alternativo dove imposterete questa = regola:

img {display: none;}

Nella pagina principale mettete un bel link: "Versione = solo=20 testo" e ci attaccate uno javascipt per caricare il CSS = alternativo.=20 Fatto. Un'interessante applicazione di questa propriet=E0 la = trovate=20 anche nell'articolo "Stampe perfette con i CSS".

La ver=E0 utilit=E0 della propriet=E0 display, = emerge comunque=20 in linguaggi non strutturali com XML. Uno dei modi per = rendere un=20 file XML in un browser =E8 proprio quello di formattarlo con = un CSS.=20 Ma gli elementi XML non ci dicono nulla su presentazione e=20 struttura, a differenza di (X)HTML! Se trovo H1 so = cosa=20 significa e come verr=E0 mostrato. Ma questo documento? = Codice:

<guide>
<guide_linguaggi_web>
<guida&= gt;HTML</guida>
<guida>CSS</guida>
</guide_lin= guaggi_web>
<guide_scripting>
<guida>Javascript</= guida>
<guida>VBScript</guida>
</guide_scripting&= gt;
</guide>

Nessuna informazione sulla presentazione. L'unico modo = che ho per=20 stabilire come rendere tali elementi =E8 tramite la = propriet=E0=20 display. Ma questo =E8 un discorso non proprio = attinenente a=20 questa guida. Basta l'accenno.

float

Con questa propriet=E0 =E8 possibile rimuovere un = elemento dal=20 normale flusso del docuemnto e spostarlo su uno dei lati = (destro o=20 sinistro) del suo elemento contenitore. Il contenuto che = circonda=20 l'elemento scorrer=E0 intorno ad esso sul lato opposto = rispetto a=20 quello indicato come valore di float. La propriet=E0 = non =E8=20 ereditata.

Il float =E8 un altro caso di funzionalit=E0 presenti in = HTML solo=20 per certi elementi che i CSS hanno esteso a tutti gli altri = (abbiamo=20 gi=E0 incontrato il padding). Non spaventatevi della = definizione di=20 prima. Il floating =E8 un'operazione che veniva fatta in = HTML sulle=20 immagini. Bastava usare nel tag IMG l'attributo = align=20 e impostare come valore left, right, middle, etc. = Esempio.

Sintassi

<selettore> {float: = <valore>;}

Valori

left. L'elemento viene spostato sul lato = sinistro del=20 box contenitore, il contenuto scorre a destra.=20
right. L'elemento viene spostato sul lato = destro, il=20 contenuto scorre a sinistra.=20
none. Valore iniziale e di default in mancanza = di una=20 dichiarazione esplicita. L'elemento mantiene la sua = posizione=20 normale.

Una nota importantissima. Se usate il float con le = immagini non=20 avete problemi perch=E8 esse hanno una dimensione intrinseca = che il=20 browser riconosce. Ma se lo applicate ad altri elementi = dovete=20 esplicitamente impostare una dimensione orizzontale con = la=20 propriet=E0 width.

Esempi

div {width: 200px; = float:right;}
img.foto {float:=20 left;}

In questa pagina esempi, codice e commenti. =

clear

La propriet=E0 clear serve a impedire che al = fianco di un=20 elemento compaiano altri elementi con il float. Si applica = solo agli=20 elementi blocco e non =E8 ereditata.

L'origine di tale propriet=E0 =E8 questa: visto che il = float sposta=20 un elemento dal flusso normale del docuemento, =E8 possibile = che esso=20 venga a trovarsi in posizioni non desiderate, magari al = fianco di=20 altri elementi che vogliamo invece tenere separati. clear = risolve questo problema.

Sintassi

<selettore> {clear: = <valore>;}

Valori

none. Gli elementi con float possono stare a = destra e=20 sinistra dell'elemento.=20
left. Si impedisce il posizionamento a = sinistra.=20
right. Si impedisce il posizionamento a destra. =
both. Si impedisce il posizionamento su = entrambi i=20 lati.

Esempi

h1 {clear: both;}

Per un'applicazione si veda l'ultimo esempio del documento gi=E0 linkato per il = float.

Le regole che gestiscono float e clear sono = davvero=20 complesse, soprattutto quando si usano per effettuare il=20 posizionamento dinamico. Le regole di base sono comunque = queste e=20 sono pi=F9 che sufficienti per iniziare a usare le due = propriet=E0. Vi=20 propongo un paio di letture interessanti sull'argomento:

Tutorial sul floating. Ottima ed = esaustiva=20 lettura. Su WebReference.

Un sito ridimensionabile con i CSS: parte = III. Per=20 vedere un'applicazione concreta del floating nel = posizionamento=20 dinamico.

L=20 e z i o n e s u c c e s s i v=20 = a
[ S o m m a r i = o=20 ] =