diff options
Diffstat (limited to 'files/fr/web/css/overflow-clip-box-block/index.html')
| -rw-r--r-- | files/fr/web/css/overflow-clip-box-block/index.html | 157 |
1 files changed, 157 insertions, 0 deletions
diff --git a/files/fr/web/css/overflow-clip-box-block/index.html b/files/fr/web/css/overflow-clip-box-block/index.html new file mode 100644 index 0000000000..54c60574d8 --- /dev/null +++ b/files/fr/web/css/overflow-clip-box-block/index.html @@ -0,0 +1,157 @@ +--- +title: overflow-clip-box-block +slug: Web/CSS/overflow-clip-box-block +tags: + - CSS + - Non-standard + - Propriété + - Reference +translation_of: Mozilla/Gecko/Chrome/CSS/overflow-clip-box-block +--- +<div>{{CSSRef}}{{Non-standard_header}}</div> + +<p>La propriété CSS <strong><code>overflow-clip-box-block</code></strong> définit par rapport à quelle boîte est appliqué le rognement lorsque le contenu dépasse dans la direction de bloc (la direction orthogonale au sens d'écriture).</p> + +<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */ +overflow-clip-box-block: padding-box; +overflow-clip-box-block: content-box; + +/* Valeurs globales */ +overflow-clip-box-block: inherited; +overflow-clip-box-block: initial; +overflow-clip-box-block: unset; +</pre> + +<div class="note"> +<p><strong>Note :</strong> Sur Gecko, <code>padding-box</code> est, par défaut utilisé partout sauf pour <code><input type="text"></code> et les éléments semblables qui utilisent <code>content-box</code>. Par défaut, cette propriété est uniquement activée pour les feuilles de style de l'agent utilisateur et le contexte du chrome.</p> +</div> + +<p>{{cssinfo}}</p> + +<h2 id="Syntaxe">Syntaxe</h2> + +<h3 id="Valeurs">Valeurs</h3> + +<dl> + <dt><code>padding-box</code></dt> + <dd>Avec ce mot-clé, le rognage est relatif à <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_propri%C3%A9t%C3%A9s_des_bo%C3%AEtes">la boîte de remplissage (<em>padding</em>)</a>.</dd> + <dt><code>content-box</code></dt> + <dd>Avec ce mot-clé, le rognage est relatif à <a href="/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Le_mod%C3%A8le_de_bo%C3%AEte#Les_propri%C3%A9t%C3%A9s_des_bo%C3%AEtes">la boîte de contenu</a>.</dd> +</dl> + +<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="padding-box">padding-box</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="things"> + <input value="ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ" class="scroll padding-box"> + <div class="scroll padding-box"><span>ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ</span></div> +</div> +</pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">.scroll { + overflow: auto; + padding: 0 30px; + width: 6em; + border: 1px solid black; + background: lime content-box; +} + +.padding-box { + overflow-clip-box-block: padding-box; +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">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); +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample('padding-box')}}</p> + +<h2 id="Spécifications">Spécifications</h2> + +<p>Cette propriété a été proposée au groupe de travail CSSWG du W3C. Elle n'est pas encore en voie de standardisation mais devrait apparaître dans {{SpecName("CSS3 Overflow")}} si c'est le cas.</p> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Support simple</td> + <td>{{CompatGeckoDesktop(59)}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Fonctionnalité</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Support simple</td> + <td>{{CompatGeckoMobile(59)}}<sup>[1]</sup></td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Cette propriété est contrôlée par la préférence <code>layout.css.overflow-clip-box.enabled</code> dont la valeur par défaut est <code>false</code>. Elle est uniquement activée pour les feuilles de style de l'agent utilisateur ou le contexte du chrome. Voir {{bug(966992)}}.</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li>{{cssxref("text-overflow")}},</li> + <li>{{cssxref("white-space")}},</li> + <li>{{cssxref("overflow")}},</li> + <li>{{cssxref("overflow-x")}},</li> + <li>{{cssxref("overflow-y")}},</li> + <li>{{cssxref("clip")}},</li> + <li>{{cssxref("display")}}</li> +</ul> + +<p> </p> |