Frontend Разработка | JavaScript & Верстка сайтов. HTML, CSS и React. Уроки для Фронтенд Developer. JS, Vue и Web технологии. IT Карьера, Курсы и Coding.
Наука · 21 июля 2026 г.
🔥 Трюк с :has() в CSS — как маленький хак улучшает UX — 21 июля 2026 г. в 06:28:52.733
🔥 Трюк с :has() в CSS — как маленький хак улучшает UX Селектор :has() поддерживается во всех современных браузерах. Его часто называют «селектором родителя», но он куда мощнее. Вот пример, как улучшить UX форм без JS 👇 form:has(input:invalid) button[type="submit"] { opacity: 0.5; pointer-events: none; } 📌 Что делает: Если в форме есть невалидный input, сабмит-кнопка становится неактивной. 💡 Применения :has(): - Показывать/прятать элементы в зависимости от вложенности; - Делать UI реактивным без JS; - Улучшать доступность форм и состояний. ✅ Минимализм, UX и современный CSS — в одном трюке. Попробуй! 👉 @frontend_1