Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

visibility

Свойство CSS visibility управляет отображением элемента на HTML-странице. Но даже если элемент скрыт, он все равно влияет на форматирование, то есть окружающие элементы его «видят».

Чтобы полностью убрать элемент со страницы можно воспользоваться свойством display или абсолютным позиционированием (position).

Тип свойства

Назначение: форматирование.

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

Наследуется: да.

Значения

Значением свойства visibility является одно из ключевых слов управляющих отображением.

Процентная запись: не существует.

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

Синтаксис

visibility: visible | hidden | collapse | inherit

Пример CSS: использование visibility

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство visibility</title>
  <style type="text/css">
   table {
    width: 300px; /* ширина таблицы */
    border: 4px black solid; /* стили рамки */
   }
   td {
    height:50px; /* высота ячеек */
    border: 1px red solid; /* стили рамок */
   }
   #collap {
    visibility: collapse; /* убираем первый ряд */
   }
  </style>
 </head>
 <body>
  <table>
   <tr id="collap"><td>Ячейка 1.1</td><td>Ячейка 1.2</td><td>Ячейка 1.3</td></tr>
   <tr><td>Ячейка 2.1</td><td>Ячейка 2.2</td><td>Ячейка 2.3</td></tr>
  </table>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS visibility. в Chrome.

Использование свойства CSS visibility

В Firefox.

Использование свойства CSS visibility в Firefox

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:До 9.09.0 и выше2.0 и выше2.0 и вышеДо 10.510.5 выше3.1 и выше
Поддержка:ЧастичноДаЧастичноДаЧастичноДаЧастично

Internet Explorer 6.0 и 7.0 не понимают значение inherit и collapse.

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

Chrome, Safari и Opera до версии 10.0 включительно понимают значение collapse, как hidden.