domenica, agosto 05, 2007

min-width, max-width

* Testato su IE6.
Mettiamo che vogliate fare una pagina che si adatta alla dimensione della finestra, pero' volete impostare un limite di larghezza minimo e un limite massimo.

Col CSS normale fareste una cosa tipo:
width:90%; (larghezza del contenitore al 90% della finestra)
min-width:754px; (larghezza minima - 800x600)
max-width:920px; (larghezza massima - 1024x768)

Ma in IE non funziona, allora per ottenere il medesimo effetto bisogna usare le espressioni e il risultato dovrebbe essere qualcosa di analogo a questo:
width:expression(document.body.clientWidth < 838? "754px" : document.body.clientWidth > 1024? "920px" : "90%" );
In sostanza dice "se la finestra è più piccola di 838 allora width è 754, se la finestra è più grande di 1024 allora width è 920, altrimenti 90%".
Attenzione: se imposto i due valori minimi UGUALI, cioè se dico "quando la finestra è più piccola di 754 allora width è 754" sul mio computer IE si blocca. Non ho approfondito ma a naso direi che il primo valore deve essere maggiore del secondo.

Nota:
Pare sia necessario un chiarimento, date le ridotte capacità mentali di alcuni lettori. Questo post non propone una condizione "ideale" nella realizzazione di una pagina Web ma semplicemente descrive come si può utilizzare le espressioni di IE per simulare il comportamento del CSS standard. Come ogni altro hack relativo al cross browsing (vedere "articoli tecnici" nella colonna di sinistra) sta poi ad ognuno decidere se e quando è il caso di approfittarne.

2 commenti:

  1. dio ti benedica, se esiste!!!

    RispondiElimina
  2. Posto che Dio ha bel altri problemi di cui preoccuparsi, una mano mi farebbe comodo. :)

    RispondiElimina