Visible css – css — What is the difference between visibility:hidden and display:none?

visibility | htmlbook.ru

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 1.0+ 4.0+ 9.5+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+

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

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Синтаксис

visibility: visible | hidden | collapse | inherit

Значения

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>visibility</title>
  <style>
   .descr { visibility: hidden; }
   .b:hover + .descr {
    visibility: visible;
   }
  </style>
 </head>
 <body>
  <img src="images/button.gif" alt="Кнопка">
  <div>
   Данная эксклюзия является подмножеством астрациональных 
   супремативных монотенных федоний кадонарного экстрафазория.</div>
 </body>
</html>

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

[window.]document.getElementById("elementID").style.visibility

Браузеры

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

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

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

visibility | CSS | WebReference

Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остаётся за ним. Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование или воспользоваться свойством 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. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой.

Песочница

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

Пример

<!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>Кнопка</div>
  <p>
   Данная эксклюзия является подмножеством астрациональных 
   супремативных монотенных федоний кадонарного экстрафазория.</p>
 </body>
</html>

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

Объект.style.visibility

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

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

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.
×

Браузеры ?

visible, hidden4121411
collapse81219.541
visible, hidden1161
collapse1104

Браузеры

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

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 30.08.2017

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Свойство visibility | CSS справочник

CSS свойства

Определение и применение

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

Поддержка браузерами

CSS синтаксис:

visibility:"visible | hidden | collapse | initial | inherit";

JavaScript синтаксис:

object.style.visibility = "hidden"

Значения свойства

ЗначениеОписание
visibleЭлемент видимый. Это значение по умолчанию.
hiddenЭлемент невидим. При скрытии элемента появляется пустое пространство, чтобы этого избежать необходимо использовать свойство display со значением none.
collapseСкрывает строку или столбец, при этом не изменяя общий вид таблицы. Используется только с элементами таблицы. Если collapse используется на другие элементы, он действует как hidden.
initialУстанавливает свойство в значение по умолчанию.
inheritУказывает, что значение наследуется от родительского элемента.

Версия CSS

CSS2

Наследуется

Да.

Анимируемое

Да.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title> Свойство background-image </title>
<style> 
.hidden {
visibility : hidden;
border : 5px dotted orange;
width : 125px;
text-align : center;
}
.hidden img {
width : 75px;
height : 75px;
}
.hidden:hover {
visibility : visible;
}
.hidden img {
border : 1px solid;
visibility : visible;
}
</style>
</head>
	<body>
		<div class = "hidden">
			<img src = "nich" alt = "nich">
		<div class = "visible">Наведи на меня.</div>
		</div>
	</body>
</html>
Пример использования свойства visibility.CSS свойства

visibility | CSS справочник

Поддержка браузерами

12.0+ 4.0+ 1.0+ 1.0+ 4.0+ 1.0+

Описание

CSS свойство visibility позволяет скрывать элементы, но при этом оставлять пустое пространство на его месте, равное размеру скрытого элемента.

Если вы хотите избежать появления пустого пространства, то следует воспользоваться CSS свойством display со значением none.

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

Значение по умолчанию: visible
Применяется: ко всем элементам
Анимируется: да
Наследуется: да
Версия: CSS2
Синтаксис JavaScript: object.style.visibility="hidden"

Синтаксис

visibility: visible|hidden|collapse|inherit;

Значения свойства

Значение Описание
visible Указывает, что элемент будет отображен на странице.
hidden Указывает, что элемент будет скрыт.
collapse Используется только с элементами таблицы. Скрывает строку или столбец, при этом не изменяя общий вид таблицы. Пустое пространство становится доступным для другого содержимого.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

DIV элемент.

Элемент, значение которого будет изменяться.

DIV элемент.

div#myDIV {
background-color: yellow;
visibility: visible;
}

Отправить ответ

avatar
  Подписаться  
Уведомление о