Largeur adaptable avec max-width

Le problème

On a souvent besoin de limiter la largeur du contenu d'une page, par exemple pour éviter des lignes de texte trop longues sur de grands écrans.

On peut utiliser width pour fixer la largeur du body… mais cela n'est pas adapté pour les petits écrans (ou les fenêtres réduites en largeur), car le contenu est alors trop large. Cela est très ennuyeux, car il faut en permanence scroller horizontalement pour lire le contenu. De façon générale, il faut éviter au maximum les ascenseurs (scrollbars) horizontaux.

La solution max-width

Une solution est la propriétés CSS max-width : en gros, appliquée au body, elle fait la même chose que width, sans poser de problèmes quand la largeur est insuffisante.

Plus précisément, si on met par exemple max-width:200px à un élément, on lui dit « ta largeur ne doit jamais dépasser 200 pixels ». Le navigateur va calculer la largeur de l'élément, et vérifier si elle dépasse 200 pixels :

• si oui, alors il la met à 200 pixels ;
• sinon, il garde la valeur calculée.

Exemple

La présente page est un exemple concret d'utilisation de max-width sur le body. Le CSS contient la règle suivante :

body {
	max-width: 60em;
	margin: auto;
	padding: .5em;
}

Si la fenêtre est suffisamment large, le contenu ne dépasse pas 60 em de largeur, et il se retrouve centré horizontalement. Mais si on réduit la taille de la fenêtre, le body ne dépasse pas horizontalement : sa largeur est celle de la fenêtre.

max-width pour les images

L'utilité de max-width ne s'arrête pas là — cette propriété s'applique à n'importe quel élément.

Un cas d'utilisation très fréquent est celui des images. En effet, par défaut, les images HTML s'affichent en taille réelle — on se retrouve souvent avec des images qui dépassent de leur élément conteneur.

Au lieu de traiter ces problèmes au cas par cas, une solution efficace est d'ajouter la règle suivante dans le CSS :

img {
	max-width: 100%;
}

Elle interdit tout simplement aux images d'avoir une largeur supérieure à la largeur disponible dans leur parent. L'avantage par rapport à width:100%, c'est que si le parent est beaucoup plus large que l'image, celle-ci prendra sa taille réelle, au lieu d'être agrandie pour couvrir toute la largeur disponible.

min-width

Il existe aussi une propriété min-width, qui indique une largeur minimale. Par exemple, un élément avec min-width:200px n'aura jamais une largeur inférieure à 200 pixels : si sa largeur calculée est supérieure, alors elle est gardée, et si elle est inférieure, alors elle est mise à 200 pixels.

On peut combiner les deux propriétés. La règle suivante permet d'obtenir un menu qui fasse 30% de la largeur de l'écran, mais ne soit ni trop petit ni trop grand :

#menu {
  width: 30%;
  max-width: 50em;
  min-width: 10em;
}

Dans les cas complexes où on donne des valeurs « dynamiques » aux trois propriétés, max-width gagne contre width mais perd contre min-width. La façon dont la largeur finale est calculée peut être complexe à comprendre, voir la spécification. En pratique, il est très rare de se retrouver face à un cas ambigu.