: valide - Astuces CSS

Le :validsélecteur vous permet de sélectionner des éléments contenant un contenu valide, tel que déterminé par son typeattribut. :validest défini dans la spécification CSS Selectors Level 3 comme un «pseudo-sélecteur de validité», ce qui signifie qu'il est utilisé pour styliser des éléments interactifs en fonction d'une évaluation de l'entrée utilisateur.

Ce sélecteur a une utilité particulière: fournir à un utilisateur des commentaires lorsqu'il interagit avec un formulaire sur la page. L'exemple ci-dessous utilise CSS pour transformer les champs «E-mail» en rouge ou en vert, en réponse à la question de savoir si le contenu correspond à un modèle d'adresse e-mail valide:

Voir le Pen: valid &: entrées invalides par Chris Coyier (@chriscoyier) sur CodePen

Notez comment le premier («Email») est vert-valide-même s'il n'y a pas de contenu dans le champ. C'est parce que l'entrée est facultative, donc le laisser vide entraînerait une soumission de formulaire valide. Pour corriger ce problème, le second a un attribut «obligatoire», ce qui signifie qu'un champ vide entraînerait une soumission de formulaire non valide.

Points d'interêts

• :validpeuvent être «enchaînés» avec d'autres pseudo-sélecteurs: comme :focuspour valider uniquement lorsque l'utilisateur tape, :beforeou :afterpour générer des icônes ou du texte pour fournir plus de commentaires à l'utilisateur, ou des sélecteurs d'attributs aiment input(value="")valider uniquement les champs de saisie contenant du contenu.

Prise en charge du navigateur

Chrome	Safari	Firefox	Opéra	C'EST À DIRE	Android	iOS
10,0+	5.0+	4.0+	10,0+	10+	5+	2+

:valida été introduit dans CSS Selectors Module 3, ce qui signifie que les anciennes versions des navigateurs ne le prennent pas en charge. Cependant, la prise en charge des navigateurs modernes s'améliore. Si vous avez besoin d'un support de navigateur plus ancien, utilisez polyfill ou utilisez ces sélecteurs de manière non critique à une amélioration progressive, ce qui est recommandé.