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

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

Властивість `visibility`

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

автор: Svitlana

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 піксель.

автор: NagarD

Порада: Навіть невидимі елементи займають місце на сторінці. Використовуй 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

Значення без задання:	visible
Наслідує:	Так
Анімується:	Так
JavaScript синтаксис:	object.style.visibility="hidden"