skip to main content

visibility

css

Кратко 🔗

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

Если при помощи opacity можно гибко изменять прозрачность элемента и делать его, например, видимым на 33%, то свойство visibility имеет только два состояния: видимый и невидимый.

Пример 🔗

<article>
<p class="visibility-visible">Эрнесту Хемингуэю приписывают авторство...</p>
<p class="visibility-hidden">Многие писатели упражнялись в жанре сверхмалой прозы...</p>
<p class="visibility-visible">В этом жанре можно написать и автобиографию...</p>
</article>
.visibility-hidden {
visibility: hidden;
}

Обратите внимание, что скрытый параграф всё равно влияет на поток документа и занимает отведённое ему место.

Как пишется 🔗

У свойства visibility всего два используемых значения:

  • visible — значение по умолчанию, элемент видим.
  • hidden — элемент не виден на странице, но занимает отведённое ему место, влияет на поток документа.

Важный момент: при значении hidden элемент становится невидимым для программ чтения с экрана (скринридеров), а также на него нельзя будет попасть при навигации с помощью клавиатуры. Стоит помнить об этом при разработке, если вам важна доступность сайта.

Ещё есть устаревшее значение collapce, которое нужно только при работе с таблицами. Современными браузерами оно не поддерживается и обрабатывается как hidden.

Так же можно применять в качестве значения стандартные ключевые слова: inherit, initial и unset.

Подсказки 🔗

💡 Свойство нельзя анимировать при помощи transform 😒

💡 Спрятанный элемент скрывается из так называемого accessability tree — становится недоступен для скринридеров и не может получить фокус при перемещении с помощью клавиатуры.

В работе 🔗

🛠 Обычно, когда я хочу точно-точно спрятать элемент, чтобы он не получал фокус ни при каких обстоятельствах и не был виден даже скринридерам, но при этом хочу плавно показать его по какому-то триггеру, то указываю одновременно несколько скрывающих свойств и использую трюк с transition:

CSS

.parent {
padding: 15px;
border: 1px dashed red;
}

.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;
}

HTML

<div class="parent">
<div class="block">Я простой текст. Наводишь курсор и я показываюсь</div>
</div>

Автор: Алёна,