:user-invalidの魅力を伝えたい
先日リリースされたSafari16.5で、疑似クラスの:user-invalidと:user-validのサポートが追加されました。
前々から早くブラウザに実装してほしい機能の1つだったので、この機会に紹介します
概要
これらはそれぞれユーザーが入力した内容を入力項目に設けられた制約で検証し、不正な場合は:user-invalidが、問題ない場合は:user-validがマッチします
:invalid、:validとの違い
以前から実装されている似ている機能として、:invalidと:validが存在しています。
これらの違いとしては、ユーザの入力を待つか待たないかの違いです。
user-invalidと:user-valid擬似クラスは、それぞれ不正な入力と正しい入力を持つ要素を表しますが、ユーザーがその要素に大きく関与した後でのみ、その要素を表します。
css仕様書より引用、DeepLで翻訳
原文
The :user-invalid and the :user-valid pseudo-classes represent an element with incorrect or correct input, respectively, but only after the user has significantly interacted with it.
何がうれしいのか
従来の機能では、cssだけで制約検証に応じたスタイルを適用させようとする場合に、ユーザーの操作の有無にかかわらず制約の検証が行われるようになっていました。
つまり、required属性を設定した場合やtype属性にtext以外の値を設定した場合、空の状態で制約の検証が行われてしまうため、ユーザーへ混乱を与えてしまうことが想像できます🙍♂️💭
仮に:user-invalid/:user-validを使用せずに実装するとしたら、jsでblurイベント内でHTMLInputElement.checkValidity()メソッドで制約検証をして、invalidイベントで不正な入力を検知しクラスを付け替える処理を行う形になるでしょう
:user-invalid/:user-validなら、jsを使わずに実現できてしまいます🪄💫
ブラウザのサポート状況
最初に少し触れましたが、現在この機能を実装しているブラウザは、safari 16.5~ と Firefox 88~ となっています。
chromium系のブラウザではまだサポートはされていないのですが、一応サポートする意思自体はあるみたいです。
chromiumの:user-invalid/:user-validのサポートのための課題
今年の夏での対応は難しいということらしいですが、、、
まとめ
やりようによってはユーザーの入力が不適格な場合にエラーメッセージを表示させることなどもcssだけで実現することもできます
（とはいえなぜエラー理由に応じてエラーメッセージの内容を制御する場合にはjsの出番はまだまだありますが、、）
今回のデモのようにラベルに状態に応じたアイコンを設定する程度の用途であれば圧倒的に楽に実装できるので機会があれば試してみてください
Discussion