П'ять способів приховати елементи в CSS

6 хв. читання

Є кілька способів приховати елемент в CSS. Можна вказати opacity: 0, visability: hidden, display: none або встановити крайні значення для абсолютного позиціонування.

Ви коли-небудь задавалися питанням, чому так багато методів приховування елементу, коли всі вони, здається, роблять одне й те ж саме? Всі вони, насправді, злегка відрізняються один від одного. І ця різниця диктує, який з них повинен використовуватися в конкретній ситуації. Цей гайд охоплює незначні відмінності, які ви повинні брати до уваги, коли приховуєте елемент.

Opacity

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

.hide {
  opacity: 0;
}

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

Властивість непрозорості можна анімувати і використовувати для створення ефектів. Будь-який елемент з непрозорістю менше 1 також створить новий контекст накладання.

Погляньте на наступе демо:

При наведенні курсора на прихований другий блок, елемент переходить плавно від стану повної прозорості до opacity: 1. Блок також має cursor: pointer, щоб показати, що з ним можна взаємодіяти.

Visibility

Наступна властивість в нашому списку - visibility. Значення hidden буде приховувати елемент. Так само, як і властивість видимості, прихований елемент буде впливати на макет нашої веб-сторінки. Єдина відмінність полягає в тому, що на цей раз він не буде доступний для взаємодії. Крім того, елемент буде прихований від читання з екрану.

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

.hide {
   visibility: hidden;
}

Цей приклад показує, як видимість відрізняється від непрозорості:

{full-post-img}

Зверніть увагу на те, що нащадки елемента з visibility: hidden можуть бути видимими, якщо їх властивість visibility: visible. Спробуйте навести курсор лише на прихований елемент, а не на пункт всередині. Ви побачите, що тип курсора не зміниться. Крім того, якщо ви спробуєте клацнути на елемент, ваші кліки не будуть враховані.

Тег <p> всередині нашого </p><div> буде як і раніше захоплювати всі події миші. Як тільки ви наведете курсор миші на текст, <div> стане видимим і почне реєструвати події.

Display

Властивість display приховує елемент в істинному розумінні цього слова. Встановлення display: none гарантує, що блочна модель не буде формуватися взагалі. Використовуючи цю властивість, ви не залишаєте порожній простір на місці прихованого елемента. Будь-яка пряма взаємодія неможлива до тих пір, поки display має значення none. Крім того, читачі екрану не матимуть змоги отримати вміст елемента.

Всі нащадки нашого елементу також будуть приховані. Це властивість не може бути анімована, тому перехід між різними станами завжди буде різким.

Зверніть увагу, що елемент, як і раніше доступний через DOM. Ви можете працювати з ним так само, як з будь-яким іншим елементом.

.hide {
   display: none;
}

Погляньте на демо:

{full-post-img}

Другий блок має пункт з display: block, але цей пункт залишається невидимим. Це ще одна різниця між visibility: hidden і display:none. У першому випадку, будь-який нащадок, який явно задає visibility: visible стане видимим, тоді як з display все інакше - всі нащадки залишаються прихованими незалежно від значення властивості.

Тепер, наведіть курсор миші на перший блок кілька разів. Є? Натисніть на перший блок. Це повинно зробити другий блок видимим. Значення всередині повинне стати більше 0. Це відбувається тому, що елемент, незважаючи на те, що він прихований від користувачів, все ще доступний за допомогою JavaScript.

Position

Припустимо, у вас є елемент, з яким ви хотіли б взаємодіяти, але ви не хочете, щоб він впливав на макет вашої веб-сторінки. Ніяка властивість до цього моменту не могла впоратися з цією ситуацією належним чином. Одна річ, яку ви можете зробити в цій ситуації - перемістити елемент з вікна перегляду. Таким чином, це не вплине на макет. Ось CSS, щоб зробити це:

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

Наступна демонстрація ілюструє, як абсолютне позиціонування приховує елементи:

{full-post-img}

Основна ідея тут - встановити негативні top і left значення так, щоб елемент більше не було видно на екрані. Перевагою (або потенційним недоліком) цього методу є те, що зміст абсолютно позиціонованого елемента може бути прочитаний з екрану.

Ви повинні уникати використання цього методу, щоб приховати будь-які елементи, які можуть отримати фокус, оскільки це призводить до несподіваних стрибків, коли користувач фокусується на цьому елементі. Цей метод часто використовується для створення кастомних checkbox та radio button.

Clip-path

Ще один спосіб приховати елементи - вирізати їх. Раніше це можна було зробити за допомогою властивості clip, але вона була оголошена застарілою на користь кращої clip-path.

Майте на увазі, що властивість повністю не підтримується в IE та Edge. При використанні зовнішніх SVG файлів для clip-path, підтримка ще більш обмежена.

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

Ось демо, щоб показати clip-path в дії:

{full-post-img}

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

Навіть якщо наш елемент вже не видно, елементи навколо нього досі поводяться так, наче елемент має свої початкові розміри. Користувачі не зможуть взаємодіяти з прихованим елементом. Властивість може бути анімована різними способами для створення нових ефектів.

У цьому уроці ми розглянули п'ять різних методів приховування елементів за допомогою CSS. Знаючи, що ви хочете отримати в результаті, ви можете обрати необхідну вам властивість.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 5.2K
Приєднався: 9 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація