Что такое display none?

Display: none в CSS

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

Основное определение

display: none означает, что элемент:

• Не отрисовывается на странице
• Не занимает место в макете (удаляется из потока документа)
• Не участвует в расчёте размеров контейнера
• Не воспринимает события мыши и клавиатуры

.hidden {
  display: none;
}

<div>Видимый элемент</div>
<div class="hidden">Скрытый элемент</div>
<div>Видимый элемент</div>

Результат: средний div полностью исчезает, верхний и нижний элементы приближаются друг к другу, как будто среднего div и не было.

Как это работает

Удаление из потока документа

<div class="container">
  <div>Элемент 1</div>
  <div class="hidden">Элемент 2 (скрыт)</div>
  <div>Элемент 3</div>
</div>

.container {
  display: flex;
  gap: 10px;
}

.hidden {
  display: none;
}

Элемент 2 будет полностью удалён из макета. Элементы 1 и 3 будут рядом без промежутка для скрытого элемента.

Сравнение с visibility: hidden

Это важный момент! display: none отличается от visibility: hidden.

Таблица сравнения

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

Пример 1: Скрытие при клике

const closeBtn = document.querySelector('.alert-close');
const alert = document.querySelector('.alert');

closeBtn.addEventListener('click', () => {
  alert.style.display = 'none';
});

Пример 2: React условный рендер

import React, { useState } from 'react';

function Menu() {
  const [isOpen, setIsOpen] = useState(false);
  
  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>Меню</button>
      <nav className={isOpen ? '' : 'hidden'}>
        <a href="/">Главная</a>
      </nav>
    </div>
  );
}

Пример 3: Адаптивный дизайн

.desktop-menu {
  display: flex;
}

.mobile-menu {
  display: none;
}

@media (max-width: 768px) {
  .desktop-menu {
    display: none;
  }
  
  .mobile-menu {
    display: block;
  }
}

Пример 4: Модальное окно

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal.hidden {
  display: none;
}

Важные особенности

Проверка значения

const element = document.querySelector('.hidden');
const displayValue = window.getComputedStyle(element).display;
console.log(displayValue); // 'none'

Переходы не работают

Важно: display: none нельзя анимировать плавно. Это происходит мгновенно.

/* Для плавного исчезновения используй opacity */
.element {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.element.hidden {
  opacity: 0;
  pointer-events: none;
}

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

• display: none — когда элемент полностью не нужен
• visibility: hidden — когда нужно сохранить место элемента
• opacity: 0 — для плавного исчезновения и анимации

Best Practices

1. Используй классы вместо inline styles
2. Добавляй aria-hidden для доступности
3. Выбирай метод скрытия в зависимости от задачи
4. Помни о производительности

Заключение

display: none — это мощное свойство для полного скрытия элементов. Оно удаляет элемент из макета и делает его невидимым. Понимание разницы между методами скрытия критично для разработки интерактивных интерфейсов.