21.07.2026 06:28
🔥 Трюк с :has() в CSS — как маленький хак улучшает UX Селектор :has() поддерживается во всех современных браузерах. Е
🔥 Трюк с :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
Селектор :has() поддерживается во всех современных браузерах. Его часто называют «селектором родителя», но он куда мощнее.
Вот пример, как улучшить UX форм без JS 👇
form:has(input:invalid) button[type="submit"] {
opacity: 0.5;
pointer-events: none;
}
📌 Что делает:
Если в форме есть невалидный input, сабмит-кнопка становится неактивной.
💡 Применения :has():
- Показывать/прятать элементы в зависимости от вложенности;
- Делать UI реактивным без JS;
- Улучшать доступность форм и состояний.
✅ Минимализм, UX и современный CSS — в одном трюке. Попробуй!
👉 @frontend_1