TG Telegram Group & Channel
Frontend разработчик | United States America (US)
Create: Update:

🔥 Трюк с :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() в 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


>>Click here to continue<<

Frontend разработчик






Share with your best friend
VIEW MORE

United States America Popular Telegram Group (US)