Css hidden: visibility — CSS — Дока

visibility — CSS — Дока

1. Кратко
2. Пример
3. Как пишется
4. Подсказки
5. На практике
   1. Дмитрий Семиградский советует
   2. Алёна Батицкая советует

Кратко

Скопировано

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

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

Пример

Скопировано

<article>  <p>Эрнесту Хемингуэю приписывают авторство...</p>  <p>Многие писатели упражнялись в жанре сверхмалой прозы...</p>  <p>В этом жанре можно написать и автобиографию. ..</p></article>
          <article>
  <p>Эрнесту Хемингуэю приписывают авторство...</p>
  <p>Многие писатели упражнялись в жанре сверхмалой прозы...</p>
  <p>В этом жанре можно написать и автобиографию...</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 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>  <div>Я простой текст. Наводишь курсор и я показываюсь</div></div>
          
 <div>
  <div>Я простой текст. Наводишь курсор и я показываюсь</div>
</div>

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

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

opacity

ctrl + alt + ←

→

clip

ctrl + alt + →

В чем разница между display: none и visibility: hidden в CSS?

2022-07-21

Порой при разработке веб-страниц иногда требуется «спрятать» конкретные элементы. Вы, конечно, можете просто удалить эти элементы из HTML-разметки. Но это не выход из положения. Чтобы сохранить элемент, но скрыть его, необходимо использовать CSS или HTML hidden.

Два самых распространенных способа скрыть элемент — это свойства CSS «display» и «visibility». На первый взгляд, кажется, что оба свойства делают одно и то же. Но каждое из них имеет свои отличительные особенности, о которых следует знать.

При использовании visibility: hidden элемент не отображается в браузере. Но скрытый элемент все еще занимает место в дизайне страницы. Это выглядит так, будто вы сделали элемент невидимым, но он все еще остается на своем месте и занимает пространство.

Если вы размещаете на веб-странице тег DIV и используете CSS, чтобы придать ему размер 100 на 100 пикселей, свойство visibility: hidden делает блок невидимым на экране. Но текст, следующий за ним, будет размещаться таким образом, словно этот блок все еще присутствует на странице.

Я бы использовал hidden HTML input, чтобы сначала спрятать этот элемент, а затем вернуть его обратно при наведении курсора. Это один из примеров использования этого свойства.

Display

В отличие от свойства visibility, при использовании которого элемент остается в потоке документа, display: none полностью убирает элемент из документа. Он больше не занимает места даже несмотря на то, что он еще находится в исходном коде. Элемент действительно удаляется из потока документа. Но если вы неправильно используете это свойство, оно может полностью разрушить страницу!

Я часто использую display: none, когда тестирую веб-страницу. Когда мне нужно ненадолго скрыть какую-либо область страницы, чтобы я смог протестировать другую. Но необходимо помнить, что скрытый элемент нужно вернуть обратно на веб-страницу до того, как она будет добавлена на сайт. Сделать это нужно потому, что элемент, удаленный из потока документа данным методом не виден поисковикам. В прошлом этот способ использовался хакерами, чтобы влиять на рейтинг в поисковых системах. Поэтому элементы hide HTML, которые не отображаются, могут восприниматься Google как негативный сигнал.

Свойство display:none полезно при создании адаптивного сайта, в котором присутствуют элементы, доступные только для одного размера экрана, но не для других.

Также можно использовать display: none, чтобы скрыть элемент, а затем вернуть его обратно при помощи медиа-запросов. Это корректное использование свойства display: none, поскольку вы не пытаетесь скрыть что-либо с целью совершения нарушений.

Дайте знать, что вы думаете по этой теме материала в комментариях. За комментарии, отклики, подписки, лайки, дизлайки огромное вам спасибо!

Сергей Бензенкоавтор-переводчик

Видимость — Tailwind CSS

Основное использование

​Делание элементов невидимыми

Использовать невидимый , чтобы скрыть элемент, но сохранить его место в DOM, влияя на расположение других элементов (сравните с скрытым из показать документацию).

01

02

03

 <дел>
  <дел>01
  <дел>02
  
03

 <таблица>
  
    
      Счет №
      Клиент
      Сумма
    
  
  
    
      #100
      Публикация кулонов
      2000 долларов США
    
    
      #101
      Промышленное сглаживание Крюгера
      $545,00
    
    
      #102
      Дж.  Питерман
      10 000,25 долл. США
    
  
 

  <дел>
  <дел>01
  <дел>02
  
03