visibility

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

Синтаксис

visibility: visible | hidden | collapse | inherit

Значения

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

HTML5 CSS2.1 IE Cr Op Sa Fx

     .descr < visibility: hidden; >.b:hover + .descr

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

[window.]document.getElementById(» elementID «).style.visibility

Браузеры

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

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

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

Источник

visibility¶

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

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

Демо¶

Синтаксис¶

/* Keyword values */ visibility: visible; visibility: hidden; visibility: collapse; /* Global values */ visibility: inherit; visibility: initial; visibility: unset;

Значения¶

Примечание¶

Internet Explorer до версии 7.0 включительно не поддерживает значение collapse .
Браузер Safari до версии 4.0 не поддерживает значение collapse .
Opera до версии 9.5 воспринимает значение collapse как hidden для всех элементов.

Значение по-умолчанию: visible

Применяется ко всем элементам

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

Описание и примеры¶

 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

 html> head> meta charset="utf-8" /> title>visibilitytitle> 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>

Источник

visibility

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

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

Синтаксис

visibility: visible | hidden | collapse

Синтаксис

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

Значения

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Источник

visibility

Синтаксис

visibility: visible | hidden | collapse | inherit

Значения

HTML5 CSS2.1 IE Cr Op Sa Fx

     .descr < visibility: hidden; >.b:hover + .descr

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

[window.]document.getElementById(» elementID «).style.visibility

Браузеры

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

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

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

Источник

visibility

Свойство visibility прячет элемент от глаз пользователя. Практически так же, как это делает opacity . И в том, и в другом случае элемент не виден, но механизм работы этих свойств разный.

Если при помощи opacity можно гибко изменять прозрачность элемента и делать его, например, видимым на 33%, то свойство visibility имеет только два состояния: видимый и невидимый.

Пример

Скопировать ссылку «Пример» Скопировано

   Эрнесту Хемингуэю приписывают авторство.
  Многие писатели упражнялись в жанре сверхмалой прозы.
  В этом жанре можно написать и автобиографию.
   article> p class="visibility-visible">Эрнесту Хемингуэю приписывают авторство. p> p class="visibility-hidden">Многие писатели упражнялись в жанре сверхмалой прозы. p> p class="visibility-visible">В этом жанре можно написать и автобиографию. p> article>

 .visibility-hidden  visibility: hidden;> .visibility-hidden  visibility: hidden; >

Обратите внимание, что скрытый параграф всё равно влияет на поток документа и занимает отведённое ему место.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

У свойства visibility всего два используемых значения:

visible — значение по умолчанию, элемент видим.
hidden — элемент не виден на странице, но занимает отведённое ему место, влияет на поток документа.

Важный момент: при значении hidden элемент становится невидимым для программ чтения с экрана (скринридеров), а также на него нельзя будет попасть при навигации с помощью клавиатуры. Стоит помнить об этом при разработке, если вам важна доступность сайта.

Ещё есть устаревшее значение collapse , которое нужно только при работе с таблицами. Современными браузерами оно не поддерживается и обрабатывается как hidden .

Так же можно применять в качестве значения стандартные ключевые слова: inherit , initial и unset .

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Свойство нельзя анимировать при помощи transform 😒

💡 Спрятанный элемент скрывается из так называемого accessability tree — становится недоступен для скринридеров и не может получить фокус при перемещении с помощью клавиатуры.

На практике

Скопировать ссылку «На практике» Скопировано

Дмитрий Семиградский советует

Скопировать ссылку «Дмитрий Семиградский советует» Скопировано

🛠 Важная особенность свойства, что оно, в отличие от display : none или opacity : 0 , не просто прячет родителя, а наследуется на все дочерние элементы. Это значит, что это поведение можно переписать и вложенный элемент с visibility : visible будет видно. Это можно использовать для кастомизации разметки, сгенерированной сторонней библиотекой.

В примере ниже представьте, что блок в рамке сгенерирован сторонней библиотекой.

Нажмите на кнопку «Кастомизировать». Для блока будет указано visibility : hidden . Весь блок будет скрыт. Для элементов, которые хотим оставить видимыми, добавляем visibility : visible .

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Обычно, когда я хочу точно-точно спрятать элемент, чтобы он не получал фокус ни при каких обстоятельствах и не был виден даже скринридерам, но при этом хочу плавно показать его по какому-то триггеру, то указываю одновременно несколько скрывающих свойств и использую трюк с transition :

 .parent  padding: 15px; border: 1px solid currentColor;> .block  visibility: hidden; opacity: 0; transition: visibility 0s linear 300ms, opacity 300ms;> .parent:hover .block  visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity 300ms;> .parent  padding: 15px; border: 1px solid currentColor; > .block  visibility: hidden; opacity: 0; transition: visibility 0s linear 300ms, opacity 300ms; > .parent:hover .block  visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity 300ms; >

   Я простой текст. Наводишь курсор и я показываюсь  div class="parent"> div class="block">Я простой текст. Наводишь курсор и я показываюсьdiv> div>

Источник