🌟

:user-valid & :user-invalid擬似クラスが来た！ - What's new in Browsers!

nakajmg

2023/11/08に公開

What's new in Browsers!は、サイボウズのフロントエンドエンジニアがブラウザの最新情報から気になるトピックを紹介するシリーズです。

今回はChrome 119の更新内容から気になるトピックとして、:user-valid擬似クラスと:user-invalid擬似クラスを紹介します。

ユーザーの操作後に検証が行えるようになった

:user-validと:user-invalidはどちらもフォームなどの入力要素の検証の状態に対してスタイルの指定などが行える疑似クラスになります。

検証の状態とは、例えば<input type="email" required />な要素では入力されていない場合やemailとして許容されない文字列が入力がされている場合はinvalidな状態になり、emailとして許容される文字列が入力されている場合にはvalidな状態となります。

`:valid`と`:invalid`とは振る舞いが異なる

擬似クラスにはすでに:validと:invalidという擬似クラスが存在していますが、:user-validと:user-invalidはこれらとは異なる振る舞いをします。

:validと:invalidが入力要素の初期状態に対して検証を行うのに対して、:user-validと:user-invalidは入力に対してユーザーの操作が行われたあとに検証を行います。

それぞれの擬似クラスの動作を確認する

次のデモはそれぞれのinput要素に対して:valid、:invalid、:user-valid、:user-invalid擬似クラスで文字色の変更とマーク（✔ or ❌）を表示するスタイルを指定しているものです。

:validと:invalidは表示された段階で擬似クラスによるスタイルが反映されているのを確認できます。:user-validと:user-invalidによる指定を行っている方は、入力欄にフォーカスして値の変更を行うまで検証が行われず、スタイルが適用されてないことが確認できます。

このように、CSSだけでユーザーからの入力の変更があったときにだけ検証を行い、検証の状態に応じたメッセージやスタイルを適用するといったことができるようになりました。

ブラウザの実装状況・標準化の状況

:user-validと:user-invalidはChrome 119のサポートによって、主要ブラウザの全てでサポートされ使い始められる状況になりました。

これらはSelectors Level 4の一部として標準化が進められており、現在はEditor’s Draftの段階です。

参考情報

サイボウズフロントエンドPublication

サイボウズのフロントエンドに関わる人が発信するPublicationです