Per un maggiore controllo dei layout spesso si ha la necessità di impostare sugli elementi della pagina una dimensione minima o massima, in altezza e/o in larghezza.
I CSS mettono a disposizione quattro proprietà:
- min-width: larghezza minima dell’elemento;
- min-height: altezza minima dell’elemento;
- max-width: larghezza minima dell’elemento;
- max-height: altezza massima dell’elemento.
Tutti e quattro i valori assumono valori in pixel, em, percentuale o qualunque altra unità di misura.
Un semplice esempio di applicazione è il seguente:
div {
/* ... */
min-width: 500px;
min-height: 500px;
max-width: 1000px;
max-height: 1000px;
}Il codice appena visto imposta una dimensione minima, sia in altezza che in larghezza di 500px. A seconda delle dimensioni della finestra e degli altri elementi che verrano inseriti nella pagina, le sue dimensioni massimo si estendono fino a 1000px. Oltre questa dimensione il box non si allargherà.
Le proprietà appena viste, però, non sono supportate dalla versione 6 di Internet Explorer nativamente ma, per ognuna di esse, si ha la necessità di impostare degli hack appositi.
CSS: Min-heigth
IE6 non supporta l’operatore !important e, cosa più importante, interpreta la proprietà height proprio come gli altri browser interpretano min-height.
Sfruttando questi due bug del browser di Microsoft, possiamo creare una regola che funzioni correttamente su tutti.
div {
/* ... */
min-height: 500px;
height: auto !important; /* IE6 non interpreta questa riga */
height: 500px;
}CSS: Min-width
A differenza di min-height, impostare una larghezza minima anche per Internet Explorer 6 risulta essere un po' più problematico. Il problema risiede nella necessità di utilizzare almeno un contenitore aggiuntivo (in layout più complessi anche due) andando così a “sporcare” il codice con div inutili.
In ogni caso, supponendo di avere una struttura come la seguente:
<div id="container">
...
</div>per prima cosa abbiamo bisogno di aggiungere un nuovo div al suo interno:
<div id="container">
<div id="min-width"></div>
...
</div>Il codice CSS di cui abbiamo bisogno è il seguente:
div#container {
/* ... */
min-height: 500px;
}
div#min-height {
width: 500px;
}Molto semplicemente bisogna assegnare una dimensione in larghezza al div aggiuntivo uguale al min-width impostato nel box principale, in maniera che Internet Explorer 6 assuma la dimensione.
CSS: Max-height
Le due soluzioni viste finora non creano problemi dal punto di vista della validazione del codice. Le soluzioni che vedremo adesso, invece, sfruttano la possibilità di Internet Explorer di interpretare espressioni Javascript all’interno del CSS. Queste tecniche però non sono validate dal W3C quindi bisogna ponderare bene la decisione di utilizzarle.
Per impostare un’altezza massima ad un elemento compatibile anche con IE6 possiamo utilizzare la seguente regola:
div {
/* ... */
max-height: 500px;
height: expression( this.height > 500 ? 500 : true );
}CSS: Max-width
Per impostare una larghezza massima compatibile con IE6 bisogna adottare la stessa soluzione appena vista. Anche in questo caso bisogna usare del codice Javascript per verificare la larghezza su Internet Explorer 6 e modificarla in caso di necessità.
div {
/* ... */
max-width: 500px;
width: expression( this.width > 500 ? 500 : true );
}Conclusioni
Abbiamo visto che le dimensioni minime di un elemento possono essere implementate attraverso delle tecniche che non compromettono la validazione del codice. Problemi si hanno, invece, con le dimensioni massime di un oggetto.
Il mio consiglio nel caso in cui abbia la necessità di impostare una dimensione massima (in altezza e/o larghezza) è quello di inserire il codice non validato all’interno dei commenti condizionali così da essere saltato dal validatore. Un’altra possibilità potrebbe essere quella di utilizzare direttamente un file Javascript dedicato dato che, in ogni caso, il linguaggio di scripting è l’unico modo per risolvere il problema.