CSS visibility — сховати елемент: hidden, visible, collapse

Властивість visibility визначає, чи буде елемент приховано. Властивість призначена для відображення або приховування елемента, включаючи рамку навколо нього і фон. Під час приховування елементу, хоча він і стає прихованим, місце, яке він займає, залишається за ним. Якщо передбачається вивід різних елементів в одне і те ж місце екрану, для обходу цієї особливості слід використовувати абсолютне позиціонування або скористатися властивістю display.

Властивість visibility також приховує рядки і колонки таблиці (<table>). Якщо треба не тільки приховати елемент, але й також повністю прибрати його з потоку - використовуйте властивість display.

правити

visibility чи display: none?

Три способи сховати елемент роблять різні речі:

• visibility: hidden — елемент невидимий, але місце за ним лишається: сусіди не зсуваються;
• display: none — елемента ніби немає: місце звільняється, макет перебудовується;
• opacity: 0 — елемент прозорий, але живий: далі ловить кліки й фокус.

visibility успадковується, і в цьому її унікальний трюк: усередині прихованого батька можна показати окрему дитину, поставивши їй visibility: visible. Із display: none такого не зробити.

Значення collapse призначене для рядків і колонок таблиць: рядок зникає, як із display: none, але браузер не перераховує ширину колонок — таблиця не смикається.

Для екранних читачів visibility: hidden ховає елемент так само надійно, як і візуально. Якщо сховати треба лише візуально, а читачам лишити (підписи, службові заголовки) — це окремий прийом .visually-hidden через clip-path і розмір 1×1 піксель.

правити

Порада

Навіть невидимі елементи займають місце на сторінці. Використовуй css властивість display для створення невидимих елементів, які не займають простір на макеті сторінки, або використайте абсолютне позиціонування, щоб накласти новий елемент над прихованим!

автор: Svitlana правити

Нотатка

Специфікація flexbox передбачає, що visibility: collapse; діє на гнучкий елемент так як і на рядок або колонку таблиці.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

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

Властивість visibility може отримувати 5 значень:

visible

Відображає елемент як видимий.

автор: Svitlana

правити

hidden

Елемент стає невидимим. На відмінно від властивості display:none, продовжує займати місце на макеті сторінки.

автор: Svitlana

правити

collapse

Тільки для таблиць. Робить комірку чи рядок невидимою, при цьому, на відмінно від властивості display:none макет таблиці не змінюється.

Це значення не підтримується браузером Internet Explorer.

Якщо це значення застосовується не до таблиці, то результат його використання буде таким же, як hidden.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання.

автор: Svitlana

правити

inherit

Вказує на спадковість властивостей від свого батьківського елемента.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	4	12	4
visible, hidden	1.0	1.0	1.0	4.0	12.0	4.0
collapse	1.0	1.0	4.0	9.5	12.0	8.0

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1
visible, hidden	1.0		1.0	1.0
collapse	Не підтримується		1.0	4.0

Приклади

+ запропонувати свій приклад у пісочниці

<div class="info">
	<p>За допомогою властивості <code>visibility</code> ми можемо визначити, чи буде елемент приховано.</p>
	<p>Нижче, для контейнера другого блоку (жовтого кольору) задано значення <em>hidden</em>, що приховало його зі сторінки.</p>
</div>

<div class="wrapper">
	<div class="block one">
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.</p>
		</div>
	</div>
	<div class="block two">
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			tempor incididunt ut labore et dolore magna aliqua.</p>
		</div>
	</div>
</div>

* {
	box-sizing: border-box;
}

body {
	font-family: monospace;
	font-size: 17px;
}

.info {
	padding: 4px 6px;
}

code {
	font-weight: 700;
	color: #444;
	border-bottom: 2px solid #666;
}

.wrapper {
	display: flex;
	justify-content: space-around;
}

.block {
	width: 25%;
	height: 150px;
	background-color: gold;
	position: relative;
	font-size: 13px;
	padding: 4px;
}

.content {
	visibility: visible;
}

.block.two {
	visibility: hidden;
}

<div class="block">
  <span>Тицяй</span>
  <span>на</span>
  <span>елементи,</span>
  <span>щоб</span>
  <span>змінити</span>
  <span>значення</span>
  <span>застосовані</span>
  <span>для</span>
  <span>властивості</span>
  <span>visibility...</span>
</div>

.block {
  background-color: #eee;
  padding: 16px;
  line-height: 1.4;
  font-family: monospace;
  font-size: 20px;
}

.block span {
  display: inline-block;
  padding: 2px 8px;
  background-color: orange;
  margin-bottom: 8px;
  border-radius: 8px;
  color: #252525;
  cursor: pointer;
  transition: all 0.1s linear;
  visibility: visible;
}

.block span:hover {
  background-color: gray;
  color: #fff;
}

window.onclick = function (e) {
  e.target.style.visibility = 'hidden';
};
//# sourceURL=pen.js

<p>Секретне слово: <span>слово</span> (але Ви його не побачите!)</p>

body {
  font-family: sans-serif;
  font-size: 25px;
  color: #666;
  text-align: center;
  padding-top: 36px;
  line-height: 1.4;
}

span {
  visibility: hidden;
}