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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
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
---
<div>{{CSSRef}}{{Non-standard_header}}</div>
<p>La propriété <strong><code>overflow-clip-box</code></strong> 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")}}.</p>
<pre class="brush:css no-line-numbers">/* 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;
</pre>
<div class="note">
<p><strong>Note :</strong> Par défaut, sur Gecko, <code>padding-box</code> est utilisé partout mais <code><input type="text"></code> et les éléments similaires utilisent la valeur <code>content-box</code>. 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.</p>
</div>
<p>{{cssinfo}}</p>
<h2 id="Syntaxe">Syntaxe</h2>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>padding-box</code></dt>
<dd>Ce mot-clé indique que le rognage du contenu qui dépasse sera fait par rapport à <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">la boîte de remplissage (<em>padding</em>)</a>.</dd>
<dt><code>content-box</code></dt>
<dd>Ce mot-clé indique que le rognage du contenu qui dépasse sera fait par rapport à <a href="/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte">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="HTML">HTML</h3>
<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>
<h3 id="CSS">CSS</h3>
<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: padding-box;
}
</pre>
<h3 id="JavaScript">JavaScript</h3>
<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>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample('Exemples')}}</p>
<h2 id="Spécifications">Spécifications</h2>
<p>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")}}.</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("29.0")}}<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>Propriété raccourcie, gestion de deux valeurs</td>
<td>{{CompatGeckoDesktop("59")}}</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("29.0")}}<sup>[1]</sup></td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>Propriété raccourcie, gestion de deux valeurs</td>
<td>{{CompatGeckoMobile("59")}}</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 grâce à 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 au sein des feuilles de style de l'agent utilisateur pour le chrome. Pour plus d'informations, 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>
|
