Frontend Разработка | JavaScript & Верстка сайтов. HTML, CSS и React. Уроки для Фронтенд Developer. JS, Vue и Web технологии. IT Карьера, Курсы и Coding.
Наука · 22 июня 2026 г.
7 способов скрыть элемент с помощью CSS 🎨💻 — 22 июня 2026 г. в 17:42:43.655
7 способов скрыть элемент с помощью CSS 🎨💻 Разбираем 7 различных методов скрытия элементов в CSS и их особенности! 🔥 1️⃣ Использование display .hide { display: none; } ❌ Не видно скринридерам ❌ Не занимает место ❌ Не принимает клавиатурные события ❌ Не принимает события мыши ❌ Не анимируется 📌 Использование: Полное скрытие элементов, например, скрытие полей в зависимости от выбранного метода оплаты. 2️⃣ Использование visibility .hide { visibility: hidden; } ✅ Видимо скринридерам ✅ Занимает место ❌ Не принимает клавиатурные события ❌ Не принимает события мыши ❌ Не анимируется 📌 Использование: Для скрытия сообщений об ошибках под формами. 3️⃣ Использование opacity .hide { opacity: 0; } ✅ Видимо скринридерам ✅ Занимает место ✅ Принимает клавиатурные события ✅ Принимает события мыши ✅ Анимируется 📌 Использование: Например, для скрытия ссылок, которые появляются при наведении. 4️⃣ Использование scale .hide { transform: scale(0); } ✅ Видимо скринридерам ✅ Занимает место ✅ Принимает клавиатурные события ❌ Не принимает события мыши ✅ Анимируется 📌 Использование: Для скрытия элементов в анимации увеличения. 5️⃣ Использование translate .hide { transform: translateX(-9999px); } ✅ Видимо скринридерам ✅ Занимает место ✅ Принимает клавиатурные события ❌ Не принимает события мыши ✅ Анимируется 📌 Использование: Например, для бокового меню на мобильных сайтах в сочетании с position: absolute. 6️⃣ Использование clip-path .hide { clip-path: circle(0); } ✅ Видимо скринридерам ✅ Занимает место ✅ Принимает клавиатурные события ❌ Не принимает события мыши ✅ Анимируется 📌 Использование: Можно скрывать элементы полностью, но они остаются доступными для скринридеров. 7️⃣ Использование position absolute .hide { position: absolute; left: -9999px; } ✅ Видимо скринридерам ❌ Не занимает место ✅ Принимает клавиатурные события ❌ Не принимает события мыши ❌ Не анимируется 📌 Использование: Полезно для навигации скринридеров (например, ссылка «Пропустить к содержимому»). 🔥 Скрытие элемента визуально, но доступность для скринридеров! Используем CSS-хак, чтобы элемент был скрыт, но оставался доступным: .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip-path: circle(0); clip: rect(0 0 0 0); /* для IE */ } 📌 Использование: Например, для скрытия <h1>, если логотип используется в качестве заголовка. 💡 Подписывайтесь, чтобы получать больше полезных лайфхаков по CSS и фронтенду! 🚀✨ 👉 @frontend_1