Як змусити HTML повністю зникнути

Ми всі хочемо часом зникнути. Елементи HTML нічим не відрізняються. Іноді вони хочуть ненадовго сховатися. Не припиняйте існувати повністю - просто тримайте речі на низькому рівні.

На щастя, коли мова заходить про те, щоб елементи HTML зникали, CSS пропонує безліч варіантів.

CSS стати невидимим

Візьмемо елемент HTML із класом «привид» і приховаємо його.

//index.html

I’m friendly!

//style.css
.ghost {
}

Мертві пікселі

За замовчуванням видимі елементи HTML. Їх властивість CSS видимості за замовчуванням видно , але ви можете перегорнути сценарій і перейти:

.ghost {
 visibility: hidden;
}

Тепер привид прихований, але він все одно займе місце на сторінці.

Без сліду

Якщо ви хочете зробити щось непомітним, а також не займати місця, Ви також можете використовувати властивість відображення CSS .

Зазвичай розробники використовують властивість display, щоб диктувати, чи слід відображати елемент HTML як елемент блоку або вбудований елемент, але він також може повністю приховати елемент:

.ghost {
 display: none;
}

І на відміну від видимості: прихований , елемент, прихований за допомогою дисплея: жоден не займе місця на сторінці.

Прозорі душі

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

.ghost {
 opacity: 0.0;
}

Як і visibility: hidden, opacity: 0.0 залишать порожній простір там, де знаходиться елемент HTML. Пам’ятайте, що з усіма цими техніками елемент залишається частиною DOM - він просто не видно звичайним користувачам у своїх браузерах.

Втікай! Біжи далеко-далеко!

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

Щоб зробити це, спочатку використовуйте положення властивість CSS , щоб надати елементу в абсолютну позицію на сторінці (на противагу по відношенню до інших HTML - елементів).

Потім ви можете перемістити елемент зі сторінки на довільно велику кількість пікселів:

.ghost { position: absolute; left: -999999px;}

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

Для найкращих результатів розташуйте ці невидимі елементи ліворуч, а не зверху або знизу, що може заплутати зчитувачі з екрана.

Бути привидом на Хелловін

Коли ви зібрали всі ці чотири техніки, у вас вийшов досить прохолодний костюм на Хеллоуїн з невеликими зусиллями:

Я зробив це за допомогою дизайнера та кемпера з Остіна Уеса Сірана.

Ви можете вибрати один із них до кінця цих вихідних - у чоловічих та приталених жіночих розмірах.

Я пишу лише про програмування та технології. Якщо ви стежите за мною у Twitter, я не буду витрачати ваш час. ?