CSS: risoluzione dei problemi nel layout

CSS: risoluzione dei problemi nel layout

In questo articolo cercheremo di definire una strategia comune per la risoluzione dei problemi nel layout con i CSS. Vedremo come affrontare i problemi riducendoli ai loro costituenti essenziali.

Introduzione

Nella risoluzione dei problemi nel layout con i CSS è di fondamentale importanza che il codice CSS usato sia valido. L'analisi degli eventuali errori grammaticali è il punto di partenza per ogni ulteriore tipo di indagine. È altresì necessario che la marcatura sia valida, e possibilmente in modalità standard. La risoluzione dei problemi vera e propria varia a seconda del tipo di layout utilizzato, ma generalmente si articola nelle seguenti fasi:

  1. Individuazione dell'elemento affetto dal problema.
  2. Individuazione, analisi e modifica delle dichiarazioni che causano il problema.
  3. Risoluzione del problema.

Individuazione dell'elemento affetto dal problema

In generale, durante la fase di sviluppo di un documento web ci si può accorgere che lo stile assegnato ad un elemento non sortisce l'effetto sperato, o l'effetto è solo parziale. In questo caso occorre porsi le seguenti domande:

  1. Il problema si verifica solo su un browser o su più browser?
  2. Il problema è limitato ad un solo elemento o a più elementi con dichiarazioni simili?

La prima domanda serve a restringere l'àmbito di ricerca ad un browser in particolare. Se infatti il problema si presenta in più browser, è probabile che esso dipenda dalle nostre dichiarazioni e non dal browser. Se invece il problema è limitato ad un solo browser, è probabile che ci troviamo di fronte ad un'anomalia (1) o ad un bug (2).

Un'anomalia (1) è un comportamento che non viola le specifiche, ma è piuttosto un'interpretazione dello stile legata all'implementazione specifica. Un tipico esempio è costituito dalla gestione dell'indentazione negativa da parte di Internet Explorer Windows. In alcuni casi Explorer può non visualizzare parte del testo. Le specifiche affermano che nel caso della proprietà 'text-indent' con valore negativo possono esservi dei limiti nell'implementazione. Il caso di Explorer si inserisce in questo contesto.

Viceversa, un bug (2) è una violazione esplicita delle specifiche. Ciò significa che le dichiarazioni (corrette) dell'autore non vengono osservate dal browser. Un tipico esempio è rappresentato dai numerosi bug di Explorer con la proprietà float.

La seconda domanda serve a verificare se il problema è esteso ad altri elementi che condividono le stesse dichiarazioni. In questo caso bisogna anche tener conto del rapporto di parentela tra gli elementi. A volte infatti un valore ereditato da un antenato può causare dei problemi nei discendenti.

Individuazione, analisi e modifica delle dichiarazioni che causano il problema

Una volta individuato l'elemento con il problema, si può passare all'individuazione, analisi e modifica delle dichiarazioni che causano il problema. Esempio:


#intestazione {
border-width: 1em 0;
border-style: solid;
}

h1 {
float: left;
margin: 0;
width: 40%;
}

#logo {
float: right; 
margin: 0;
width: 200px;
}

Posto che gli elementi h1 e #logo siano contenuti in #intestazione, il problema in questo caso è costituito dal collassamento dello spazio verticale dovuto alla proprietà 'float', causato dalla mancanza di un'altezza esplicita per #intestazione. Occorre in questo caso aggiungere una dichiarazione:


#intestazione {height: 15%;}

Viceversa, si consideri il seguente codice:


#intestazione {
margin: 0;
width: 100%;
padding-left: 2.5em;
}

In questo caso il problema è costituito dalla fuoriuscita dell'elemento dal suo blocco contenitore. La causa è da ricercarsi nel padding sinistro impostato per l'elemento, che va a sommarsi alla dichiarazione di larghezza. Possiamo quindi risolvere il problema (1) eliminando il padding sinistro o (2) eliminando la dichiarazione di larghezza.

A volte, tuttavia, la causa del problema non è così evidente. Si consideri il seguente codice:


.container {
margin: 0;
padding: 0;
position: relative;
font-size: 80%;
}
.container h2 {font-size: 1.2em; margin: 0;}

.left {
position: absolute;
top: 30px;
left: 10px;
width: 220px;
margin: 0;
padding: 70px 10px 10px 10px;
border: 1px solid;
}

.right {
position: absolute;
top: 30px;
right: 10px;
width: 220px;
margin: 0;
padding: 70px 10px 10px 10px;
}

.center {
margin: 66px 260px 0 260px; 
padding: 0.5em;
}
	
.breadcrumb {
margin: 0; 
padding: 0; 
list-style: none; 
background: #efc; 
color: #000;
}
.breadcrumb li {
display: inline; 
padding: 0 0.2em;
}
	 

form {margin: 0;}

(Vedi esempio)

In questo caso la colonna di sinistra, a causa dell'eccessivo padding, va a sovrapporsi alla sezione "Sei qui". Il bordo aggiunto alla colonna di sinistra serve solo ad evidenziare il problema, che si concretizza nel fatto che i link della sezione "Sei qui" non sono cliccabili nei browser della famiglia Mozilla. Questo ci indurrebbe a pensare ad un bug, ma in realtà la causa è da ricercarsi unicamente nelle errate dimensioni date agli elementi.

Risoluzione del problema

Una risoluzione ottimale del problema consiste nel trovare un accorgimento che abbia un impatto minimo sul nostro layout. Tuttavia, bisogna sempre fare i conti con i bug dei browser. Questi ultimi si suddividono in bug noti ed in bug sconosciuti. I bug noti possono avere una soluzione totale o parziale. Sta a noi decidere se il bug è rilevante o no ai fini del nostro layout. Infatti se il bug distrugge il layout, non è possibile ignorarlo. Viceversa, se il bug ha un impatto minimo sul layout possiamo anche decidere di ignorarlo e di scendere ad un compromesso. Tutto dipende da quanto siamo disposti a venire incontro alle esigenze degli utenti di un particolare browser. Per esempio, se il nostro sito viene visitato da una percentuale irrisoria di utenti di Internet Explorer 5 Windows, possiamo decidere di non dare peso a qualche differenza nella visualizzazione. Viceversa, se scopriamo che la maggioranza degli utenti usa Internet Explorer 6 Windows, ipso facto dovremo scendere a compromessi con questo browser.

I bug sconosciuti, invece, richiedono un'attenta fase di studio e di analisi. Si deve procedere all'isolamento del problema, e quindi a creare una semplice pagina di test usando le dichiarazioni incriminate. Ancora: dipende sempre dalle particolari esigenze dell'utenza del nostro sito. Se un bug sconosciuto non causa grandi problemi, si possono trovare delle soluzioni alternative modificando il layout ed evitando le dichiarazioni che lo causano. L'errore più grave che si può commettere in questo caso è quello di cercare un'uniformità che non esiste nella realtà. Infine, se il bug distrugge il nostro layout si può cercare di aggirare il problema reimpostando il layout con dichiarazioni diverse. Al limite si può chiedere aiuto online, sia facendo ricerche, sia utilizzando forum e mailing list.

Torna su