Привіт:) У цьому гайді детально покажу як приховати елементи за допомогою CSS. Розгляну різні варіанти, їх особливості та відмінності. Ви побачите коли і в якому випадку слід використовувати той чи інший спосіб.
На сторінках сайту буває необхідно приховати елемент в залежності від ситуації. Наприклад, на ПК показати рекламний банер, а на мобільному сховати його. Є декілька варіантів це зробити. Покажу детально кожен із них.
Для прикладу нехай є 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-дерева і також займає своє місце серед інших елементів.
back to contents ↑Практична різниця між цими 2-ма способами в сучасних браузерах невелика, хоча
filterслід використовувати, якщо одночасно застосовано декілька ефектів (розмиття, контраст, градації сірого тощо).
visibility
CSS-властивість visibility дозволяє контролювати видимість елемента. Якщо встановити для нього значення hidden, то елемент візуально сховається, але при цьому зберігатиме простір серед інших HTML-елементів сторінки.
.center-block {
visibility: hidden;
}Простір, використаний елементом, залишається на місці, якщо не використовується значення
collapse.
back to contents ↑Щоб повністю приховати елемент, знадобляться додаткові властивості CSS або атрибути ARIA, наприклад:
aria-hidden="true".
display
Ця властивість, мабуть, найчастіше використовується веб-розробниками. Встановивши для неї значення none, елемент повністю видаляється із потоку DOM, і робиться таким, ніби він ніколи не існував на поточній HTML-сторінці.
.center-block {
display: none;
}Хоча
display: noneє популярним методом, він має деякі обмеження. Його не можна анімувати. Також він ініціює зміну макета, що впливає на розташування інших елементів на сторінці.
back to contents ↑
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);
}back to contents ↑Прозорість не можна застосувати до елементів із фоновим зображенням, якщо вони не створені за допомогою лінійного градієнта чи подібного.
transform
Наступний варіант — застосування CSS-властивості transform.
.center-block {
transform: scale(0);
}або
.center-block {
transform: translate(-9999px, 0);
}back to contents ↑
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);
}back to contents ↑
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для цього елементу нічого не дасть.
back to contents ↑Це спосіб має ті ж переваги та недоліки, що й
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.
