diff options
Diffstat (limited to 'files/fr/web/css/overflow/index.html')
| -rw-r--r-- | files/fr/web/css/overflow/index.html | 97 |
1 files changed, 63 insertions, 34 deletions
diff --git a/files/fr/web/css/overflow/index.html b/files/fr/web/css/overflow/index.html index 54a4d86f53..58dcae523b 100644 --- a/files/fr/web/css/overflow/index.html +++ b/files/fr/web/css/overflow/index.html @@ -14,9 +14,7 @@ translation_of: Web/CSS/overflow <div>{{EmbedInteractiveExample("pages/css/overflow.html")}}</div> -<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à 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> !</p> - -<p>Lorsqu'on utilise la propriété <code>overflow</code> avec une autre valeur que <code>visible</code> (la valeur par défaut), cela entraîne la création <a href="/fr/docs/Web/CSS/Block_formatting_context">d'un nouveau contexte de formatage de bloc</a>. Cette création est nécessaire d'un point de vue technique. Ceci est nécessaire techniquement puisque si un élément flottant traverse l'élément avec barres de défilement, cela forcera l'encapsulation du contenu de ce dernier autour de l'élément flottant. L'encapsulation devrait alors se produire après chaque défilement de la barre et mènerait à une expérience utilisateur dégradée</p> +<p>Lorsqu'on utilise la propriété <code>overflow</code> avec une autre valeur que <code>visible</code> (la valeur par défaut), cela entraîne la création <a href="/fr/docs/Web/Guide/CSS/Block_formatting_context">d'un nouveau contexte de formatage de bloc</a>. Cette création est nécessaire d'un point de vue technique. Ceci est nécessaire techniquement puisque si un élément flottant traverse l'élément avec barres de défilement, cela forcera l'encapsulation du contenu de ce dernier autour de l'élément flottant. L'encapsulation devrait alors se produire après chaque défilement de la barre et mènerait à une expérience utilisateur dégradée</p> <p>Afin que la propriété <code>overflow</code> puisse avoir un effet, le conteneur de niveau de bloc doit avoir une hauteur limite (définie grâce à {{cssxref("height")}} ou {{cssxref("max-height")}}) ou avoir <code>white-space</code> avec la valeur <code>nowrap.</code></p> @@ -25,7 +23,7 @@ translation_of: Web/CSS/overflow </div> <div class="note"> -<p><strong>Note </strong>: Lorsqu'on définit, via un script, la propriété <code>scrollTop</code> sur les éléments HTML pertinents, même lorsque <code>overflow</code> vaut <code>hidden</code>, il faut parfois faire défiler l'élément.</p> +<p><strong>Note :</strong> Lorsqu'on définit, via un script, la propriété <code>scrollTop</code> sur les éléments HTML pertinents, même lorsque <code>overflow</code> vaut <code>hidden</code>, il faut parfois faire défiler l'élément.</p> </div> <h2 id="Syntaxe">Syntaxe</h2> @@ -68,16 +66,13 @@ overflow: unset; <dl> <dt><code>-moz-scrollbars-none </code>{{obsolete_inline}}</dt> - <dd><code>overflow:hidden</code> doit être utilisé à la place. - <p class="note"><strong>Note :</strong> À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>.</p> + <dd><code>overflow:hidden</code> doit être utilisé à la place. À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>. </dd> <dt><code>-moz-scrollbars-horizontal </code>{{Deprecated_inline}}</dt> - <dd>Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. - <p class="note"><strong>Note :</strong> À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>.</p> + <dd>Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>. </dd> <dt><code>-moz-scrollbars-vertical </code>{{Deprecated_inline}}</dt> - <dd>Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. - <p class="note"><strong>Note :</strong> À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>.</p> + <dd>Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans <code>about:config</code>, il faut passer <code>layout.css.overflow.moz-scrollbars.enabled</code> à <code>true</code>. </dd> <dt><code>-moz-hidden-unscrollable</code> {{non-standard_inline}}</dt> <dd>Principalement utilisé en interne et par les thèmes. Cela désactive le défilement pour les éléments XML racines <code><html></code>, <code> <body></code> (avec les flèches du clavier et la roue de la souris).</dd> @@ -89,45 +84,79 @@ overflow: unset; <h2 id="Exemples">Exemples</h2> -<pre class="brush: css">p { - width: 12em; - height: 6em; +<h3 id="définir_différentes_valeurs_d_overflow_pour_le_texte">Définir différentes valeurs d'overflow pour le texte</h3> + +<h4>HTML</h4> + +<pre class="brush: html"> + <div> + <code>visible</code> + <p class="visible"> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. + </p> + </div> + + <div> + <code>hidden</code> + <p class="hidden"> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. + </p> + </div> + + <div> + <code>scroll</code> + <p class="scroll"> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. + </p> + </div> + + <div> + <code>auto</code> + <p class="auto"> + Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium. + </p> + </div> +</pre> + +<h4>CSS</h4> + +<pre class="brush: css"> +body { + display: flex; + justify-content: space-around; +} + +div { + margin: 1em; + font-size: 1.2em; +} + +p { + width: 8em; + height: 5em; border: dotted; +} - /* le contenu n'est pas rogné */ +p.visible { overflow: visible; } -</pre> -<p style="overflow: visible; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>visible</code> (default)<br> - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> - -<pre class="brush: css">p { - /* pas d'ascenseur fourni */ +p.hidden { overflow: hidden; } -</pre> -<p style="overflow: hidden; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: hidden</code><br> - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> - -<pre class="brush: css">p { - /* les ascenseurs sont toujours affichés */ +p.scroll { overflow: scroll; } -</pre> -<p style="overflow: scroll; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: scroll</code><br> - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> - -<pre class="brush: css">p { - /* les ascenseurs sont affichés si nécessaires */ +p.auto { overflow: auto; } </pre> -<p style="overflow: auto; display: inline-block; width: 12em; height: 6em; border: dotted;"><code>overflow: auto</code><br> - Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p> +<h4>Résultat</h4> + +<p>{{EmbedLiveSample("définir_différentes_valeurs_d_overflow_pour_le_texte", "600", "250")}}</p> <h2 id="Spécifications">Spécifications</h2> |