Время от времени может потребоваться скрыть элемент веб-страницы. Существует как минимум 10 способов скрыть элемент с помощью CSS.

Способы скрыть элемент

В зависимости от задач, можно использовать разные способы скрытия элемента в CSS.

1. display: none. Самый простой и популярный способ скрытия элемента в CSS. После применения этого свойства страница показывается так, как будто элемента и не было никогда. Аналогичный результат можно получить, если присвоить элементу HTML5 атрибут hidden. Например, вот так:

   . С его помощью можно также скрыть элемент во время печати.

2. visibility: hidden. Этот способ просто скрывает элемент, но оставляет пустое пространство на его месте. Того же эффекта можно добиться, выставив непрозрачность элемента на 0 с помощью свойства opacity: 0.
3. Обрезка элемента до прямоугольника с нулевой длиной и шириной. Реализуется с помощью свойства clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
4. Уменьшение размеров элемента до 0 свойством transform: scale(0). Если присвоить свойству значение 1, то элемент вернется. Этот способ очень удобен для анимаций с исчезновением элемента.
5. height: 0; overflow: hidden. Этот метод предусматривает уменьшение высоты элемента до 0. Метод может использоваться только при отсутствии границ у элемента. Может использоваться только для скрытия блочных элементов.
6. filter: blur(100px). Этот способ на данный момент не поддерживается в Internet Explorer. Механизм прост – надо размыть элемент до такой степени, чтобы сделать его невидимым.

Еще один способ – присвоить элементу абсолютное позиционирование, после чего сдвинуть его слева направо на 9999 пикселей, и так же – по оси «вверх-вниз». Реализуется метод несколькими строчками, что неудобно по сравнению с предыдущими способами.

div { 
  position: absolute; 
  top: -9999px; 
  left: -9999px; 
}

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