min-width

Résumé

La propriété CSS min-width est utilisée pour définir la largeur minimale d'un élément donné. Elle empêche la valeur utilisée pour width de devenir plus petite que celle spécifiée pour min-width.

La valeur de min-width annule à la fois max-width et width.

  • Valeur initiale 0
  • S'applique à all elements but non-replaced inline elements, table rows, and row groups
  • Héritée non
  • Pourcentages se rapporte à la largeur du bloc contenant
  • Média visual
  • Valeur calculée le pourcentage comme spécifié ou la longueur absolue
  • Animable oui, comme une longueur, pourcentage ou calc() ; quand les deux valeurs sont des longueurs, elles sont interpolées comme des longueurs ; quand les deux valeurs sont des pourcentages, elles sont interpolées comme des pourcentages ; sinon, les deux valeurs sont converties dans une fonction calc() qui est la somme d'une longueur et d'un pourcentage (chaque valeur pouvant être à zéro), et cette fonction calc() interpole chaque moitié comme un nombre réel.
  • Ordre canonique l'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

Syntaxe formelle : <length> | <percentage> | max-content | min-content | fit-content | fill-available
min-width: 3.5em
min-width: 10%
min-width: auto
min-width: max-content
min-width: min-content
min-width: fit-content
min-width: fill-available

min-width: inherit

Valeurs

auto
Sur un élément flex, ce mot-clé indique une dimension minimale de la dimension min-content minimale; sur les autres éléments, cela revient à 0.
<longueur>
La largeur minimale fixe. Voir <longueur> pour les unités possibles. Les valeurs négatives rendent la déclaration invalide.
<pourcentage>
La largeur minimale fixe exprimée en <percentage> de la largeur du bloc contenant. Les valeurs négatives rendent 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 contenant moins les marges horizontales intérieures et extérieures et les bordures. Certains navigateurs implémentent l'ancien nom de ce mot-clé, available.
fit-content
D'après CSS3 Box, ceci est un synonyme de min-content. CSS3 Sizing définit un algorithme plus complexe, mais aucun navigateur ne l'implémente, même de manière expérimentale.

Exemples

table {min-width: 75%;}

form {min-width: 0;}

Spécifications

Spécification Statut Commentaire
CSS Intrinsic & Extrinsic Sizing Module Level 3 Working Draft Ajoute les mots-clés max-content, min-content, fit-content, et fill-available.
À la fois les brouillons de CSS3 Box et CSS3 Writing Modes ont définis ces mots-clés à un certain moment. Ces brouillons sont annulés par cette spécification.
CSS Flexible Box Layout Module Candidate Recommendation Ajoute le mot-clé auto et l'utilise comme valeur initiale.
CSS Transitions Working Draft Définit min-width comme animable.
CSS Level 2 (Revision 1) Recommendation Définition initiale.

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support de base 1.0 1.0 (1.0) 7.0 4.0 2.0.2 (416), bogué avant
s'applique à <table> [1] Pas de support (Oui) Pas de support (Oui) Pas de support
max-content, min-content, fit-content, et fill-available Pas de support [3] 3.0 (1.9) -moz [2] Pas de support Pas de support Pas de support [3]
auto 21.0 16.0 (16.0) Pas de support 12.10 Pas de support
auto comme valeur initiale 21.0 18.0 (18.0) Pas de support 12.10 Pas de support
Fonction Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base ? ? ? ? ? ?

Notes

[1] CSS 2.1 laisse explicitement le comportement de  min-width avec <table> non-défini. Donc n'importe quel comportement est acceptable avec CSS2.1; les spécifications CSS plus récentes pourront définir ce comportement, les développeurs Web ne doivent donc pas s'appuyer sur cela par prudence.

[2] Gecko implémente expérimentalement les définitions données dans CSS3 Basic Box. Cette spécification définit available et pas fill-available. La définition de fit-content est plus simple que dans CSS3 Intrinsic.

[3] WebKit implémente une proposition précoce, le mot-clé intrinsic.

Voir également

Modèle de boîtes, min-height, -moz-box-sizing, width, max-width

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : teoli, FredB, Mgjbot, BenoitL, Fredchat
Dernière mise à jour par : teoli,
Masquer la barre latérale