Від автора: в CSS є багато різних способів приховування елементів. Можна встановити opacity: 0, visibility: hidden, display: none або задати понад великі значення при абсолютному позиціонування. Ви ніколи не замислювалися, навіщо потрібно стільки багато способів для одного і того ж дії? Всі методи майже не відрізняються один від одного, а існуючі відмінності лише вказують на те, який з них і в яких обставинах не повинен застосовуватися. У цьому уроці ми розповімо вам про дрібні відмінності цих методів, на які варто звертати увагу.
Властивість opacity
За допомогою властивості opacity задається прозорість елемента. Дана властивість не змінює межі елемента, тобто якщо вказати 0, то елемент буде приховано лише візуально. Елемент буде займати своє становище і простір, впливаючи на розташування інших елементів макета сторінки. Крім того, невидимий елемент буде відповідати на взаємодію з ним.
.hide {
opacity: 0;
}
Якщо ви хочете приховати за допомогою opacity елементи від скрін рідерів, то у вас це не вийде. Елемент і весь його вміст залишаться видимими для скрін рідерів, як і всі інші елементи на сторінці. То є елемент веде себе так, як якщо б він був видимим.
Також варто відзначити, що властивість піддається анімації, і з його допомогою можна створювати вражаючі ефекти. Елемент із властивістю opacity меншим 1задает новий контекст стека.
При наведенні курсору на прихований другий блок елемент плавно міняє свій стан з повної прозорості до повної непрозорості. Блоку також встановлено властивість cursor: pointer, показує, що з ним можна взаємодіяти.
Властивість visibility
Таке в нашому списку властивість visibility. Якщо встановити значення hidden, то елемент буде приховано. Як у випадку з властивістю opacity, прихований за допомогою цієї властивості елемент не видно, але не стертий з макета сторінки. Відміну від першого властивості в тому, що дана властивість забороняє взаємодіяти з прихованим елементом. Також елемент буде приховано від скрін рідерів.
Ця властивість також піддається анімації, можна змінювати початкове і кінцеве значення. Тобто можна плавно анімувати властивість за допомогою transition.
.hide {
visibility: hidden;
}
У демо нижче показана різниця між visibility і opacity:
Зверніть увагу на те, що дочірні елементи тега з властивістю visibility: hidden можуть бути видні, якщо їм задати властивість visibility: visible. Проведіть курсором всередині блоку, але не доходячи до цифри. Як бачите, курсор не змінює свого значення pointer. Також якщо клікнути в цій області, то нічого не станеться.
А ось тег
всередині
Властивість display
Властивість display ховає елементи по-справжньому. Якщо встановити властивість елементу display: none, то він не просто буде приховано, не буде створена навіть його блокова модель. Дана властивість повністю приховує елемент, ніби його й не було. Також в такому випадку з елементом ніяк не можна взаємодіяти. Скрін рідерам буде не доступний контент прихованого елементу. Тобто елемент наче й не існував.
Також будуть приховані всі дочірні елементи. Властивість не піддається анімації, тобто на нього не можна навісити плавні переходи.
Елемент залишається доступним через DOM. Ви так само можете маніпулювати їм, як і будь-яким іншим елементом.
.hide {
display: none;
}
Відкрийте вкладку CSS в демо нижче:
У коді видно, що у другого блоку є параграф, яким встановлено властивість display: block, але він все одно залишається невидимим. В цьому і є різниця між visibility: hidden і display: none. У першому випадку якщо дочірнім елементів задати властивість visibility: visible, то вони стануть видимими. У другому випадку такий підхід не працює. Всі дочірні елементи залишаються прихованими незалежно від їх власних значень властивості display.
Наведіть кілька разів курсор на перший блок. Подія hover виконується? Якщо клікнути на нього, другий блок стане видимим. Лічильник у другому блоці повинен показувати цифру, відмінну від нуля. Блок прихований від користувача, але все ще доступний для взаємодії через JS.
Властивість position
Уявіть, що вам треба створити такий елемент, щоб з ним можна було спілкуватися, але в той же час щоб він не впливав на макет сторінки. Жодна з розглянутих досі властивостей повністю не справлявся з цим завданням. В такому випадку можна висунути елемент за межі видимої області. Елемент не буде впливати на макет, але залишиться доступним для взаємодії. CSS код:
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
Демо нижче показує роботу абсолютного позиціонування. Принцип демо дуже схожий з попереднім:
Основне завдання тут це задати досить великі негативні значення властивостей top і left, щоб елемент пішов з видимої області перегляду. Плюс (або мінус) в тому, що при такому підході контент всередині абсолютно спозиционированного елемента залишається видимим для скрін рідерів. В принципі все логічно, елемент просто відсунутий за межі видимої області перегляду, щоб користувач не бачив його.
Дану методику можна застосовувати для приховування елементів, на які можна поставити фокус. Курсор може перестрибнути незрозуміло куди, що може призвести до непередбачуваних наслідків. Метод часто використовується для створення користувацьких чекбоксов і радіо кнопок.
Властивість clip-path
Ще один спосіб приховати елемент – обрізати його. Раніше для цього було властивість clip. Воно застаріло, і йому на зміну з’явилося властивість clip-path.
Пам’ятайте, що clip-path в демо нижче не повністю підтримується IE і Edge. Якщо використовувати зовнішній SVG-файл, підтримка стає ще більш мізерної (ми не стали використовувати зовнішній файл). Для приховування елемента з допомогою властивості clip-path використовуйте рядок:
.hide {
clip-path: polygon(0px 0px 0px 0px 0px 0px 0px 0px);
}
При наведенні курсору на перший блок, буде змінюватися другий блок, навіть якщо він прихований через clip-path. Якщо клікнути по першому блоку, то у другого блоку буде видалено приховує клас, і він стане видимим. Текст залишається видимим для скрін рідерів. Даний підхід (як і просто clip) використовується на багатьох WordPress сайтах для тексту під скрін рідери.
Елемент прихований, але всі елементи навколо нього ведуть себе так, ніби він є. Не забувайте про те, що за межами обрезаемой області події типу hover і click недоступні. У нашому прикладі користувач не зможе взаємодіяти з елементом безпосередньо. Крім того, властивість піддається анімації, з його допомогою можна створити різні ефекти.
Висновок
У цьому уроці ми розглянули 5 способів приховування елементів CSS. Всі вони тим чи іншим чином відрізняються один від одного. Розуміючи мети приховування елементу, ви зможете вибрати правильне властивість. Якщо у вас виникли питання по цих методів, пишіть в коментарях.
