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
|
---
title: visibility
slug: Web/CSS/visibility
tags:
- CSS
- Web
- Расположение CSS
- Свойства CSS
- Шаблон
translation_of: Web/CSS/visibility
---
<div>{{CSSRef}}</div>
<p>Свойство <strong><code>visibility</code></strong> скрывает или показывает элемент без изменения разметки документа. Также скрывает строки и столбцы {{HTMLElement("table")}}.</p>
<div>{{EmbedInteractiveExample("pages/css/visibility.html")}}</div>
<p>Чтобы скрыть и удалить элемент из разметки, установите свойству {{cssxref("display")}} значение <code>none</code>, вместо использования <code>visibility</code>.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush: css">/* Значения */
visibility: visible;
visibility: hidden;
visibility: collapse;
/* Глобальные значения */
visibility: inherit;
visibility: initial;
visibility: unset;
</pre>
<p>Свойство <code>visibility</code> указывается в качестве одного из значений ниже.</p>
<h3 id="Значения">Значения</h3>
<dl>
<dt><code>visible</code></dt>
<dd>Значение по умолчанию, элемент виден.</dd>
<dt><code>hidden</code></dt>
<dd>Элемент не виден (полностью прозрачный, ничего не отображается), но продолжает влиять на шаблон. Потомки элемента могут быть показаны с помощью свойства <code>visibility:visible</code>. Элемент не может получить focus (например, при навигации с помощью <a href="/ru/docs/Web/HTML/Global_attributes/tabindex">tabindex</a>).</dd>
<dt><code>collapse</code></dt>
<dd>
<ul>
<li>Для строк, столбцов, групп столбцов и групп строк в таблице, которые должны быть удалены (как с помощью <code>{{Cssxref("display")}}: none</code> применённого к столбцу/строке таблицы). Однако, размер других строк и столбцов должен продолжать вычисляться так, словно скрытые строки/столбцы присутствуют. Это создано для быстрого удаления строк/столбцов из таблицы без дополнительного вычисления ширины и высоты частей таблицы.</li>
<li>Для XUL элементов размер всегда равен 0, независимо от других стилей, влияющих на размер, хотя отступы продолжают учитываться.</li>
<li>Для других элементов <code>collapse</code> обрабатывается также, как <code>hidden</code></li>
</ul>
</dd>
</dl>
<h3 id="Синтаксис_2">Синтаксис</h3>
{{csssyntax}}
<h2 id="Интерполяция">Интерполяция</h2>
<p>Значения видимости изменяются между <em>видим</em> и <em>не видим</em>. Интерполяция будет, если одно из начальных или конечных значений будет видимо или нет. Если одно из значений <code>visible</code>, интерполируется как дискретный шаг, где значения временной функции от <code>0</code> до <code>1</code> для <code>visible</code> и другие значения временной функции (которые происходят только в начале/конце перехода, или как результат функции <code>cubic-bezier()</code> со значениями вне [0, 1]) ближе к конечной точке.</p>
<h2 id="Примеры">Примеры</h2>
<h3 id="Базовый_пример">Базовый пример</h3>
<h4 id="HTML">HTML </h4>
<pre class="brush: html"><p class="visible">Первый параграф виден.</p>
<p class="not-visible">Второй параграф не виден.</p>
<p class="visible">Третий параграф также виден. Заметь, второй параграф занимает место.</p>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">.visible {
visibility: visible;
}
.not-visible {
visibility: hidden;
}
</pre>
<p>{{EmbedLiveSample('Базовый_пример')}}</p>
<h3 id="Пример_с_таблицей">Пример с таблицей</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><table>
<tr>
<td>1.1</td>
<td class="collapse">1.2</td>
<td>1.3</td>
</tr>
<tr class="collapse">
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css">.collapse {
visibility: collapse;
}
table {
border: 1px solid red;
}
td {
border: 1px solid gray;
}
</pre>
<p>{{EmbedLiveSample('Пример_с_таблицей')}}</p>
<h2 id="Соображения_доступности">Соображения доступности</h2>
<p>Использование <code>visibility</code> со значением <code>hidden</code> на элементе удалит его из <a href="/ru/docs/Learn/%D0%94%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D0%BE%D1%81%D1%82%D1%8C/What_is_accessibility#%D0%A1%D0%BF%D0%B5%D1%86%D0%B8%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5_API_%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%B0">дерева доступности</a>. Это приведёт к тому, что элемент и все его дочерние элементы больше не будут показаны в скринридерах.</p>
<h2 id="Примечания">Примечания</h2>
<ul>
<li>Поддержка <code>visibility:collapse</code> отсутствует или частично не работает в некоторых современных браузерах. Во многих случаях может не корректно работать <code>visibility:hidden</code> со столбцами и строками.</li>
<li><code>visibility:collapse</code> может изменить шаблон таблицы, если таблица содержит вложенные таблицы, пока <code>visibility:visible</code> не указан явно для вложенной таблицы.</li>
</ul>
<h2 id="Спецификация">Спецификация</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Flexbox', '#visibility-collapse', 'visibility')}}</td>
<td>{{Spec2('CSS3 Flexbox')}}</td>
<td>Определяет значение <code>collapse</code> применимым к flex элементам</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Box', '#the-visibility-property', 'visibility')}}</td>
<td>{{Spec2('CSS3 Box')}}</td>
<td>Без изменений</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Определяет <code>visibility</code> как анимируемое.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Изначальное определение</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
<p>{{Compat}}</p>
|
