Min-width: larghezza minima per Internet Explorer 6

La proprietà css min-width imposta una larghezza minima a l’elemento selezionato.

Se la finestra del browser è ridimensionata da l’utente, il contenuto si ridimensionerà fino a una certa larghezza e la barra di scorrimento della finestra apparirà se più piccola del contenuto.

Questa proprietà è utile nel caso di layout fluido o quando si usa contenuto con la proprietà css float per evitare che gli elementi di blocco si spostano verso il basso in caso di mancanza di spazio.

Purtroppo il min-width non è supportato da Internet Explorer 6.

Di seguito, 2 soluzione per impostare una larghezza minima per IE6.

NB: per capire la differenza tra ogni esempi è necessario usare IE6 e ridimensionare la finestra del browser per vedere l’effetto del min-width.

Partirò d’un esempio di base con un semplice div contenitore a sfondo grigio (background-color) senza larghezza (width) o larghezza minima (min-width) specificate.

L’HTML di base:

<div id=”contenitore”/>
—il contenuto—
</div>

Le regole css di base:

#contenitore{
background-color:#ccc;
}

Il risultato è un blocco grigio con il nostro contenuto che si ridimensiona senza limite di larghezza quando la finestra del browser è ridimensionata.

Aggiungiamo il min-width al div ‘contenitore’.

Le regole css:

#contenitore{
background-color:#ccc;
min-width:500px;
}

Il risultato: a 500px di larghezza, la barra di scorrimento orizzontale appare rispettando la larghezza minima impostata.

Se avete l’uso di IE6, il risultato differì. Come detto prima, la proprietà css min-width non è supportata da Internet Explorer 6 e la larghezza minima è ignorata .

La prima soluzione: la proprietà expression() della Microsoft

In breve, la proprietà expression() della Microsoft è un estensione propria al browser Internet Explorer che permette di assegnare un valore dinamico ad una proprietà css con l’uso del Microsoft JScript (molto simile al Javascript, al punto che se Javascript è disabilitato quella proprietà non funziona).

NB: l’uso di expression() non è raccommendato della W3C

Le regole css:

#contenitore{
background-color:#ccc;
min-width:500px;
width:expression(document.body.clientWidth < 502? "500px": "auto" );
}

Il risultato: il min-width è rispettato dagli browser che supportano questa proprietà, mentre IE6 usa la sua proprietà expression() in modo che se la finestra del browser è più piccola di 502px, il valore di 500px è passato alla proprietà css ‘width’ (la larghezza).

NB: per evitare che IE6 va in tilt con l’uso di questo metodo è importante che il primo valore (502 nel esempio) sia differente del secondo valore (500 nel esempio) e che non vengono applicate margine (margin) e/o spazi cuscinetti (padding) al div ‘contenitore’.

La seconda soluzione: l’uso di un div vuoto

Rispettando le raccomandazione della W3C, possiamo più semplicemente aggiungere un div extra con una larghezza fissa pare a quella minima dentro il nostro contenitore che risolverà il problema del min-width con IE6.

L’HTML di base:

<div id=”contenitore”/>
<div id=”min-width”/></div>
—il contenuto—
</div>

Le regole css:

#contenitore{
background-color:#ccc;
min-width:500px;
}
#min-width{
width:500px;
height:1px;
}

Il risultato: lo stesso di prima senza l’uso del expression().

Condividi questo articolo su

css, css min-width, css min-width ie6, css width, ie6 min-width, larghezza minima

6 commenti

Rimani aggiornato con il RSS Feed