From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/overflow-clip-box/index.html | 175 ++++++++++++++++++++++++++ 1 file changed, 175 insertions(+) create mode 100644 files/fr/web/css/overflow-clip-box/index.html (limited to 'files/fr/web/css/overflow-clip-box/index.html') diff --git a/files/fr/web/css/overflow-clip-box/index.html b/files/fr/web/css/overflow-clip-box/index.html new file mode 100644 index 0000000000..997137220e --- /dev/null +++ b/files/fr/web/css/overflow-clip-box/index.html @@ -0,0 +1,175 @@ +--- +title: overflow-clip-box +slug: Web/CSS/overflow-clip-box +tags: + - CSS + - Non-standard + - Propriété + - Propriété raccourcie + - Reference +translation_of: Mozilla/Gecko/Chrome/CSS/overflow-clip-box +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

La propriété overflow-clip-box permet de définir la boîte à laquelle faire référence lorsqu'il y a un dépassement du contenu. C'est une propriété raccourcie pour les propriétés {{cssxref("overflow-clip-box-inline")}} et {{cssxref("overflow-clip-box-block")}}.

+ +
/* Valeurs avec un mot-clé */
+overflow-clip-box: padding-box;
+overflow-clip-box: content-box;
+
+/* Deux valeurs */
+overflow-clip-box: padding-box content-box;
+overflow-clip-box: content-box content-box;
+
+/* Valeurs globales */
+overflow-clip-box: inherited;
+overflow-clip-box: initial;
+overflow-clip-box: unset;
+
+ +
+

Note : Par défaut, sur Gecko, padding-box est utilisé partout mais <input type="text"> et les éléments similaires utilisent la valeur content-box. Avant Firefox 29, ce comportement était intégré en dur. Depuis, le comportement se base sur cette propriété qui peut être utilisée à d'autres endroits. On notera que cette propriété est uniquement activée pour les feuilles de styles définies au niveau de l'agent utilisateur et pour les contextes liés au chrome de l'application.

+
+ +

{{cssinfo}}

+ +

Syntaxe

+ +

Valeurs

+ +
+
padding-box
+
Ce mot-clé indique que le rognage du contenu qui dépasse sera fait par rapport à la boîte de remplissage (padding).
+
content-box
+
Ce mot-clé indique que le rognage du contenu qui dépasse sera fait par rapport à la boîte de contenu.
+
+ +

Syntaxe formelle

+ +
{{csssyntax}}
+ +

Exemples

+ +

HTML

+ +
<div class="things">
+  <input value="ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ" class="scroll padding-box">
+  <div class="scroll padding-box"><span>ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ</span></div>
+</div>
+
+ +

CSS

+ +
.scroll {
+  overflow: auto;
+  padding: 0 30px;
+  width: 6em;
+  border: 1px solid black;
+  background: lime content-box;
+}
+
+.padding-box {
+  overflow-clip-box: padding-box;
+}
+
+ +

JavaScript

+ +
function scrollSomeElements() {
+  var elms = document.querySelectorAll('.scroll');
+  for (i=0; i < elms.length; ++i) {
+    elms[i].scrollLeft=80;
+  }
+}
+var elt = document.queryElementsByTagName('body')[0];
+
+elt.addEventListener("load", scrollSomeElements, false);
+
+ +

Résultat

+ +

{{EmbedLiveSample('Exemples')}}

+ +

Spécifications

+ +

Cette propriété a été proposée dans le cadre du groupe de travail CSS du W3C. Elle n'est pas encore sur le chemin du processus standard mais si elle est acceptée, elle fera vraisemblablement partie de la spécification {{SpecName("CSS3 Overflow")}}.

+ +

Compatibilité des navigateurs

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéFirefox (Gecko)ChromeInternet ExplorerOperaSafari (WebKit)
Support simple{{CompatGeckoDesktop("29.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Propriété raccourcie, gestion de deux valeurs{{CompatGeckoDesktop("59")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FonctionnalitéFirefox Mobile (Gecko)AndroidIE PhoneOpera MobileSafari Mobile
Support simple{{CompatGeckoMobile("29.0")}}[1]{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
Propriété raccourcie, gestion de deux valeurs{{CompatGeckoMobile("59")}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
+
+ +

[1] Cette propriété est contrôlée grâce à la préférence layout.css.overflow-clip-box.enabled dont la valeur par défaut est false. Elle est uniquement activée au sein des feuilles de style de l'agent utilisateur pour le chrome. Pour plus d'informations, voir {{bug(966992)}}.

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf