From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/visibility/index.html | 172 +++++++++++++++++++++++++++++++++ 1 file changed, 172 insertions(+) create mode 100644 files/ru/web/css/visibility/index.html (limited to 'files/ru/web/css/visibility') diff --git a/files/ru/web/css/visibility/index.html b/files/ru/web/css/visibility/index.html new file mode 100644 index 0000000000..933c5ddbdf --- /dev/null +++ b/files/ru/web/css/visibility/index.html @@ -0,0 +1,172 @@ +--- +title: visibility +slug: Web/CSS/visibility +tags: + - CSS + - Web + - Расположение CSS + - Свойства CSS + - Шаблон +translation_of: Web/CSS/visibility +--- +
{{CSSRef}}
+ +

Свойство visibility скрывает или показывает элемент без изменения разметки документа. Также скрывает строки и столбцы {{HTMLElement("table")}}.

+ +
{{EmbedInteractiveExample("pages/css/visibility.html")}}
+ + + +

Чтобы скрыть и удалить элемент из разметки, установите свойству {{cssxref("display")}} значение none, вместо использования visibility.

+ +

Синтаксис

+ +
/* Значения */
+visibility: visible;
+visibility: hidden;
+visibility: collapse;
+
+/* Глобальные значения */
+visibility: inherit;
+visibility: initial;
+visibility: unset;
+
+ +

Свойство visibility указывается в качестве одного из значений ниже.

+ +

Значения

+ + + +
+
visible
+
Значение по умолчанию, элемент виден.
+
hidden
+
Элемент не виден (полностью прозрачный, ничего не отображается), но продолжает влиять на шаблон. Потомки элемента могут быть показаны с помощью свойства visibility:visible. Элемент не может получить focus (например, при навигации с помощью tabindex).
+
collapse
+
+ +

Синтаксис

+ +
{{csssyntax}}
+ +

Интерполяция

+ +

Значения видимости изменяются между видим и не видим. Интерполяция будет, если одно из начальных или конечных значений будет видимо или нет. Если одно из значений visible, интерполируется как дискретный шаг, где значения временной функции от 0 до 1 для visible и другие значения временной функции (которые происходят только в начале/конце перехода, или как результат функции cubic-bezier() cо значениями вне [0, 1]) ближе к конечной точке.

+ +

Примеры

+ +

Базовый пример

+ +

HTML 

+ +
<p class="visible">Первый параграф виден.</p>
+<p class="not-visible">Второй параграф не виден.</p>
+<p class="visible">Третий параграф также виден. Заметь, второй параграф занимает место.</p>
+
+ +

CSS

+ +
.visible {
+  visibility: visible;
+}
+
+.not-visible {
+  visibility: hidden;
+}
+
+ +

{{EmbedLiveSample('Базовый_пример')}}

+ +

Пример с таблицой

+ +

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>
+ +

CSS

+ +
.collapse {
+  visibility: collapse;
+}
+
+table {
+  border: 1px solid red;
+}
+
+td {
+  border: 1px solid gray;
+}
+ +

{{EmbedLiveSample('Пример_с_таблицой')}}

+ +

Соображения доступности

+ +

Использование visibility со значением hidden на элементе удалит его из дерева доступности. Это приведёт к тому, что элемент и все его дочерние элементы больше не будут показаны в скринридерах.

+ +

Примечания

+ + + +

Спецификация

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Flexbox', '#visibility-collapse', 'visibility')}}{{Spec2('CSS3 Flexbox')}}Определяет значение collapse применимым к flex элементам
{{SpecName('CSS3 Box', '#the-visibility-property', 'visibility')}}{{Spec2('CSS3 Box')}}Без изменений
{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}{{Spec2('CSS3 Transitions')}}Определяет visibility как анимирумое.
{{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}{{Spec2('CSS2.1')}}Изначальное определение
+ +

{{cssinfo}}

+ +

Совместимость с браузерами

+ +

{{Compat("css.properties.visibility")}}

-- cgit v1.2.3-54-g00ecf