Visualizzazione Errata:

ie8 rendering errato di fieldset con legend nascosto

Visualizzazione Corretta (work-around applicato):

IE8 visualizzazione di un fieldset con legend nascosto (workaround applicato)

Markup Originale:

xHTML:
-----------------
<fieldset>
    <legend>Legenda</legend>
    ....
</fieldset>
CSS:
-----------------
fieldset { border:6px solid #ddd; }
fieldset legend { display:none; }

Spiegazione Workaround:

La soluzione più semplice e cross-browser è inserire uno SPAN all’interno del tag LEGEND e quindi applicare la visibilità nulla a questo elemento:

xHTML:
-----------------
<fieldset>
    <legend><span>Legenda</span></legend>
    ....
</fieldset>
CSS:
-----------------
fieldset { border:6px solid #ddd; }
fieldset legend span { display:none; }

Le dimensioni della finestra sono dunque definite dall’utente finale che può fare un po’ quello che vuole: tutto schermo, finestrelle minuscole, ecc…

Solitamente la diatriba riguardante la scelta di implementare o meno un layout fluido si concentra sulla maggiore complessità di realizzazione, sulla libertà di design ed in generale sull’impatto a livello di costi.

Vorrei a questo punto spostare l’attenzione dal puro aspetto grafico e stilistico ai contenuti, protagonisti della nostra pagina web!

Righe di testo troppo lunghe!

Una grafica liquida abbinata ad uno degli ormai comuni schermi da 20″ ad altissima risoluzione può facilmente produrre delle righe di testo estremamente lunghe e di difficile lettura: Sullo schermo non possiamo farci aiutare dal dito indice!!!

Nella mia esperienza di web designer ho imparato che la lunghezza della riga influisce molto sull’usabilità dei contenuti della pagina.

Un’importante eccezione:

Spezzo comunque una lancia a favore dei layout fluidi: essi permettono l’ingrandimento del testo più o meno a piacere aiutando dunque chi, come me, sta lasciando 4 diottrie su ogni progetto!

In un layout a dimensione fissa l’ingrandimento del testo può facilmente provocare sovrapposizione di paragrafi e blocchi grafici con il pessimo risultato di rendere illeggibile la pagina stessa.