aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/max()
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-09-17 20:59:20 +0200
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-10-12 07:57:33 +0200
commit258ba7b4be62d8640477a3bd3146d08b00cb70ec (patch)
treea8476eee4c369ff47bdfe08353774414f2281ba3 /files/fr/web/css/max()
parent149319bb8c7b1394a443f0877c3460cd362aa815 (diff)
downloadtranslated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.gz
translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.bz2
translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.zip
convert content to md
Diffstat (limited to 'files/fr/web/css/max()')
-rw-r--r--files/fr/web/css/max()/index.md117
1 files changed, 53 insertions, 64 deletions
diff --git a/files/fr/web/css/max()/index.md b/files/fr/web/css/max()/index.md
index a660acc748..a5f9f8df2e 100644
--- a/files/fr/web/css/max()/index.md
+++ b/files/fr/web/css/max()/index.md
@@ -7,112 +7,101 @@ tags:
- Reference
translation_of: Web/CSS/max()
---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
-<p>La fonction CSS <code><strong>max</strong></code><strong><code>()</code></strong> permet d'obtenir la plus grande valeurs parmi une liste d'expressions, séparées par des virgules afin d'utiliser ce maximum comme valeur d'une propriété CSS. La fonction <code>max()</code> peut être utilisée à tout endroit où une valeur de type {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, {{cssxref("&lt;number&gt;")}} ou {{cssxref("&lt;integer&gt;")}} est autorisée.</p>
+La fonction CSS **`max`\*\***`()`\*\* permet d'obtenir la plus grande valeurs parmi une liste d'expressions, séparées par des virgules afin d'utiliser ce maximum comme valeur d'une propriété CSS. La fonction `max()` peut être utilisée à tout endroit où une valeur de type {{cssxref("&lt;length&gt;")}}, {{cssxref("&lt;frequency&gt;")}}, {{cssxref("&lt;angle&gt;")}}, {{cssxref("&lt;time&gt;")}}, {{cssxref("&lt;percentage&gt;")}}, {{cssxref("&lt;number&gt;")}} ou {{cssxref("&lt;integer&gt;")}} est autorisée.
-<pre class="brush: css no-line-numbers">/* property: max(expression<code class="css plain"> [, expression]</code>) */
+```css
+/* property: max(expression [, expression]) */
width: max(10vw, 4em, 80px);
-</pre>
+```
-<p>Dans l'exemple précédent, la largeur mesurera au moins 80 pixels de large, sera plus large si la zone d'affichage (<em>viewport</em>) est plus large que 800 pixels ou si un <code>em</code> vaut plus que 20 pixels de large. Autrement dit, la valeur fournie <code>max()</code> est calculée comme un seuil et généralement, on aura un seuil minimal dans une expression <code>max()</code> (ce qui peut paraître contradictoire à juste titre).</p>
+Dans l'exemple précédent, la largeur mesurera au moins 80 pixels de large, sera plus large si la zone d'affichage (_viewport_) est plus large que 800 pixels ou si un `em` vaut plus que 20 pixels de large. Autrement dit, la valeur fournie `max()` est calculée comme un seuil et généralement, on aura un seuil minimal dans une expression `max()` (ce qui peut paraître contradictoire à juste titre).
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
-<p>La fonction <code>max()</code> prend comme arguments une ou plusieurs expressions, séparées par des virgules. Elle renvoie comme valeur le plus grand résultat des évaluations des expressions passées en arguments.</p>
+La fonction `max()` prend comme arguments une ou plusieurs expressions, séparées par des virgules. Elle renvoie comme valeur le plus grand résultat des évaluations des expressions passées en arguments.
-<p>Les expressions passées à cette fonction peuvent utiliser des fonctions mathématiques (cf. {{CSSxRef("calc", "calc()")}}), des valeurs littérales ou d'autres expressions (ex. avec <code><a href="/fr/docs/Web/CSS/attr">attr()</a></code>). Il est nécessaire que ces expressions fournissent une valeur d'un type valide (ex. {{cssxref("&lt;length&gt;")}}).</p>
+Les expressions passées à cette fonction peuvent utiliser des fonctions mathématiques (cf. {{CSSxRef("calc", "calc()")}}), des valeurs littérales ou d'autres expressions (ex. avec [`attr()`](/fr/docs/Web/CSS/attr)). Il est nécessaire que ces expressions fournissent une valeur d'un type valide (ex. {{cssxref("&lt;length&gt;")}}).
-<p>Il est tout à fait possible de combiner des valeurs avec différentes unités dans les expressions passées en arguments. On peut également utiliser des parenthèses à l'intérieur des expressions afin de s'assurer de la précédence des opérateurs.</p>
+Il est tout à fait possible de combiner des valeurs avec différentes unités dans les expressions passées en arguments. On peut également utiliser des parenthèses à l'intérieur des expressions afin de s'assurer de la précédence des opérateurs.
-<h3 id="Notes">Notes</h3>
+### Notes
-<ul>
- <li>Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme <code>auto</code> si le tableau suit une disposition automatique ou fixée.</li>
- <li>Il est possible d'imbriquer des fonctions <code>max()</code> et <code>min()</code> dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à <code>calc()</code>.</li>
-</ul>
+- Les expressions mathématiques qui utilisent des pourcentages pour les hauteurs et largeurs de colonnes de tableaux, de groupes de colonnes de tableaux, pour les lignes de tableaux, pour les groupes de lignes de tableaux et pour les cellules de tableau seront considérées comme `auto` si le tableau suit une disposition automatique ou fixée.
+- Il est possible d'imbriquer des fonctions `max()` et `min()` dans les expressions et d'utiliser les opérateurs mathématiques d'addition, soustraction, multiplication, division sans nécessairement recourir à `calc()`.
-<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
+### Syntaxe formelle
{{csssyntax}}
-<h2 id="Exemples">Exemples</h2>
+## Exemples
-<h3 id="Garantir_une_taille_minimale_pour_des_images">Garantir une taille minimale pour des images</h3>
+### Garantir une taille minimale pour des images
-<p><code>max()</code> permet de simplifier la définition d'une taille <strong>minimale</strong>, par exemple la largeur d'une image. Dans cet exemple, la règle CSS permet d'obtenir un logo qui s'étire sur la moitié de la fenêtre pour les fenêtres les plus larges, sans dépasser 300 pixels et sans avoir à utiliser des requêtes média.</p>
+`max()` permet de simplifier la définition d'une taille **minimale**, par exemple la largeur d'une image. Dans cet exemple, la règle CSS permet d'obtenir un logo qui s'étire sur la moitié de la fenêtre pour les fenêtres les plus larges, sans dépasser 300 pixels et sans avoir à utiliser des requêtes média.
-<h4 id="CSS">CSS</h4>
+#### CSS
-<pre class="brush: css">.logo {
+```css
+.logo {
width: max(50vw, 300px);
}
-</pre>
+```
-<h4 id="HTML">HTML</h4>
+#### HTML
-<pre class="brush: html">&lt;img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo"&gt;</pre>
+```html
+<img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">
+```
-<h4 id="Résultat">Résultat</h4>
+#### Résultat
-<p>{{EmbedLiveSample('Garantir_une_taille_minimale_pour_des_images', 'auto', '60')}}</p>
+{{EmbedLiveSample('Garantir_une_taille_minimale_pour_des_images', 'auto', '60')}}
-<p>Avec cet exemple, le logo sera au moins large de 300 pixels et sera plus large afin d'occuper la moitié de la zone d'affichage si le <em>viewport</em> devient plus large que 600 pixels.</p>
+Avec cet exemple, le logo sera au moins large de 300 pixels et sera plus large afin d'occuper la moitié de la zone d'affichage si le _viewport_ devient plus large que 600 pixels.
-<h3 id="Fixer_une_taille_minimale_pour_une_police">Fixer une taille minimale pour une police</h3>
+### Fixer une taille minimale pour une police
-<p>On peut également utiliser <code>max()</code> pour définir la taille d'une police et fixer un seuil minimal pour garantir une certaine lisibilité.</p>
+On peut également utiliser `max()` pour définir la taille d'une police et fixer un seuil minimal pour garantir une certaine lisibilité.
-<h4 id="CSS_2">CSS</h4>
+#### CSS
-<pre class="brush: css">h1 {
+```css
+h1 {
font-size: 2rem;
}
h1.responsive {
font-size: max(4vw, 2em, 2rem);
}
-</pre>
+```
-<p>Avec ces règles, la valeur pour <code>font-size</code> vaudra au moins <code>2rems</code> ou deux fois la taille par défaut de la police sur la page.</p>
+Avec ces règles, la valeur pour `font-size` vaudra au moins `2rems` ou deux fois la taille par défaut de la police sur la page.
-<h4 id="HTML_2">HTML</h4>
+#### HTML
-<pre class="brush: html">&lt;h1&gt;Ce texte est toujours lisible mais sa taille ne change pas.&lt;/h1&gt;
-&lt;h1 class="responsive"&gt;Ce texte est toujours lisible et s'adapte dans une certaine mesure.&lt;/h1&gt;
-</pre>
+```html
+<h1>Ce texte est toujours lisible mais sa taille ne change pas.</h1>
+<h1 class="responsive">Ce texte est toujours lisible et s'adapte dans une certaine mesure.</h1>
+```
-<h4 id="Résultat_2">Résultat</h4>
+#### Résultat
-<p>{{EmbedLiveSample('Fixer_une_taille_minimale_pour_une_police', '700', '300')}}</p>
+{{EmbedLiveSample('Fixer_une_taille_minimale_pour_une_police', '700', '300')}}
-<h2 id="Spécifications">Spécifications</h2>
+## Spécifications
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Spécification</th>
- <th scope="col">État</th>
- <th scope="col">Commentaires</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('CSS4 Values', '#calc-notation', 'max()')}}</td>
- <td>{{Spec2('CSS4 Values')}}</td>
- <td>Définition initiale.</td>
- </tr>
- </tbody>
-</table>
+| Spécification | État | Commentaires |
+| ------------------------------------------------------------------------ | -------------------------------- | -------------------- |
+| {{SpecName('CSS4 Values', '#calc-notation', 'max()')}} | {{Spec2('CSS4 Values')}} | Définition initiale. |
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+## Compatibilité des navigateurs
-<p>{{Compat("css.types.max")}}</p>
+{{Compat("css.types.max")}}
-<h2 id="Voir_aussi">Voir aussi</h2>
+## Voir aussi
-<ul>
- <li>{{CSSxRef("calc", "calc()")}}</li>
- <li>{{CSSxRef("clamp", "clamp()")}}</li>
- <li>{{CSSxRef("min", "min()")}}</li>
- <li><a href="/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units">Valeurs et unités en CSS</a></li>
-</ul>
+- {{CSSxRef("calc", "calc()")}}
+- {{CSSxRef("clamp", "clamp()")}}
+- {{CSSxRef("min", "min()")}}
+- [Valeurs et unités en CSS](/fr/docs/Apprendre/CSS/Introduction_à_CSS/Values_and_units)