Кратко
СкопированоСвойство visibility прячет элемент от глаз пользователя. Практически так же, как это делает opacity. И в том, и в другом случае элемент не виден, но механизм работы этих свойств разный.
Если при помощи opacity можно гибко изменять прозрачность элемента и делать его, например, видимым на 33%, то свойство visibility имеет только два состояния: видимый и невидимый.
Пример
Скопировано
<article> <p class="visibility-visible">Эрнесту Хемингуэю приписывают авторство...</p> <p class="visibility-hidden">Многие писатели упражнялись в жанре сверхмалой прозы...</p> <p class="visibility-visible">В этом жанре можно написать и автобиографию...</p></article>
<article>
<p class="visibility-visible">Эрнесту Хемингуэю приписывают авторство...</p>
<p class="visibility-hidden">Многие писатели упражнялись в жанре сверхмалой прозы...</p>
<p class="visibility-visible">В этом жанре можно написать и автобиографию...</p>
</article>
.visibility-hidden { visibility: hidden;}
.visibility-hidden {
visibility: hidden;
}
Обратите внимание, что скрытый параграф всё равно влияет на поток документа и занимает отведённое ему место.
Как пишется
СкопированоУ свойства visibility всего два используемых значения:
visible— значение по умолчанию, элемент видим.hidden— элемент не виден на странице, но занимает отведённое ему место, влияет на поток документа.
Важный момент: при значении hidden элемент становится невидимым для программ чтения с экрана (скринридеров), а также на него нельзя будет попасть при навигации с помощью клавиатуры. Стоит помнить об этом при разработке, если вам важна доступность сайта.
Ещё есть устаревшее значение collapse, которое нужно только при работе с таблицами. Современными браузерами оно не поддерживается и обрабатывается как hidden.
Так же можно применять в качестве значения стандартные ключевые слова: inherit, initial и unset.
Подсказки
Скопировано💡 Свойство нельзя анимировать при помощи transform 😒
💡 Спрятанный элемент скрывается из так называемого accessability tree — становится недоступен для скринридеров и не может получить фокус при перемещении с помощью клавиатуры.
На практике
Скопированосоветует
Скопировано🛠 Важная особенность свойства, что оно, в отличие от display или opacity, не просто прячет родителя, а наследуется на все дочерние элементы. Это значит, что это поведение можно переписать и вложенный элемент с visibility будет видно. Это можно использовать для кастомизации разметки, сгенерированной сторонней библиотекой.
В примере ниже представьте, что блок в рамке сгенерирован сторонней библиотекой.
Нажмите на кнопку «Кастомизировать». Для блока будет указано visibility. Весь блок будет скрыт. Для элементов, которые хотим оставить видимыми, добавляем visibility.
советует
Скопировано🛠 Обычно, когда я хочу точно-точно спрятать элемент, чтобы он не получал фокус ни при каких обстоятельствах и не был виден даже скринридерам, но при этом хочу плавно показать его по какому-то триггеру, то указываю одновременно несколько скрывающих свойств и использую трюк с transition:
.parent { padding: 15px; border: 1px solid currentColor;}.block { visibility: hidden; opacity: 0; transition: visibility 0s linear 300ms, opacity 300ms;}.parent:hover .block { visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity 300ms;}
.parent {
padding: 15px;
border: 1px solid currentColor;
}
.block {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 300ms, opacity 300ms;
}
.parent:hover .block {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s, opacity 300ms;
}
<div class="parent"> <div class="block">Я простой текст. Наводишь курсор и я показываюсь</div></div>
<div class="parent">
<div class="block">Я простой текст. Наводишь курсор и я показываюсь</div>
</div>