MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

visibility

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Кратко

Visibility - свойство, которое может быть использовано для скрытия элемента, оставляя пространство, где он должен быть. Также скрывает строки и столбцы таблиц.

Начальное значениеvisible
Применяется квсе элементы
Наследуетсяда
Отображениевизуальный
Обработка значениякак указано
Animation typeвидимость
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

/* Значения */
visibility: visible;
visibility: hidden;
visibility: collapse;

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

Значения

visible
Значение по умолчанию, элемент виден.
hidden
Элемент не виден (полностью прозрачный, ничего не отображается), но продолжает влиять на шаблон. Потомки элемента могут быть показаны с помощью свойства visibility:visible (не работает в IE до 7 версии).
collapse
Для строк, столбцов, групп столбцов и групп строк в таблице, которые должны быть удалены (как с помощью display: none примененного к столбцу/строке таблицы). Однако, размер других строк и столбцов должен продолжать вычисляться так, словно скрытые строки/столбцы присутствуют. Это создано для быстрого удаления строк/столбцов из таблицы без дополнительного вычисления ширины и высоты частей таблицы. Для XUL элементов размер всегда равен 0, независимо от других стилей, влияющих на размер, хотя отступы продолжают учитываться. Для других элементов, collapse обрабатывается также, как hidden

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

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

Синтаксис

visible | hidden | collapse

Примеры

HTML 

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

CSS

.visible {
  visibility: visible;
}

.not-visible {
  visibility: hidden;
}

Замечания

Поддержка visibility:collapse отсутствует или частично не работает в некоторых современных браузерах. Во многих случаях может не корректно работать visibility:hidden со столбцами и строками.

visibility:collapse может изменить шаблон таблицы, если таблица содержит вложенные таблицы, пока visibility:visible не указан явно для вложенной таблицы.

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

Specification Status Comment
CSS Basic Box Model
Определение 'visibility' в этой спецификации.
Рабочий черновик No changes
CSS Transitions
Определение 'visibility' в этой спецификации.
Рабочий черновик Defines visibility as animatable.
CSS Level 2 (Revision 1)
Определение 'visibility' в этой спецификации.
Рекомендация Initial definition

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

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Минимальная поддержка 1.0[1] (Да) 1.0 (1.7 или ранее)[2] 4.0[4] 4.0[3] 1.0[1]
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Минимальная поддержка 1.0 1.0[1] (Да) 1.0 (1.0)[2] 6.0 6.0[3] 1.0[1]

[1] Chrome и Safari рассмотривают visibility: collapse как hidden, оставляя белый разрыв; они поддерживают его только на <tr>, <thead>, <tbody>, и <tfoot>, но не на <col> и <colgroup>.

[2] Firefox не убирает границы, когда прячет <col> и <colgroup>, если border-collapse: collapse is set.

[3] Opera, visibility: collapse работает с элементами таблицы, но не скрывает <tfoot> если он смежен с <tbody>.

[4] Internet Explorer не поддерживает visibility: initial.

Метки документа и участники

 Внесли вклад в эту страницу: alexdeg
 Обновлялась последний раз: alexdeg,