Як приховати елементи в CSS

Привіт:) У цьому гайді детально покажу як приховати елементи за допомогою CSS. Розгляну різні варіанти, їх особливості та відмінності. Ви побачите коли і в якому випадку слід використовувати той чи інший спосіб.

Зміст:

opacity та filter: opacity()
visibility
display
color та background-color
transform
clip-path
HTML-атрибут hidden
position
Накладання іншого елементу
Зменшення розмірів

На сторінках сайту буває необхідно приховати елемент в залежності від ситуації. Наприклад, на ПК показати рекламний банер, а на мобільному сховати його. Є декілька варіантів це зробити. Покажу детально кожен із них.

Для прикладу нехай є 3 однакових блоки, з яких середній буде приховуватися.

<div class="wrapper">
  <div class="container">
    <div class="left-block">1</div>
    <div class="center-block">2</div>
    <div class="right-block">3</div>
  </div>
</div>

.wrapper {
    display: flex;
	align-items: center;
	justify-content: center;
    max-width: 1300px;
	margin: 0 auto;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: content-box;
}

.container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 700px;
  outline: 2px solid black;
}

[class*="-block"] {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  margin: 15px;
  font-size: 50px;
  font-weight: bold;
  text-align: center;
  color: #ffffff;
  background: red;
}

opacity та filter: opacity()

Одним із найпростіших способів приховати елемент є налаштування його непрозорості. Властивість opacity дозволяє зробити елемент повністю прозорим, встановивши для нього значення 0:

.center-block {
  opacity: 0;
}

Результатом буде:

Крім того, ви можете використовувати властивість filter з функцією opacity():

.center-block {
  filter: opacity(0);
}

Результат буде аналогічним.

Елемент, прихований за допомогою цих способів, все одно залишається на сторінці, тобто присутній у структурі її DOM-дерева і також займає своє місце серед інших елементів.

Практична різниця між цими 2-ма способами в сучасних браузерах невелика, хоча filter слід використовувати, якщо одночасно застосовано декілька ефектів (розмиття, контраст, градації сірого тощо).

visibility

CSS-властивість visibility дозволяє контролювати видимість елемента. Якщо встановити для нього значення hidden, то елемент візуально сховається, але при цьому зберігатиме простір серед інших HTML-елементів сторінки.

.center-block {
  visibility: hidden;
}

Простір, використаний елементом, залишається на місці, якщо не використовується значення collapse.

Щоб повністю приховати елемент, знадобляться додаткові властивості CSS або атрибути ARIA, наприклад: aria-hidden="true".

display

Ця властивість, мабуть, найчастіше використовується веб-розробниками. Встановивши для неї значення none, елемент повністю видаляється із потоку DOM, і робиться таким, ніби він ніколи не існував на поточній HTML-сторінці.

.center-block {
  display: none;
}

Хоча display: none є популярним методом, він має деякі обмеження. Його не можна анімувати. Також він ініціює зміну макета, що впливає на розташування інших елементів на сторінці.

display також перевантажено такими опціями, як block, inline, table, flexbox, grid тощо. Повернення до правильного значення після display: none; може бути проблематичним (хоча unset може допомогти).

color та background-color

Ще один спосіб приховати HTML-елемент — застосувати нульовий альфа-канал кольору за допомогою rgba(0,0,0,0). Це зробить елемент повністю прозорим.

.center-block {
  color: rgba(0,0,0,0);
  background-color: rgba(0,0,0,0);
}

Прозорість не можна застосувати до елементів із фоновим зображенням, якщо вони не створені за допомогою лінійного градієнта чи подібного.

transform

Наступний варіант — застосування CSS-властивості transform.

.center-block {
  transform: scale(0);
}

або

.center-block {
  transform: translate(-9999px, 0);
}

transform забезпечує високу продуктивність і апаратне прискорення, оскільки елемент ефективно переміщується в окремий шар і може бути анімований у 2D або 3D. При цьому елемент залишається у DOM-дереві.

clip-path

Ця властивість створює область відсікання, яка визначає, які частини елемента є видимими. Використання її значення circle(0) або polygon(0px 0px,0px 0px,0px 0px,0px 0px) повністю приховає елемент.

/* ВАРІАНТ 1 */

.center-block {
  clip-path: circle(0);
}

/* ВАРІАНТ 2 */

.center-block {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

clip-path відкриває великі можливості для всеможливих анімацій, хоча на нього варто покладатися лише в сучасних браузерах.

HTML-атрибут hidden

Цей атрибут можна додати до будь-якого елементу:

<!-- ВАРІАНТ 1 -->

<div class="center-block" hidden>2</div>

<!-- ВАРІАНТ 2 -->

<div class="center-block" hidden="">2</div>

<!-- ВАРІАНТ 3 -->

<div class="center-block" hidden="hidden">2</div>

Атрибут спрацьовує, якщо для блоку явно не вказана властивість display. Наприклад, для блоку із класом center-block я задав display: flex. У такому випадку атрибут hidden для цього елементу нічого не дасть.

Це спосіб має ті ж переваги та недоліки, що й display: none, хоча це може бути корисним при використанні системи керування вмістом (CMS), яка не дозволяє змінювати CSS-стилі.

position

Властивість position дозволяє елементу переміщуватися зі статичної позиції (за замовчуванням) в межах DOM-дерева HTML-елементів сторінки за допомогою параметрів top, bottom, left та right. Таким чином, абсолютно позиціонований елемент можна перемістити за межі екрану вліво, вправо, вгору та вниз.

.center-block {
  position: absolute;
  left: -9999px;
  right: -9999px;
}

Накладання іншого елементу

Також елемент можна візуально приховати, розташувавши над ним інший елемент того самого кольору, що й фон. У цьому прикладі використовується псевдоелемент ::after, хоча можна використовувати будь-який дочірній елемент.

Для мого прикладу допишіть декілька рядків:

.center-block {
  position: relative;
}

.center-block::after {
  position: absolute;
  content: "";
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  background-color: #ffffff;
}

Зменшення розмірів

Елемент також можна приховати, зменшивши його розміри.

.center-block {
  height: 0px;
  padding: 0px;
  overflow: hidden;
}

Прихований елемент все ще залишається серед інших DOM-елементів сторінки, хоча має висоту, рівну 0.