mozilla
Vos résultats de recherche

    max-width

    Résumé

    La propriété CSS 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 plus grande que celle spécifiée pour max-width.

    La valeur de max-width annule width, mais min-width annule max-width.

    • Valeur initiale none
    • 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 ou le mot-clé none
    • 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> | none | max-content | min-content | fit-content | fill-available
    
    max-width: 3.5em
    max-width: 75%
    max-width: none
    max-width: max-content
    max-width: min-content
    max-width: fit-content
    max-width: fill-available
    
    max-width: inherit
    

    Valeurs

    none
    La largeur n'a pas de valeur maximale.
    <longueur>
    Voir <longueur> pour les unités possibles.
    <pourcentage>
    Specified as a <percentage> of containing block's width.
    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
    Identique à max-content.

    Exemples

    table {max-width: 75%;}
    
    form {max-width: none;}
    

    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 Transitions Working Draft Définit max-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.7 ou moins) 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]
    Fonction Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Support de base ? ? ? ? ?

    Notes

    [1] CSS 2.1 laisse explicitement le comportement de max-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 Sizing.

    [3] WebKit implémente une proposition précoce, le mot-clé intrinsic, au lieu de max-content, et min-intrinsic, au lieu de min-content. Il n'y a pas d'équivalent pour fill-available or fit-content.

    Voir également

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

    Étiquettes et contributeurs liés au document

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