CSS

Практичні патерни селектора :has()

Дмитро Гулак
Дмитро Гулак
6 хв читання0 переглядів

Практичні патерни селектора :has()

Селектор :has() дає батьківсько-орієнтовану стилізацію в CSS і дозволяє прибрати частину JavaScript з UI-станів.

Найцінніші кейси

  • Групи форми, що реагують на невалідні інпути
  • Картки, які змінюють стиль, якщо містять акцентний контент
  • Елементи навігації, що реагують на активних дочірніх елементів

Чому це зручно команді

Ви описуєте зв'язки станів прямо в CSS. Логіка стає прогнозованою, а стилі — централізованими.

Патерн для форм

Позначайте wrapper поля, якщо будь-який дочірній input невалідний, і підсилюйте бордер та колір підказки.

Контентний патерн

Якщо в картці є warning-badge, акцент картки змінюється автоматично.

Нюанс впровадження

Для старих браузерів використовуйте progressive enhancement. У сучасних продуктах :has() відчутно спрощує CSS-правила.

Схожі статті

Продовжуйте читати за близькими темами.

CSS-архітектура для великих Vue-застосунківПобудуйте передбачувану CSS-архітектуру для масштабних Vue-продуктів через шари, чіткі межі неймінгу та стабільні контракти компонентів.Використання CSS Subgrid у реальних дашбордахЗастосовуйте CSS Subgrid для вирівнювання секцій дашборду, чистішої логіки відступів і меншої кількості дублювання макетів.Shadow-токени для стабільної дизайн-системи в командіСтандартизуйте shadow-токени між командами, щоб компоненти залишалися візуально цілісними й простими в розвитку.Form UX-патерни з modern CSS і чітким фідбекомПокращуйте заповнення форм через modern CSS-стани, видимий фокус, інлайн-валідацію та нижче когнітивне навантаження.

Коментарі

0

Щоб залишати коментарі, увійдіть у свій акаунт.

Поки що тут немає коментарів. Станьте першим.