diff options
author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-09-17 20:15:31 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-09-17 20:15:31 +0200 |
commit | 3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f (patch) | |
tree | 09fe8f8a5fae5235b62918e8b7161fd34480b8d0 /files/fr/web/css/overflow/index.html | |
parent | 3518481e9190f19bbf81741704f45cb3c1761758 (diff) | |
download | translated-content-3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f.tar.gz translated-content-3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f.tar.bz2 translated-content-3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f.zip |
Prepare CSS section for Markdown conversion (#2307)
* Removes summary / seoSummary classes
* Remove div class=hidden and some notranslate
* Remove hidden paragraphs for live sample
* Remove hidden paragraphs for live sample - take 2
* Remove other hidden div and p - updated w/ en-US when necessary
* Remove ids
* Remove notranslate class
* Fix typo which broke build
* remove div class='index'
* remove useless <span style=...>
* remove non typographical sups
* remove non typographical subs
* remove blockindicator and fix some div.note
* fix build :/
* remove useless classes
* fix build - again :x
* fix unhandled elements 1/N + embedlivesample build fail
* fix div.warning
* Fix fixable flaws - hoping to reduce error conversion
* Remove unecessary images (same as en-US)
* fix div notes
* fix warnings
* fix some dl handling
* fix dls
* Fix a bunch of conversion errors
* rm unhandled figures
* Fix other set of issues and revamp easing-function page
* Fix some one-offs conversion errors (incl. deki files)
* fix the rest of one-off conversion issues
* Fix last dl standing
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> |