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
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
|
---
title: visibility
slug: Web/CSS/visibility
tags:
- CSS
- Propriété
- Reference
translation_of: Web/CSS/visibility
---
<div>{{CSSRef}}</div>
<p>La propriété <strong><code>visibility</code></strong> peut être utilisée afin de cacher un élément tout en conservant occupé l'espace dans lequel il aurait été visible. Elle permet aussi de masquer des lignes ou des colonnes dans un tableau (cf. {{HTMLElement("table")}}).</p>
<div>{{EmbedInteractiveExample("pages/css/visibility.html")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<div class="note">
<p><strong>Note :</strong> Afin de cacher un élément et de le retirer de la disposition du document, on utilisera plutôt la propriété {{cssxref("display")}} avec la valeur <code>none</code>.</p>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="brush: css no-line-numbers">/* Avec un mot-clé */
visibility: visible;
visibility: hidden;
visibility: collapse;
/* Valeurs globales */
visibility: inherit;
visibility: initial;
visibility: unset;
</pre>
<p>La propriété <code>visibility</code> est définie avec l'un des mots-clés suivants.</p>
<h3 id="Valeurs">Valeurs</h3>
<dl>
<dt><code>visible</code></dt>
<dd>La valeur par défaut, la boîte est visible.</dd>
<dt><code>hidden</code></dt>
<dd>La boîte est invisible (totalement transparente, rien n'est dessiné) mais continue d'avoir un impact sur la disposition. Les fils de l'élément seront visibles s'ils ont <code>visibility:visible</code>. L'élément ne pourra plus recevoir le focus (cf. <a href="/fr/docs/Web/HTML/Attributs_universels/tabindex">la navigation au clavier avec les tabulations</a>).</dd>
<dt><code>collapse</code></dt>
<dd>
<ul>
<li>Pour les lignes, les colonnes, les groupes de lignes et les groupes de colonnes d'un tableau, les éléments sont masqués et l'espace occupé est retiré (comme si on avait appliqué <code>{{cssxref("display")}}: none</code> aux colonnes/lignes du tableau). La taille des autres lignes et colonnes continue d'être calculée comme si les lignes et colonnes masquées étaient présentes. Cela a été conçu afin de pouvoir retirer rapidement des lignes et/ou des colonnes sans avoir à recalculer les dimensions pour l'ensemble du tableau.</li>
<li>Les éléments flexibles sont masqués et l'espace qu'ils auraient occupé est retiré.</li>
<li>Pour les éléments XUL, la taille calculée des éléments vaut toujours zéro, quel que soit les autres styles qui pourraient affecter la taille, les marges continuent de s'appliquer.</li>
<li>Pour les autres éléments, <code>collapse</code> est traité comme <code>hidden</code>.</li>
</ul>
</dd>
</dl>
<h3 id="Syntaxe_formelle">Syntaxe formelle</h3>
{{csssyntax}}
<h2 id="Interpolation">Interpolation</h2>
<p>Les valeurs de visibilité peuvent être interpolées entre <em>visible</em> et <em>masqué</em>. L'une des valeurs de début ou de fin doit donc être <code>visible</code>, sinon il n'y aura pas d'interpolation. L'interpolation est discrète (passage direct d'un état à l'autre), les valeurs supérieures à 0 sont considérées équivalentes à <code>visible</code>. On pourra plutôt utiliser {{cssxref("opacity")}} pour créer un effet doux plutôt que de masquer/rendre visible l'élément brusquement.</p>
<h2 id="Exemples">Exemples</h2>
<h3 id="Exemple_simple">Exemple simple</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><p>
On peut dire tout ce qu'on veut ici,
ce ne sera pas lisible de toute façon.
</p>
<p class="coucou">
Alors que là, on a la bonne classe.
Coucou tout le monde :)
</p>
<p>
Et on repasse en mode invisible.
</p>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush:css">p {
/* les paragraphes ne seront pas visibles */
visibility: hidden;
}
p.coucou {
/* sauf ceux avec la classe coucou */
visibility: visible;
}
</pre>
<h4 id="Résultat">Résultat</h4>
<p>{{EmbedLiveSample("Exemple_simple")}}</p>
<h3 id="Exemple_sur_un_tableau">Exemple sur un tableau</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><table>
<tr>
<td>Jean</td>
<td>Biche</td>
</tr>
<tr class="col">
<td>Hit</td>
<td>Girl</td>
</tr>
<tr>
<td>Super</td>
<td>Cochon</td>
</tr>
</table>
</pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css">tr.col {
/* les lignes de tableau avec la classe */
/* col seront repliées */
visibility: collapse;
}
</pre>
<h4 id="Résultat_2">Résultat</h4>
<p>{{EmbedLiveSample("Exemple_sur_un_tableau")}}</p>
<h2 id="Accessibilité">Accessibilité</h2>
<p>Utiliser la propriété <code>visibility</code> avec la valeur <code>hidden</code> retirera l'objet de <a href="/fr/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">l'arbre d'accessibilité</a>. Les éléments ciblés, ainsi que leurs éléments descendants ne seront plus annoncés par les lecteurs d'écran.</p>
<h2 id="Notes">Notes</h2>
<ul>
<li>Le support de <code>visibility:collapse</code> est absent ou incorrect pour certains navigateurs récents. Dans de nombreux cas, il n'est pas correctement traité comme <code>visibility:hidden</code> sur les éléments qui ne sont pas des lignes et/ou des colonnes de tableau.</li>
<li><code>visibility:collapse</code> peut modifier la disposition d'un tableau si le tableau possède des tableaux imbriqués dont les cellules sont repliées, sauf si <code>visibility:visible</code> est défini explicitement sur les tableaux imbriqués.</li>
</ul>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Flexbox', '#visibility-collapse', 'visibility')}}</td>
<td>{{Spec2('CSS3 Flexbox')}}</td>
<td>Définition de la valeur <code>collapse</code> pour les éléments flexibles.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Box', '#visibility-prop', 'visibility')}}</td>
<td>{{Spec2('CSS3 Box')}}</td>
<td>Aucune modification.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td><code>visibility</code> peut désormais être animée.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Définition initiale.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("css.properties.visibility")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{cssxref("display")}}</li>
<li>{{cssxref("opacity")}}</li>
</ul>
|
