Не раздражающая валидация формы: CSS :user-valid и :user-invalid

Стилизация валидации форм всегда была сложной задачей. Новые псевдоклассы :user-valid и :user-invalid устраняют давнее неудобство CSS стилизации валидации форм — слишком раннее отображение состояния ошибки.

В отличие от своих предшественников :valid и :invalid, новые селекторы ждут реального взаимодействия с пользователем, перед применением стилей. Это, небольшое отличие приводит к значительному улучшению пользовательского опыта: больше нет полей, помеченных как невалидные до того, как пользователь начал вводить текст.

-/* Старый подход - немедленное отображение */
-input:invalid {
-  border-color: #ef4444;
-}
-input:valid {
-  border-color: #10b981;
-}
+/* Новый подход - ожидается взаимодействие с пользователем */
+input:user-invalid {
+  border-color: #ef4444;
+}
+
+input:user-valid {
+  border-color: #10b981;
+}

При традиционной валидации это поле ввода сразу бы выдало состояние ошибки, поскольку оно пустое и обязательное. Новые селекторы :user-valid и :user-invalid применяют стили только после взаимодействия с пользователем.

See the Pen

Теперь формы выглядят нейтрально и валидируются естественным образом по мере заполнения. Больше никаких сердитых красных границ при загрузке страницы — только чистая, полезная обратная связь, в случае если это имеет смысл.

Резервные варианты и поддержка броузерами

Поддержка браузерами новых селекторов ещё не завершена, но это не страшно. Современные браузеры получили улучшенное поведение, а старые работают с традиционной валидацией — JavaScript в любом случае не нужен.

Эти псевдоклассы хороши, но как быть с браузерами не поддерживающими их? Встроенного резервного варианта нет — старые браузеры будут просто игнорировать эти селекторы. А это значит, что пользователи этих браузеров вообще не увидят стилей валидации.

На данный момент самым безопасным подходом считается использование @supports для обеспечения резервного варианта для браузеров, не поддерживающих :user-valid и :user-invalid. Таким образом, можно гарантировать, что все пользователи увидят ту или иную форму стилизации валидации.

/* Базовые стили для всех браузеровBase styles for all browsers */
input:invalid {
  border-color: #ef4444;
}
input:valid {
  border-color: #10b981;
}

/* Расширенные стили для современных браузеров */
@supports selector(:user-valid) {
  input:invalid {
    border-color: initial;
  }
  input:valid {
    border-color: initial;
  }

  input:user-invalid {
    border-color: #ef4444;
  }
  input:user-valid {
    border-color: #10b981;
  }
}

Эти небольшие улучшения в валидации форм показывают, как CSS продолжает развиваться в правильном направлении.

Комментарии