La propriété max-width est utilisée pour définir la largeur maximale d'un élément donné. Elle empêche la valeur de la propriété width de devenir supérieure à la valeur spécifiée par max-width (autrement dit, max-width est une borne supérieur pour width).
/* Valeur de longueur */ /* Type <length> */ max-width: 3.5em; /* Valeurs relatives */ /* Type <percentage> */ max-width: 10%; /* Valeurs avec un mot-clé */ max-width: max-content; max-width: min-content; max-width: fit-content; max-width: fill-available; /* Valeurs globales */ max-width: inherit; max-width: initial; max-width: unset;
La valeur de max-width surcharge la valeur de width mais elle est surchargée par min-width.
| Valeur initiale | none |
|---|---|
| Applicabilité | tous les éléments sauf les éléments en ligne non remplacés, les lignes de tableaux et les groupes de lignes |
| Héritée | non |
| Pourcentages | se rapporte à la largeur du bloc contenant |
| Média | visuel |
| Valeur calculée | le pourcentage comme spécifié ou la longueur absolue ou le mot-clé none |
| Type d'animation | une longueur, pourcentage ou calc() ; |
| Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
Valeurs
<length>- La largeur minimale fixée. Voir
<length>pour les unités qu'on peut utiliser. Une largeur négative rendra la déclaration invalide. <percentage>- La largeur minimale fixée, exprimée comme un fraction de la largeur du bloc englobant. Voir la page
<percentage>sur les valeurs possibles avec ce type. Les valeurs négatives rendront la déclaration invalide. max-content- La largeur intrinsèque préférée.
min-content- La largeur intrinsèque minimale.
fill-available- La largeur du bloc englobant moins la marge horizontale, la bordure et le remplissage (padding). Certains navigateurs implémentent cette valeur avec un ancien nom :
available. fit-content- Un synonyme pour
max-content.
Syntaxe formelle
<length> | <percentage> | none | max-content | min-content | fit-content | fill-available
Exemples
Exemple simple avec un tableau
HTML
<div> Lorem ipsum tralala sit amet, consectetur adipisicing
<p>
Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
CSS
div {
width: 250px;
border: solid 1px red;
}
p {
max-width: 60%;
border: solid 1px blue;
}
Résultat
Spécifications
| Spécification | État | Commentaires |
|---|---|---|
| CSS Intrinsic & Extrinsic Sizing Module Level 3 La définition de 'max-width' dans cette spécification. |
Version de travail | Ajout des mots-clés max-content, min-content, fit-content et fill-available. |
| CSS Transitions La définition de 'max-width' dans cette spécification. |
Version de travail | max-width peut désormais être animée. |
| CSS Level 2 (Revision 1) La définition de 'max-width' dans cette spécification. |
Recommendation | Définition initiale. |
Compatibilité des navigateurs
| Fonctionnalité | Chrome | Firefox (Gecko) | Edge | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Support simple | 1.0 | 1.0 (1.0) | (Oui) | 7.0 | 4.0 | 2.0.2 (416) |
Applicable à <table> [1] |
Pas de support | (Oui) | Pas de support | Pas de support | (Oui) | Pas de support |
max-content, min-content, fit-content, fill-available |
Pas de support [3] | 3.0 (1.9) -moz [2] | Pas de support | Pas de support | Pas de support | Pas de support [3] |
| Fonctionnalité | Android | Chrome pour Android | Firefox Mobile (Gecko) | Edge | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| Support simple | ? | ? | ? | (Oui) | ? | ? | ? |
[1] CSS 2.1 ne définissait pas, de façon explicite, le comportement de max-width pour <table>. Ainsi, n'importe quel comportement à cet égard est conforme à CSS 2.1. Les prochaines spécifications CSS pourront apporter une définition plus précises et il est donc conseillé aux auteurs de ne pas faire de suppositions.
[2] Gecko implémente de façon expérimentale les définitions données avec la spécification CSS3 sur les boîtes basiques (CSS3 Basic Box). Celle-ci définit les valeurs available et not fill-available. La définition de la valeur fit-content est également plus simple que celle de CSS3 Intrinsic.
[3] WebKit implémente une ancienne version de la spécification avec le mot-clé intrinsic.