Как спрятать элемент: display: none или visibility: hidden?
Мне нужно скрывать блок (например, выпадашку), но я вижу два способа — display: none и visibility: hidden. Они вроде делают одно и то же. В чём разница и что выбрать?
2 ответа
Способов спрятать элемент несколько, и они по-разному влияют на раскладку:
display: none — элемент исчезает полностью: его нет в потоке, он не занимает места, соседи смыкаются. Как будто его вырезали из страницы.
.menu { display: none; }
visibility: hidden — элемент невидим, но место остаётся: образуется «дыра» там, где он был. Соседи не сдвигаются.
.menu { visibility: hidden; }
opacity: 0 — тоже невидим и место занимает (как visibility), но при этом остаётся кликабельным и его можно плавно анимировать через transition.
Как выбрать:
- нужно убрать совсем и схлопнуть место →
display: none; - нужно зарезервировать место (чтобы ничего не прыгало) →
visibility: hidden; - нужно плавное появление/исчезновение → анимируйте
opacity(плюсvisibility), потому чтоdisplayне анимируется и переключается рывком.
Важный нюанс доступности: display: none и visibility: hidden убирают элемент и из озвучки скринридерами — это правильно для реально скрытого контента. А вот opacity: 0 оставляет его доступным для чтения и кликов, что иногда баг (невидимая кнопка ловит нажатия).
Лайфхак для плавного скрытия, раз display нельзя анимировать: комбинируйте opacity и visibility с разной задержкой.
.box { opacity: 1; visibility: visible; transition: opacity .2s, visibility 0s 0s; }
.box.hidden { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
Так блок плавно гаснет, а потом «выключается» из взаимодействия. Заодно решается проблема, что opacity: 0 сам по себе оставляет элемент кликабельным.