From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/max-width/index.md | 176 ++++++++++++++++-------------------- 1 file changed, 76 insertions(+), 100 deletions(-) (limited to 'files/fr/web/css/max-width') diff --git a/files/fr/web/css/max-width/index.md b/files/fr/web/css/max-width/index.md index b8ca12a219..330c750484 100644 --- a/files/fr/web/css/max-width/index.md +++ b/files/fr/web/css/max-width/index.md @@ -7,22 +7,21 @@ tags: - Reference translation_of: Web/CSS/max-width --- -
{{CSSRef}}
+{{CSSRef}} -

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é {{cssxref("width")}} de devenir supérieure à la valeur spécifiée par max-width (autrement dit, max-width est une borne supérieur pour width).

+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é {{cssxref("width")}} de devenir supérieure à la valeur spécifiée par `max-width` (autrement dit, `max-width` est une borne supérieur pour `width`). -
{{EmbedInteractiveExample("pages/css/max-width.html")}}
La valeur de max-width surcharge la valeur de {{cssxref("width")}} mais elle est surchargée par {{cssxref("min-width")}}.

+## Syntaxe -

Syntaxe

- -
/* Valeur de longueur */
-/* Type <length>      */
+```css
+/* Valeur de longueur */
+/* Type       */
 max-width: 3.5em;
 
 /* Valeurs relatives */
-/* Type <percentage> */
+/* Type  */
 max-width: 10%;
 
 /* Valeurs avec un mot-clé */
@@ -36,47 +35,48 @@ max-width: fill-available;
 max-width: inherit;
 max-width: initial;
 max-width: unset;
-
- -

Valeurs

- -
-
<length>
-
La largeur minimale fixée. Voir {{cssxref("<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 {{cssxref("<percentage>")}} sur les valeurs possibles avec ce type. Les valeurs négatives rendront la déclaration invalide.
-
fill-available{{experimental_inline}}
-
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 {{experimental_inline}}
-
Un synonyme pour max-content.
-
max-content {{experimental_inline}}
-
La largeur intrinsèque préférée.
-
min-content {{experimental_inline}}
-
La largeur intrinsèque minimale.
-
none
-
Il n'y a pas de maximum pour la largeur. C'est la valeur par défaut.
-
- -

Syntaxe formelle

+``` + +### Valeurs + +- `` + - : La largeur minimale fixée. Voir {{cssxref("<length>")}} pour les unités qu'on peut utiliser. Une largeur négative rendra la déclaration invalide. +- `` + - : La largeur minimale fixée, exprimée comme un fraction de la largeur du bloc englobant. Voir la page {{cssxref("<percentage>")}} sur les valeurs possibles avec ce type. Les valeurs négatives rendront la déclaration invalide. +- `fill-available`{{experimental_inline}} + - : 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` {{experimental_inline}} + - : Un synonyme pour `max-content`. +- `max-content` {{experimental_inline}} + - : La largeur intrinsèque préférée. +- `min-content` {{experimental_inline}} + - : La largeur intrinsèque minimale. +- `none` + - : Il n'y a pas de maximum pour la largeur. C'est la valeur par défaut. + +### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

Exemple simple avec un tableau

+### Exemple simple avec un tableau -

HTML

+#### HTML -
<div> Lorem ipsum tralala sit amet, consectetur adipisicing
-  <p>
+```html
+
 Lorem ipsum tralala sit amet, consectetur adipisicing
+  

      Ut enim ad minim veniam, quis nostrud exercitation
      ullamco laboris nisi ut aliquip ex ea commodo consequat.
-  </p>
-</div>
+ 

+ +``` -

CSS

+#### CSS -
div {
+```css
+div {
   width: 250px;
   border: solid 1px red;
 }
@@ -84,63 +84,39 @@ max-width: unset;
 p {
   max-width: 60%;
   border: solid 1px blue;
-}
- -

Résultat

- -

{{EmbedLiveSample("Exemple_simple_avec_un_tableau","100%","100%")}}

- -

Accessibilité

- -

Veiller à s'assurer que les éléments ciblés avec une règle utilisant max-width ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte.

- - - -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width')}}{{Spec2('CSS3 Sizing')}}Ajout des mots-clés max-content, min-content, fit-content et fill-available. Les deux brouillons de spécifications CSS3 Box et CSS3 Writing Modes définissaient ces mots-clés mais ont été remplacées par cette spécification.
{{SpecName('CSS3 Transitions', '#animatable-css', 'max-width')}}{{Spec2('CSS3 Transitions')}}max-width peut désormais être animée.
{{SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.max-width")}}

- -

Voir aussi

- -
    -
  • {{cssxref("width")}}
    • -
  • {{cssxref("min-width")}}
    • -
  • {{cssxref("min-height")}}
    • -
  • {{cssxref("max-height")}}
    • -
  • {{cssxref("box-sizing")}}
    • -
  • Le modèle de boîtes
    • -
+} +``` + +#### Résultat + +{{EmbedLiveSample("Exemple_simple_avec_un_tableau","100%","100%")}} + +## Accessibilité + +Veiller à s'assurer que les éléments ciblés avec une règle utilisant `max-width` ne sont pas tronqués ou ne masquent pas d'autre contenu sur la page lorsqu'on zoome pour augmenter la taille du texte. + +- [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [_Understanding Success Criterion 1.4.4, W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-scale.html) + +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| {{SpecName('CSS3 Sizing', '#width-height-keywords', 'max-width')}} | {{Spec2('CSS3 Sizing')}} | Ajout des mots-clés `max-content`, `min-content`, `fit-content` et `fill-available`. Les deux brouillons de spécifications CSS3 Box et CSS3 Writing Modes définissaient ces mots-clés mais ont été remplacées par cette spécification. | +| {{SpecName('CSS3 Transitions', '#animatable-css', 'max-width')}} | {{Spec2('CSS3 Transitions')}} | `max-width` peut désormais être animée. | +| {{SpecName('CSS2.1', 'visudet.html#min-max-widths', 'max-width')}} | {{Spec2('CSS2.1')}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.max-width")}} + +## Voir aussi + +- {{cssxref("width")}} +- {{cssxref("min-width")}} +- {{cssxref("min-height")}} +- {{cssxref("max-height")}} +- {{cssxref("box-sizing")}} +- [Le modèle de boîtes](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte "en/CSS/box_model") -- cgit v1.2.3-54-g00ecf