Quand CSS peut le maximum, IE en fait le minimum

Nous connaissons bien les propriétés width et height du modèle des boîtes CSS qui permettent de déterminer, respectivement, la largeur et la hauteur des éléments [*]. On peut leur attribuer des valeurs fixes ou relatives.

D’une façon générale, je préfère les mises en page fluides, c’est-à-dire reposant sur des dimensions relatives (en % ou en em). Mais cela pose problème pour les textes, qui peuvent atteindre des largeurs trop importantes, rendant la lecture malaisée (si les lignes d’un texte sont longues, sa lecture en est inconfortable). Or un texte de largeur relative 50 % s’affichera respectivement en 400, 512, 640 pixels de large sur un écran de 800, 1024, 1280 pixels de large (et ça ne va pas en rapetissant). On rêve alors pouvoir poser une sorte de butoir, une largeur maximale à ne pas dépasser.

Faites pour arranger ça, les propriétés introduites en CSS 2 min-width et max-width fixent, respectivement, la largeur minimale et maximale d’un élément. De même min-height et max-height en fixent la hauteur minimale et maximale. Ces propriétés s’appliquent aux éléments redimensionnables (c’est-à-dire à tous les éléments sauf à ceux de type en-ligne et aux éléments des tables), et leurs valeurs doivent être positives [*].

Tout se gâte avec IE !

Internet Explorer ne reconnaît pas ces propriétés CSS (il faut dire qu’il a déjà du mal à bien faire avec width et height !) [**]. Mais avant de nous précipiter sur les bidouilles js et autres hacks, prenons le temps de considérer le comportement d’IE sur ce point. Car en réalité, IE interpréte la propriété height à peu près comme min-height. Il suffirait donc de régler la largeur pour IE d’abord, puis de surcharger pour les autres navigateurs, avec le hack html>body, comme ceci :

.bloc {
        height: 12em;
}
html>body .bloc {
        height: auto;
        min-height: 12em;
}