due chiacchiere

Implementare min-height con IE

Mi era stato segnalato un malfunzionamento nel CSS di questo sito, che in effetti già conoscevo e che finora non ero riuscito a risolvere: sistemare l’altezza minima del contenitore principale della pagina, dove vengono mostrati gli articoli. Ad esempio effettuando una ricerca tra i contenuti, capitava che se il numero di risultati era basso (un paio di articoli trovati), allora la riga che separa questo testo dal menu di sinistra, non arrivava in fondo. Ciò è dovuto ad un problema nell’interpretazione della direttiva min-height con Internet Explorer. Ora è tutto risolto, e ti spiego come.

Cercando suggerimenti in rete, ho trovato varie soluzioni al problema (vedi i riferimenti in fondo), ma ognuna costringe a rinunciare a qualcosa: alla compatibilità con tutti i principali browser presenti sul mercato, alla conformità allo standard degli stili, all’accessibilità del sito. Ma il fido Google sa essere un buon compagno di viaggio, basta saperlo consultarlo con calma e pazienza. E così alla fine, cerca e ricerca, ho trovato l’approccio giusto, e l’ho adottato per correggere il problema su questo sito.

Il metodo consiste nello sfruttare alcuni errori di Internet Explorer e di altri browser nell’interpretazione delle definizioni dello stile. Supponi di voler definire l’altezza della classe box:

<div class="box">  <p>Frase di esempio</p> </div>

Il trucco è di usare una sintassi che, in un caso, è compresa solo da Safari e Firefox (e altri compatibili) ma non da Internet Explorer, mentre nell’altro si definisce (sfruttando appunto l’errore di interpretazione) una cosa che solo quest’ultimo interpreterà:

/* Mozilla/Safari */
*>.box {
min-height: 200px;
... /* qui aggiungi i tuoi stili per il box */
}
/* IE, con il filtro IE5/Mac */
* html .box {
height: 200px;
... /* qui aggiungi i tuoi stili per il box */
}
/* fine del filtro */

Il tutto funziona perché sotto Internet Explorer, height si comporta già come min-height, ma non è così per gli altri: ecco il motivo di distinguere i due casi.

Riferimenti

  • Mezzoblu.com è il sito da cui ho tratto spunto per descrivere la soluzione qui sopra: l’autore utilizza un approccio leggermente diverso, che coinvolge anche il padding dell’elemento, che io ho tolto per generalizzarlo
  • Constile.org è curato da Gianluca Troiani, che si occupa di accessibilità e definizioni degli stili; la sua soluzione è oramai poco funzionale, e risale a qualche anno fa

Lascia un commento