CSS свойство visibility

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

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

Попробуйте значения visibility

hidden скрывает элемент, но сохраняет его место между соседями. Это отличается от display: none.

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

visibility: visible

HTML и CSS примера
HTML
<div class="stage">
  <div class="neighbor">До</div>
  <div class="demo-target">Скрываемый блок</div>
  <div class="neighbor">После</div>
</div>
CSS
* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  min-height: 180px;
  border: 2px dashed #607589;
  padding: 12px;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.5 system-ui;
}
.demo-target {
  padding: 10px;
  border: 2px solid #245a85;
  background: #ffe4bd;
  visibility: visible;
}
.neighbor {
  padding: 8px;
  background: #b9d7eb;
}

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

Спецификации: CSS display, svgwg

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьcss.properties.visibility
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
visibility✓1✓12✓1✓4✓1✓18✓4✓10.1✓1✓1.0✓4.4✓1
collapse✓1

Версия 1 выпущена в 2008 г.

Примечание MDN (англ.)

Before Chrome 62, visibility: collapse has the same effect as hidden for <tr>, <thead>, <tbody>, and <tfoot> elements, flex items, and ruby annotations, leaving a blank gap. It has no effect on <col> and <colgroup> elements.

Before Chrome 92, visibility: collapse supports <tr>, <thead>, <tbody>, and <tfoot> elements. For flex items and ruby annotations, it has the same effect as hidden, leaving a blank gap. It has no effect on <col> and <colgroup> elements.

Since Chrome 92, visibility: collapse supports <tr>, <thead>, <tbody>, <tfoot>, <col> and <colgroup> elements. For flex items and ruby annotations, it has the same effect as hidden, leaving a blank gap.

✓12

Версия 12 выпущена в 2015 г.

Примечание MDN (англ.)

For Edge 79 through Edge 91, visibility: collapse supports <tr>, <thead>, <tbody>, and <tfoot> elements. For flex items and ruby annotations, it has the same effect as hidden, leaving a blank gap. It has no effect on <col> and <colgroup> elements.

Since Edge 92, visibility: collapse supports <tr>, <thead>, <tbody>, <tfoot>, <col> and <colgroup> elements. For flex items and ruby annotations, it has the same effect as hidden, leaving a blank gap.

✓1

Версия 1 выпущена в 2004 г.

Примечание MDN (англ.)

Firefox doesn't hide borders when hiding <col> and <colgroup> elements if border-collapse: collapse is set.

Before Firefox 88, collapse is not supported on ruby annotations.

✓4

Версия 4 выпущена в 2000 г.

Примечание MDN (англ.)

Before Opera 49, visibility: collapse has the same effect as hidden for <tr>, <thead>, <tbody>, and <tfoot> elements, flex items, and ruby annotations, leaving a blank gap. It has no effect on <col> and <colgroup> elements.

Before Opera 78, visibility: collapse supports <tr>, <thead>, <tbody>, and <tfoot> elements. For flex items and ruby annotations, it has the same effect as hidden, leaving a blank gap. It has no effect on <col> and <colgroup> elements.

Since Opera 78, visibility: collapse supports <tr>, <thead>, <tbody>, <tfoot>, <col> and <colgroup> elements. For flex items and ruby annotations, it has the same effect as hidden, leaving a blank gap.

✓1.3

Версия 1.3 выпущена в 2005 г.

Примечание MDN (англ.)

Safari treats visibility: collapse like hidden, leaving a white gap.

Safari supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.

✓18

Версия 18 выпущена в 2012 г.

Примечание MDN (англ.)

Before Chrome Android 62, visibility: collapse has the same effect as hidden for <tr>, <thead>, <tbody>, and <tfoot> elements, flex items, and ruby annotations, leaving a blank gap. It has no effect on <col> and <colgroup> elements.

Before Chrome Android 92, visibility: collapse supports <tr>, <thead>, <tbody>, and <tfoot> elements. For flex items and ruby annotations, it has the same effect as hidden, leaving a blank gap. It has no effect on <col> and <colgroup> elements.

