Operatore !important CSS2
Molte volte ci siamo trovati ad avere difficoltà a rendere la nostra pagina
visibilmente uguale a seconda dell'utilizzo di questo o quel browser, le enormi
differenze tra Internet Explorer, nelle versioni precedenti alla 6, e i browser
su base Gecko come Mozilla ed Opera costringevano a soluzioni poco pratiche
ed a volta differenti per le stesse pagine di un sito.
Il sottoscritto, per esempio, si è trovato proprio difronte questo problema e più
precisamente proprio sul sito che state visionando.
Il problema è nato quando ho deciso di adottare un Css esterno e quindi di rendere le
definizioni in esso contenute ottimali per tutte le pagine e per la maggior parte dei
browser.
Ultimato il Css riscontravo che la lunghezza di alcune pagine risultava errata con
Mozilla, e in alcuni casi gli oggetti in essa contenuta superavano in lunghezza il
proprio contenitore, dopo una serie di ricerche ho scoperto l'operatore !important e
le sue caratteristiche.
Se stabiliamo semplicemente una dimensione (height:400px;), se i contenuti
occuperanno uno spazio verticale inferiore, allora il box manterrà l'altezza specificata,
se, invece, i contenuti occuperanno uno spazio superiore Internet Explorer
ignorerà l'altezza specificata e farà espandere il box fino a contenere precisamente tutto.
Cosa diversa accade sugli altri browser che a differenza di Explorer non espanderanno
il box che risulterà, quindi, inferiore allo spazio occupato dei suoi contenuti.
Il codice da utilizzare per ovviare a questo inconveniente è il seguente:
.contenitore {
min-height: 400px;
height: auto !important;
height: 400px;
}
Queste tre dichiarazioni vengono interpretate in maniera tale che ogni browser
possa sistemare in maniera corretta il box:
- La prima viene interpretata correttamente da Mozilla ed Opera ma non da Explorer;
- La seconda serve a non far considerare ai browser come Mozilla ed Opera la terza
dichiarazione, altrimenti, se fosse considerata limiterebbe la lunghezza che il
alcuni casi risulterebbe insufficente;
- La terza viente interpretata da Explorer correttamente, mentre gli altri daranno
priorità alla seconda (!important).