1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
---
title: overflow-clip-box-inline
slug: Web/CSS/overflow-clip-box-inline
tags:
- CSS
- Non-standard
- Propriété
- Reference
translation_of: Mozilla/Gecko/Chrome/CSS/overflow-clip-box-inline
---
<div>{{CSSRef}}{{Non-standard_header}}</div>
<p>La propriété CSS <strong><code>overflow-clip-box-inline</code></strong> définit par rapport à quelle boîte est appliqué le rognement lorsque le contenu dépasse dans la direction en ligne (la direction correspondant au sens d'écriture).</p>
<pre class="brush:css no-line-numbers">/* Valeurs avec un mot-clé */
overflow-clip-box-inline: padding-box;
overflow-clip-box-inline: content-box;
/* Valeurs globales */
overflow-clip-box-inline: inherited;
overflow-clip-box-inline: initial;
overflow-clip-box-inline: 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-inline: 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>
|
