Sei qui: CSS Zibaldone

Emulare fieldset con i CSS

Gli elementi fieldset e legend sono parte dei moduli (form) (X)HTML. In particolare l'elemento fieldset serve a raggruppare campi con caratteristiche comuni. In questo esempio potete vedere un modulo con tali elementi.

Come si può vedere dall'esempio, l'effetto dei due elementi combinati è caratteristico, e ha spinto alcuni ad usarli per ottenere effetti presentazionali che vanno oltre il contesto dei moduli. Si consideri il seguente codice (X)HTML:

<fieldset>
<legend>Titolo sezione</legend>
<p>Lorem ipsum dolor sit amet...</p>
</fieldset>

Il seguente codice produrrà un effetto del tutto simile a quello visto nell'esempio precedente, ma completamente fuori dal contesto e dalla semantica dei moduli (l'elemento form non è presente), causando effetti disastrosi sia per quanto riguarda la mera validazione, sia per tutto quello che concerne l'accessibilità della pagina.

Il fine presentazionale in questo caso non giustifica affatto i mezzi adottati. Per ottenere l'effetto del titolo incastonato nella riga del riquadro non è necessario usare gli elementi di un modulo fuori dal loro contesto. È sufficiente invece far ricorso ad alcune tecniche CSS che vedremo.

La via CSS

Usando i CSS dobbiamo trovare innanzitutto degli elementi che sostituiscano fieldset e legend, e poi formattarli per ottenere l'effetto desiderato. Gli elementi che si prestano a tale scopo sono, rispettivamente, un div, un'intestazione (h1, h2, ecc.) e ovviamente i vari paragrafi (p). Così il codice (X)HTML potrebbe essere:

<div id="field">
<h2>Titolo</h2>
<p>Lorem ipsum dolor sit amet...</p>
</div>

In questo caso ho usato un id, ma se tali sezioni sono più di una all'interno del documento, è bene usare una classe. Cominciamo quindi col formattare il div:

#field {
 margin: 10px;
 padding: 1em;
 border: 1px solid #666;
 width: 500px;
 position: relative;
}

Il dato saliente del precedente frammento CSS è costituito dalla dichiarazione 'position: relative' per #field. Usando la proprietà 'position' ed impostandola su 'relative', creo la base per il successivo posizionamento contestuale dell'elemento h2, quello designato per fare le veci di legend. Così facendo, tale elemento si posizionerè in relazione al suo genitore, ossia il div #field:

#field h2 {
 display: inline;
 position: absolute;
 top: -13px;
 background: #fbfbf2;
 color: #008;
 margin: 0 3px;
 padding:2px;
 font:  bold 120% Georgia, serif;
}

Poichè l'elemento h2 dovrà comparire su una riga, lo dichiaro in riga tramite la proprietà 'display' impostata su 'inline'. A questo punto, sfruttando la posizione contestuale venutasi a creare con la precedente dichiarazione 'position', sposto l'elemento h2 nella parte superiore del div, fino a sistemarlo nel mezzo del bordo superiore del div stesso. Tramite la proprietà 'background' creo il vuoto attorno al titolo, impostando lo sfondo sullo stesso colore dello sfondo della pagina. Quindi scosto l'elemento h2 usando la proprietà 'margin' e aggiungendo il 'padding' per ottenere l'effetto del rientro tipico dell'elemento legend. L'esempio ci mostra il risultato finale.

Conclusione

Questo esempio ci mostra come spesso si possono ottenere risultati soddisfacenti senza cadere nella facile tentazione dell'uso improprio della marcatura.

Usando i CSS possiamo ottenere gli stessi effetti mantenendo il nostro codice semantico e rigoroso.

::Gabriele Romanato::