diff options
Diffstat (limited to 'files/fr/web/css/minmax()/index.html')
| -rw-r--r-- | files/fr/web/css/minmax()/index.html | 92 |
1 files changed, 49 insertions, 43 deletions
diff --git a/files/fr/web/css/minmax()/index.html b/files/fr/web/css/minmax()/index.html index 1945c86c70..90a84ac5d6 100644 --- a/files/fr/web/css/minmax()/index.html +++ b/files/fr/web/css/minmax()/index.html @@ -3,19 +3,25 @@ title: minmax() slug: Web/CSS/minmax() tags: - CSS - - Experimental - - Fonction + - CSS Function + - CSS Grid + - Function + - Layout - Reference - Web translation_of: Web/CSS/minmax() --- -<div>{{CSSRef}}{{SeeCompatTable}}</div> +<div>{{CSSRef}}</div> -<p>La fonction CSS <code><strong>minmax</strong></code><strong><code>()</code></strong> définit un intervalle de taille compris (au sens large) entre <var>min</var> et <var>max</var>. Cette fonction est utilisée avec <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">les grilles CSS</a>.</p> +<p>La <a href="/fr/docs/Web/CSS/CSS_Functions">fonction CSS</a> <strong><code>minmax()</code></strong> définit un intervalle de taille supérieure ou égale à <var>min</var> et inférieure ou égale à <var>max</var>. Elle est utilisée avec <a href="/fr/docs/Web/CSS/CSS_Grid_Layout">les grilles CSS</a>.</p> -<h2 id="Syntaxe">Syntaxe</h2> +<div>{{EmbedInteractiveExample("pages/css/function-minmax.html")}}</div> -<pre class="brush: css no-line-numbers notranslate">/* Valeurs <inflexible-breadth>, <track-breadth> */ +<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: css no-line-numbers">/* Valeurs de type <inflexible-breadth>, <track-breadth>*/ minmax(200px, 1fr) minmax(400px, 50%) minmax(30%, 300px) @@ -25,7 +31,7 @@ minmax(max-content, auto) minmax(auto, 300px) minmax(min-content, auto) -/* Valeurs <fixed-breadth>, <track-breadth> */ +/* Valeurs de type <fixed-breadth>, <track-breadth> */ minmax(200px, 1fr) minmax(30%, 300px) minmax(400px, 50%) @@ -33,7 +39,7 @@ minmax(50%, min-content) minmax(300px, max-content) minmax(200px, auto) -/* Valeurs <inflexible-breadth>, <fixed-breadth> */ +/* Valeurs de type <inflexible-breadth>, <fixed-breadth> */ minmax(400px, 50%) minmax(30%, 300px) minmax(min-content, 200px) @@ -41,49 +47,49 @@ minmax(max-content, 200px) minmax(auto, 300px) </pre> -<p>Une fonction qui prend en entrée deux arguments : <em>min</em> et <em>max</em>.</p> +<p><code>minmax()</code> est une fonction qui prend deux paramètres, <em>min</em> et <em>max</em>.</p> -<p>Chaque paramètre peut être une longueur, un pourcentage, un facteur de flexibilité ou l'un des mots-clés parmi <code>max-content</code>, <code>min-content</code> ou <code>auto</code>.</p> +<p>Chaque paramètre peut être une longueur (type <code><length></code>), un pourcentage (type <code><percentage></code>), une valeur de type <code><flex></code> ou l'un des mots-clés <code>max-content</code>, <code>min-content</code>, ou <code>auto</code>.</p> -<p>Si <var>max</var> < <var>min</var>, <var>max</var> est ignoré et <code>minmax(min,max)</code> correspond à <var>min</var>. Utilisé comme maximum, une valeur {{cssxref("flex_value","<flex>")}} permet de définir le facteur de flexibilité d'une piste de la grille, elle est invalide comme minimum.</p> +<p>Si <var>max</var> est supérieur à <var>min</var>, alors <var>max</var> sera ignoré et <code>minmax(min,max)</code> sera considéré comme <var>min</var>. Utilisée comme valeur maximale, une valeur de type {{cssxref("flex_value","<flex>")}} définit le facteur de flexibilité de la piste de la grille ; une telle valeur ne peut pas être utilisée comme minimum.</p> -<h3 id="Valeurs">Valeurs</h3> +<h3 id="Values">Valeurs</h3> <dl> - <dt><code><length></code></dt> - <dd>Une longueur positive (cf. le type {{cssxref("<length>")}}).</dd> - <dt><code><percentage></code></dt> - <dd>Un pourcentage ({{cssxref("<percentage>")}}) positif, relatif à la taille en ligne du conteneur pour les colonnes et à la taille en bloc pour les lignes du conteneur. Si la taille de la grille dépend de la taille de ses pistes, la valeur devra être traitée comme <code>auto</code>. L'agent utilisateur peut ajuster les contributions des tailles intrinsèques à la taille de la piste du conteneur de la grille et augmenter la taille finale de la piste par l'écart minimal nécessaire pour respecter ce pourcentage.</dd> - <dt><code><flex></code></dt> - <dd>Une dimension positive avec l'unité <code>fr</code> qui définit le facteur de flexibilité de la piste (cf. {{cssxref("<flex>")}}). Chaque piste avec un tel coefficient <code><flex></code> occupe une partie de l'espace disponible restant en fonction de son facteur de flexibilité.</dd> + <dt>{{cssxref("<length>")}}</dt> + <dd>Une longueur non-négative.</dd> + <dt>{{cssxref("<percentage>")}}</dt> + <dd>Un pourcentage non-négatif. Cette valeur est relative à la taille en incise (<i>inline</i>) du conteneur de grille pour les pistes en colonnes et relative à la taille en bloc du conteneur de grille pour les pistes en lignes. Si la taille du conteneur de grille dépend de la taille de ses pistes, cette valeur <code><percentage></code> sera traitée comme <code>auto</code>. L'agent utilisateur pourra ajuster les contributions à la piste de taille intrinsèques selon la taille du conteneur de grille et augmenter la taille finale de la piste d'une quantité minimale pour respecter le pourcentage.</dd> + <dt>{{cssxref("<flex>")}}</dt> + <dd>Une valeur non-négative avec l'unité <code>fr</code> qui indique le facteur de flexibilité/extensibilité de la piste. Chaque piste dimensionnée avec une valeur de type <code><flex></code> occupera une part de l'espace restant proportionnellement à son coefficient de flexibilité.</dd> <dt><code>max-content</code></dt> - <dd>Cette valeur représente la plus grande valeur <code>max-content</code> contribuant aux objets de la grille qui occupent la piste.</dd> + <dd>Représente la plus grande contribution max-content pour les objets de la grille qui occupent la piste.</dd> <dt><code>min-content</code></dt> - <dd>Cette valeur représente la plus grande valeur <code>min-content</code> contribuant aux objets de la grille qui occupent la piste</dd> + <dd>Représente la plus grande contribution min-content pour les objets de la grille qui occupent la piste.</dd> <dt><code>auto</code></dt> - <dd>Utilisé comme maximum, c'est un synonyme de <code>max-content</code>. Utilisé comme un minimum, il représente le plus grand des minima (selon {{cssxref("min-width")}}/{{cssxref("min-height")}}) des objets de la grille qui occupent la piste.</dd> + <dd>Utilisée comme maximum, cette valeur agira comme <code>max-content</code>. Utilisée comme minimum, elle représentera la plus grande des tailles minimales (définies par {{cssxref("min-width")}}/{{cssxref("min-height")}}) des objets de la grille qui occupent la piste.</dd> </dl> -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +<h3 id="Formal_syntax">Syntaxe formelle</h3> {{csssyntax}} -<h3 id="Propriétés_CSS_applicables">Propriétés CSS applicables</h3> +<h3 id="CSS_properties">Propriétés CSS associées</h3> -<p>La fonction <code>minmax()</code> peut être utilisée avec les propriétés suivantes :</p> +<p><code>minmax()</code> peut être utilisée pour les propriétés suivantes :</p> <ul> - <li>{{cssxref("grid-template-columns")}}</li> - <li>{{cssxref("grid-template-rows")}}</li> - <li>{{cssxref("grid-auto-columns")}}</li> - <li>{{cssxref("grid-auto-rows")}}</li> + <li><a href="/fr/docs/Web/CSS/grid-template-columns">grid-template-columns</a></li> + <li><a href="/fr/docs/Web/CSS/grid-template-rows">grid-template-rows</a></li> + <li><a href="/fr/docs/Web/CSS/grid-auto-columns">grid-auto-columns</a></li> + <li><a href="/fr/docs/Web/CSS/grid-auto-rows">grid-auto-rows</a></li> </ul> -<h2 id="Exemples">Exemples</h2> +<h2 id="Examples">Exemples</h2> <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[3] notranslate">#container { +<pre class="brush: css; highlight[3]">#container { display: grid; grid-template-columns: minmax(min-content, 300px) minmax(200px, 1fr) 150px; grid-gap: 5px; @@ -102,23 +108,23 @@ minmax(auto, 300px) <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div id="container"> +<pre class="brush: html"><div id="container"> <div> - Item aussi large que le contenu jusqu'à 300 pixels max. + Aussi large que le contenu, large d'au plus 300 pixels. </div> <div> - Item avec une largeur flexible minimale de 200 pixels. + Item flexible mais dont la largeur vaut au moins 200 pixels. </div> <div> - Item inflexible de 150 pixels de large. + Item avec une largeur de 150 pixels. </div> </div></pre> -<h3 id="Résultat">Résultat</h3> +<h3 id="Result">Résultat</h3> -<p>{{EmbedLiveSample("Exemples", "100%", 200)}}</p> +<p>{{EmbedLiveSample("Examples", "100%", 200)}}</p> -<h2 id="Spécifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> <thead> @@ -137,15 +143,15 @@ minmax(auto, 300px) </tbody> </table> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("css.properties.grid-template-columns.minmax")}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> - <li><a href="http://gridbyexample.com/video/series-minmax/">Un tutoriel vidéo : Introduction à <code>minmax()</code> (en anglais)</a></li> - <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Les_grilles_CSS_les_valeurs_logiques_les_modes_d_écriture">Les grilles CSS : les valeurs logiques et les modes d'écriture</a></li> + <li>Guide sur les grilles CSS : <em><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#track_sizing_and_minmax()">Concepts de bases pour le dimensionnement des pistes avec minmax()</a></em></li> + <li><a href="/fr/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">Valeurs logiques, modes d'écriture et grilles CSS</a></li> + <li>Tutoriel vidéo (en anglais) : <a href="http://gridbyexample.com/video/series-minmax/">Introduction à minmax()</a> + </li> </ul> |