10 способов скрыть элементы в CSS

Maksym Pohribniak

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

Анимация

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

Доступность

Каждый метод, описанный ниже, будет визуально скрывать элемент, но он может или не может скрыть контент от вспомогательных технологий. Например, программа чтения с экрана все еще может объявить крошечный прозрачный текст. Дополнительные свойства CSS или атрибуты ARIA, такие как aria-hidden="true", могут быть необходимы для описания соответствующего действия.

Обработка событий

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

Performance

После того, как браузер загружает и анализирует объектную модель HTML DOM и CSS, страница отображается в три этапа:

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

CSS свойства, которые вызывают только изменения Compositing, заметно более плавны, чем эффекты, влияющие на Layout. В некоторых случаях браузер также может использовать аппаратное ускорение что требует меньше ресурсов.

1. opacity и filter: opacity()

Свойствам:

opacity: 0;
filter: opacity(0%);

можно передавать число от 0 до 1 или процент от 0% до 100%, обозначающий полностью прозрачный и полностью непрозрачный соответственно.

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

2. color: transparent

Непрозрачность влияет на весь элемент, но также можно отдельно задавать свойства color, background-color и border-color. Применение нулевого альфа-канала с использованием rgba(0,0,0,0) или аналогичного делает элемент полностью прозрачным:

color: rgba(0,0,0,0);
background-color: rgba(0,0,0,0);
border-color: rgba(0,0,0,0);

Каждое свойство может быть анимировано отдельно для создания интересных эффектов. Обратите внимание, что прозрачность не может быть применена к элементам с фоном изображения, если они не созданы с использованием линейного градиента или другого градиента (c background-image не сработает).

3. transform

Свойство transform можно использовать перемещения, масштабирования, поворота или наклона элемента.

transform: scale(0); 
/*
или
transform: translate(-999px, 0);
*/

сделают элемент недоступным и невидимым.

Данное свойство предлагает отличную производительность и аппаратное ускорение, потому что элемент эффективно перемещается в отдельный слой и может быть анимирован в 2D или 3D.

4. clip-path

Свойство clip-path создает область отсечения, которая определяет, какие части элемента являются видимыми. Использование значения, такого как

clip-path: circle(0);

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

5. visibility

Данное свойство может быть установлено как visible или hidden, чтобы показать и скрыть элемент:

visibility: hidden;

Пространство, используемое элементом, остается, но события срабатывать не будут.

6. display

display: none;

вероятно, наиболее часто используемый метод скрытия элементов. Значение none эффективно удаляет элемент, как если бы он никогда не существовал в DOM.

Тем не менее, это, возможно, худшее свойство CSS для использования в большинстве случаев. Оно не может быть анимировано и будет Layout, так как влияет на другие части контента.

Свойство display также перегружено другими значениями ( block, inline, table, flex, grid и т. д.) и сброс до правильного значения после скрытия может быть проблематичным (хотя unset может помочь).

7. HTML hidden

Данный атрибут может быть добавлен к любому элементу:

<p hidden>
  Скрытый контент
</p>

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

8. absolute position

Свойство position позволяет перемещать элемент из статического положения по умолчанию в макете страницы, используя top, bottom, left и right. Поэтому элемент с абсолютным позиционированием может быть перемещен за пределы экрана с левой стороны: -999px.

position: absolute;
left: -999px;

или в любом другом направлении.

9. перекрытие другим элементом

Элемент можно скрыть визуально, поместив поверх него другой элемент, который имеет тот же цвет, что и фон. Например псевдоэлемент ::after.

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

10. уменьшить размеры

Элемент может быть скрыт путем минимизации его размеров, width, height, padding, border-width и font-size.

height: 0;
padding: 0;
overflow: hidden;

Также может потребоваться применить overflow: hidden; чтобы убедиться, что контент не выплескивается.

Ссылка на оригинал.