Введение и проблематика

Скрытие элементов — одна из самых частых задач в веб-разработке. Модальные окна, выпадающие меню, условный контент — всё это требует умения правильно скрывать и показывать элементы.

Когда нужно скрывать элементы?

• Интерактивные компоненты: модальные окна, дропдауны, табы
• Адаптивный дизайн: скрытие элементов на мобильных устройствах
• Условный контент: показ/скрытие в зависимости от состояния
• Доступность: визуально скрытый контент для screen readers

Основные способы скрытия

1. display: none

Полностью удаляет элемент из потока документа.

.hidden {
  display: none;
}

Характеристики:

• Элемент не занимает место
• Не виден визуально
• Недоступен для screen readers
• Не реагирует на события (клики)
• Нельзя анимировать (элемент просто "исчезает")

Когда использовать:

• Полное удаление элемента из интерфейса
• Переключение между разными представлениями
• Когда элемент точно не нужен пользователю

2. visibility: hidden

Элемент невидим, но занимает место в макете.

.invisible {
  visibility: hidden;
}

Характеристики:

• Элемент занимает своё место (остаётся "пустота")
• Не виден визуально
• Недоступен для screen readers
• Не реагирует на события
• Можно анимировать (например, с transition)

Сравнение с display: none:

<div class="container">
  <div class="box">1</div>
  <div class="box" style="display: none;">2</div>
  <div class="box">3</div>
</div>
<!-- Результат: [1][3] — второй блок полностью исчез -->

Когда использовать:

• Нужно сохранить layout (избежать "прыжков" интерфейса)
• Планируется анимация появления/исчезновения
• Временное скрытие с сохранением размеров

3. opacity: 0

Элемент полностью прозрачен, но остаётся в потоке и реагирует на события.

.transparent {
  opacity: 0;
}

Характеристики:

• Элемент занимает место
• Невидим визуально
• Доступен для screen readers
• Реагирует на клики! (это важно)
• Отлично анимируется

Решение проблемы с кликами:

.transparent-no-clicks {
  opacity: 0;
  pointer-events: none; /* Отключаем клики */
}

Когда использовать:

• Плавные анимации появления (fade in/out)
• Когда нужна доступность скрытого контента

4. Позиционирование за пределами экрана

Элемент визуально убирается с экрана, но остаётся в DOM и доступен для assistive technologies.

.sr-only {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

Более современный вариант (рекомендуется):

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

Характеристики:

• Не видим визуально
• Доступен для screen readers
• Не занимает визуальное место
• Не блокирует клики по другим элементам

Когда использовать:

• Дополнительный контент для screen readers
• Скрытые лейблы форм
• "Skip to content" ссылки

5. clip-path

Современный способ "вырезать" видимую область элемента.

.clipped {
  clip-path: inset(100%);
}

Характеристики:

• Элемент занимает место
• Недоступен визуально
• Доступен для screen readers
• Можно анимировать

6. HTML-атрибут hidden

Семантический способ скрыть элемент.

<div hidden>Этот контент скрыт</div>

Эквивалентно display: none в CSS.

[hidden] {
  display: none;
}

Управление доступностью

aria-hidden

Атрибут aria-hidden управляет видимостью элемента только для assistive technologies.

<!-- Скрыто для screen readers, но видно визуально -->
<span aria-hidden="true">🔒</span>
 
<!-- Видно для screen readers, но скрыто визуально -->
<span class="visually-hidden">Защищённый контент</span>

inert

Новый атрибут, который делает элемент и его содержимое полностью инертным.

<div inert>
  <!-- Весь контент внутри: не фокусируется, не кликается, не читается screen readers -->
  <button>Недоступная кнопка</button>
</div>

Сравнительная таблица

Практические примеры

Анимированное модальное окно

.modal {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
 
.modal.open {
  opacity: 1;
  visibility: visible;
}

Доступная иконка

<button>
  <svg aria-hidden="true"><!-- иконка --></svg>
  <span class="visually-hidden">Добавить в корзину</span>
</button>

Адаптивное скрытие

/* Скрыть на мобильных */
@media (max-width: 768px) {
  .desktop-only {
    display: none;
  }
}
 
/* Скрыть на десктопе */
@media (min-width: 769px) {
  .mobile-only {
    display: none;
  }
}

Вопросы интервьюера

Q: Чем отличается display: none от visibility: hidden?

display: none полностью убирает элемент из потока (не занимает место), visibility: hidden сохраняет место элемента в макете.

Q: Как скрыть элемент, но оставить его доступным для screen readers?

Использовать класс .visually-hidden с position: absolute, clip-path: inset(50%) и размерами 1x1 пиксель.

Q: Почему opacity: 0 не всегда подходит для скрытия?

Элемент с opacity: 0 продолжает получать клики. Нужно добавить pointer-events: none.

Q: Как анимировать появление элемента со скрытого состояния?

Комбинировать opacity и visibility с transition. Нельзя анимировать display.

Q: Для чего нужен aria-hidden?

Чтобы скрыть декоративные элементы (иконки, разделители) от screen readers, сохраняя их визуально видимыми.

Источники

• MDN: visibility
• MDN: display
• WebAIM: Invisible Content
• CSS-Tricks: Hiding Elements