Since Chrome Android 92, visibility: collapse supports <tr>, <thead>, <tbody>, <tfoot>, <col> and <colgroup> elements. For flex items and ruby annotations, it has the same effect as hidden, leaving a blank gap.

✓4

Версия 4 выпущена в 2011 г.

Примечание MDN (англ.)

Firefox for Android doesn't hide borders when hiding <col> and <colgroup> elements if border-collapse: collapse is set.

Before Firefox for Android 88, collapse is not supported on ruby annotations.

✓10.1

Версия 10.1 выпущена в 2010 г.

Примечание MDN (англ.)

Before Opera Android 46, visibility: collapse has the same effect as hidden for <tr>, <thead>, <tbody>, and <tfoot> elements, flex items, and ruby annotations, leaving a blank gap. It has no effect on <col> and <colgroup> elements.

Before Opera Android 65, visibility: collapse supports <tr>, <thead>, <tbody>, and <tfoot> elements. For flex items and ruby annotations, it has the same effect as hidden, leaving a blank gap. It has no effect on <col> and <colgroup> elements.

Since Opera Android 65, visibility: collapse supports <tr>, <thead>, <tbody>, <tfoot>, <col> and <colgroup> elements. For flex items and ruby annotations, it has the same effect as hidden, leaving a blank gap.

✓1

Версия 1 выпущена в 2007 г.

Примечание MDN (англ.)

Safari on iOS treats visibility: collapse like hidden, leaving a white gap.

Safari on iOS supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.

✓1.0

Версия 1.0 выпущена в 2013 г.

Примечание MDN (англ.)

Before Samsung Browser 8.0, visibility: collapse has the same effect as hidden for <tr>, <thead>, <tbody>, and <tfoot> elements, flex items, and ruby annotations, leaving a blank gap. It has no effect on <col> and <colgroup> elements.

Before Samsung Browser 16.0, visibility: collapse supports <tr>, <thead>, <tbody>, and <tfoot> elements. For flex items and ruby annotations, it has the same effect as hidden, leaving a blank gap. It has no effect on <col> and <colgroup> elements.

Since Samsung Browser 16.0, visibility: collapse supports <tr>, <thead>, <tbody>, <tfoot>, <col> and <colgroup> elements. For flex items and ruby annotations, it has the same effect as hidden, leaving a blank gap.

✓4.4

Версия 4.4 выпущена в 2013 г.

Примечание MDN (англ.)

Before WebView Android 62, visibility: collapse has the same effect as hidden for <tr>, <thead>, <tbody>, and <tfoot> elements, flex items, and ruby annotations, leaving a blank gap. It has no effect on <col> and <colgroup> elements.

Before WebView Android 92, visibility: collapse supports <tr>, <thead>, <tbody>, and <tfoot> elements. For flex items and ruby annotations, it has the same effect as hidden, leaving a blank gap. It has no effect on <col> and <colgroup> elements.

Since WebView Android 92, visibility: collapse supports <tr>, <thead>, <tbody>, <tfoot>, <col> and <colgroup> elements. For flex items and ruby annotations, it has the same effect as hidden, leaving a blank gap.

✓1

Версия 1 выпущена в 2007 г.

Примечание MDN (англ.)

WebView on iOS treats visibility: collapse like hidden, leaving a white gap.

WebView on iOS supports the collapse value only on <tr>, <thead>, <tbody>, and <tfoot>, but not on <col> and <colgroup> elements.

hidden✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1
visible✓1✓12✓1✓15✓1✓18✓4✓14✓1✓1.0✓4.4✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

CSS синтаксис:

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

JavaScript синтаксис:

JavaScript
object.style.visibility = "hidden"

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

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

Версия CSS

CSS2

Наследуется

Да.

Анимируемое

Да.

Примеры, попробуйте сами

Скрытие с сохранением места

Средний блок скрыт, но место для него осталось. Замените hidden на visible.

base.css
CSS
* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
.row {
    display: flex;
    gap: 8px;
}
index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Скрытие с сохранением места</title>
  </head>
  <body>
    <div class="row">
      <div class="item">1</div>
      <div class="item target">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
    </div>
  </body>
</html>
style.css
CSS
.target {
    visibility: hidden;
}