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