visibility

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Свойство 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: none или opacity: 0, не просто прячет родителя, а наследуется на все дочерние элементы. Это значит, что это поведение можно переписать и вложенный элемент с visibility: visible будет видно. Это можно использовать для кастомизации разметки, сгенерированной сторонней библиотекой:

Открыть демо в новой вкладке

Алёна Батицкая

Секция статьи "Алёна Батицкая"

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

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

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

        
        
          
        
      
Открыть демо в новой вкладке