свойство visibilityCSS3-генератор ☛

Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним. Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование или воспользоваться свойством display.

Краткая информация

Значение по умолчанию	visible
Наследуется	Да
Применяется	Ко всем элементам
Анимируется	Да

Синтаксис ?

visibility: visible | hidden | collapse

✖

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

visible: Отображает элемент как видимый.
hidden: Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы.
collapse: Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. Это значение не поддерживается браузером Internet Explorer.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>visibility</title>
  <style>
   .button {
    background: #fc0;
    padding: 10px 20px;
    display: inline-block;
   }
   .descr { visibility: hidden; }
   .button:hover + .descr {
    visibility: visible;
   }
  </style>
 </head>
 <body>
  <div class="button">Кнопка</div>
  <p class="descr">
   Данная эксклюзия является подмножеством астрациональных
   супремативных монотенных федоний кадонарного экстрафазория.</p>
 </body>
</html>

Объектная модель

Объект.style.visibility

Примечание

Internet Explorer до версии 7.0 включительно не поддерживает значение collapse.

Браузер Safari до версии 4.0 не поддерживает значение collapse.

Opera до версии 9.5 воспринимает значение collapse как hidden для всех элементов.

Браузеры: Настольные Мобильные ?

Internet Explorer		Chrome	Opera		Safari		Firefox
4	8	1	4	9.5	1	4	1

Android	Firefox Mobile	Opera Mobile	Safari Mobile
1	1	6	1

✖

Браузеры

В таблице браузеров применяются следующие обозначения.

— элемент полностью поддерживается браузером;
— элемент браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

Форматирование