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

1. властивість opacity
2. властивість visibility
3. властивість display
4. властивість position
5. Властивість clip-path
6. висновок

Від автора: в CSS є багато різних способів приховування елементів. Можна встановити opacity: 0, visibility: hidden, display: none або задати понад великі значення при абсолютному позиціонуванні. Ви ніколи не замислювалися, навіщо потрібно стільки багато способів для одного і того ж дії? Всі методи майже не відрізняються один від одного, а існуючі відмінності лише вказують на те, який з них і в яких обставин повинен застосовуватися. У цьому уроці ми вам розповімо про дрібні відмінності даних методів, на які варто звертати увагу.

властивість opacity

За допомогою властивості opacity задається прозорість елемента. Дана властивість не змінює межі елементу, тобто якщо задати 0, то елемент буде приховано тільки візуально. Елемент все так же буде займати своє становище і простір, впливаючи на розташування інших елементів макета сторінки. Крім того, невидимий елемент відповідатиме на взаємодію з ним.

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

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

Також варто відзначити, що властивість піддається анімації, і з його допомогою можна створювати вражаючі ефекти. Елемент з властивістю opacity меншим 1задает новий контекст стека.

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

властивість visibility

Наступне в нашому списку властивість visibility. Якщо встановити значення hidden, то елемент буде приховано. Як у випадку з властивістю opacity, прихований за допомогою даного властивості елемент не видно, але не стертий з макета сторінки. Відмінність від першого властивості в тому, що дана властивість забороняє взаємодіяти з прихованим елементом. Також елемент буде приховано від скрін рідерів.

Дана властивість також піддається анімації, можна змінювати початкове і кінцеве значення. Тобто можна плавно анімувати властивість за допомогою transition.

. hide {

visibility: hidden;

}

У демо нижче показана різниця між visibility і opacity:

Зверніть увагу на те, що дочірні елементи тега з властивістю visibility: hidden можуть бути видні, якщо їм задати властивість visibility: visible. Проведіть курсором всередині блоку, але не доходячи до цифри. Як бачите, курсор не змінює своє значення на pointer. Також якщо клікнути в цій області, то нічого не станеться.

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

властивість display

Властивість display ховає елементи по-справжньому. Якщо встановити елементу властивість display: none, то він не просто буде приховано, не буде створена навіть його блокова модель. Дана властивість повністю приховує елемент, ніби його й не було. Також в такому випадку з елементом не можна ніяк взаємодіяти. Скрін рідера буде не доступний контент прихованого елемента. Тобто елемент наче й не існував.

Також будуть приховані всі дочірні елементи. Властивість не піддається анімації, тобто на нього не можна навісити плавні переходи.

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

. hide {

display: none;

}

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3

Відкрийте вкладку 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. Всі вони тим чи іншим чином відрізняються один від одного. Розуміючи мети приховування елемента, ви зможете вибрати правильне властивість. Якщо у вас виникли питання по цим методам, пишіть в коментарях.

Редакція: Baljeet Rathi

джерело: https://www.sitepoint.com/

Редакція: Команда webformyself.

Практичний курс по верстці адаптивного сайту з нуля!

Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3