mozilla
Vos résultats de recherche

    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 : 
    Contributors to this page: BenoitL, Fredchat, FredB, teoli, Mgjbot
    Dernière mise à jour par : teoli,
    Masquer la barre latérale