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.
Синтаксис
Значения
- 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, hidden | 4 | 12 | 1 | 4 | 1 | 1 |
| collapse | 8 | 12 | 1 | 9.5 | 4 | 1 |
| visible, hidden | 1 | 1 | 6 | 1 |
| collapse | 1 | 10 | 4 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 30.08.2017
Редакторы: Влад Мержевич
Свойство 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Наследуется
Да.Анимируемое
Да.Пример использования
Пример использования свойства visibility.CSS свойства<!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 справочник
Поддержка браузерами
| 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;
}