From 3335211db9ecb67dc0ccd9c4a7c1eb607ffe359f Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Fri, 17 Sep 2021 20:15:31 +0200 Subject: 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 * 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 --- files/fr/web/css/overflow/index.html | 97 +++++++++++++++++++++++------------- 1 file changed, 63 insertions(+), 34 deletions(-) (limited to 'files/fr/web/css/overflow') 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
{{EmbedInteractiveExample("pages/css/overflow.html")}}
- - -

Lorsqu'on utilise la propriété overflow avec une autre valeur que visible (la valeur par défaut), cela entraîne la création d'un nouveau contexte de formatage de bloc. 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

+

Lorsqu'on utilise la propriété overflow avec une autre valeur que visible (la valeur par défaut), cela entraîne la création d'un nouveau contexte de formatage de bloc. 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

Afin que la propriété overflow 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 white-space avec la valeur nowrap.

@@ -25,7 +23,7 @@ translation_of: Web/CSS/overflow
-

Note : Lorsqu'on définit, via un script, la propriété scrollTop sur les éléments HTML pertinents, même lorsque overflow vaut hidden, il faut parfois faire défiler l'élément.

+

Note : Lorsqu'on définit, via un script, la propriété scrollTop sur les éléments HTML pertinents, même lorsque overflow vaut hidden, il faut parfois faire défiler l'élément.

Syntaxe

@@ -68,16 +66,13 @@ overflow: unset;
-moz-scrollbars-none {{obsolete_inline}}
-
overflow:hidden doit être utilisé à la place. -

Note : À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans about:config, il faut passer layout.css.overflow.moz-scrollbars.enabled à true.

+
overflow:hidden 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 about:config, il faut passer layout.css.overflow.moz-scrollbars.enabled à true.
-moz-scrollbars-horizontal {{Deprecated_inline}}
-
Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. -

Note : À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans about:config, il faut passer layout.css.overflow.moz-scrollbars.enabled à true.

+
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 about:config, il faut passer layout.css.overflow.moz-scrollbars.enabled à true.
-moz-scrollbars-vertical {{Deprecated_inline}}
-
Utilisez {{cssxref("overflow-x")}} et {{cssxref("overflow-y")}} à la place. -

Note : À partir de Firefox 63, cette fonctionnalité est placée derrière une préférence qui doit être activée. Dans about:config, il faut passer layout.css.overflow.moz-scrollbars.enabled à true.

+
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 about:config, il faut passer layout.css.overflow.moz-scrollbars.enabled à true.
-moz-hidden-unscrollable {{non-standard_inline}}
Principalement utilisé en interne et par les thèmes. Cela désactive le défilement pour les éléments XML racines <html>, <body> (avec les flèches du clavier et la roue de la souris).
@@ -89,45 +84,79 @@ overflow: unset;

Exemples

-
p {
-  width: 12em;
-  height: 6em;
+
Définir différentes valeurs d'overflow pour le texte

+
+
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>
+

+
+
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;
 }
-

 
-
visible (default)

- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

-
-
p {
-  /* pas d'ascenseur fourni */
+p.hidden {
   overflow: hidden;
 }
-

 
-
overflow: hidden

- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

-
-
p {
-  /* les ascenseurs sont toujours affichés */
+p.scroll {
   overflow: scroll;
 }
-

 
-
overflow: scroll

- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

-
-
p {
-  /* les ascenseurs sont affichés si nécessaires */
+p.auto {
   overflow: auto;
 }
 

 
-
overflow: auto

- Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

+
Résultat

+
+
{{EmbedLiveSample("définir_différentes_valeurs_d_overflow_pour_le_texte", "600", "250")}}

 
 
Spécifications

 
-- 
cgit v1.2.3-54-g00ecf