Aujourd'hui, j'avais à faire une série de champs de formulaires, et je savais très bien qu'il existait des façon simples de donner de la réactivité aux champs (input). J'ai fait une petite recherche... il existe des solutions avec JavaScript, mais je ne voulais pas ajouter ce genre d'effets... J'ai donc jeté un oeil sur les CSS3... Étant donné que Firefox 1.5 est maintenant sorti, pourquoi ne pas l'exploiter un peu?
Il existe un paquet de nouvelles pseudo-classes en CSS3, bien que plusieurs existaient déjà. Je n'ai pas poussé la recherche au point de savoir lesquelles sont supportées par Firefox, mais celle que j'ai implémenté me satisfait amplement.
J'ai donc créé un petit formulaire simple composé de champs actifs (enabled), inactifs (disabled) et je voulais que le statut change lorsqu'on commence à taper le texte (focus). Veuillez noter que :focus est utilisé depuis longtemps en CSS2...
Voici donc le résultat:
et les styles associés
input {padding:2px; border:1px solid #BAB8A4; border-right:1px solid #e7e7ef; border-bottom:1px solid #e7e7ef; background-color:white;}
input:disabled {border:1px solid #BAB8A4; border-left:1px solid #e7e7ef; border-top:1px solid #e7e7ef; border:1px solid #F5F3E9; background-color: #777; color:white;}
input:focus {background-color: #E4F5FA;}
La nouveauté réside en fait dans la possibilité de définir une apparence d'un champt inactif (:disabled) sans avoir à y appliquer une classe particulière. Le :focus, quant à lui, permet de changer l'état du champ lorsque celui-ci est activé par l'utilisateur.
Une autre série de pseudo-classes intéressantes est le :checked et le :indeterminate, qui permet de définir une apperence spécifique pour les cases à cocher ou boutons-radio, dépendemment s'ils sont sélectionnés ou non. Je n'ai pas encore testé le support et le fonctionnement complet de cette pseudo-classe.
Je vous invite à jeter un oeil sur les diverses pseudo-classes (il y en a même qui sont paramétrable, comme le :nth-last-child() et ses variantes) et aux pseudo-éléments (entre autre, il y a le :selection que je trouve particulièrement intéressant...)
Personnellement, je vais commencer à les utiliser pour améliorer l'interface, dans la mesure où c'est un plus pour l'utilisateur (sans nuire à ceux qui n'ont pas ces fonctionnalités). Ça ne fera qu'encourager les gens à utiliser des fureteurs qui respectent les standards, non?
Écrit par Thierry Goulet 11:29
2 Commentaire(s)
Merci pour ce billet. J'ai tenté de le reproduire sur la CSS que j'utilise pour un formulaire (test avec firefox 1.5), mais ça ne fonctionne pas comme je voudrais.
J'imagine que "input" (input:enabled) correspond au statut actif (lorsque l'on clique dans la case), "input:disabled" au statut inactif (donc le statut par défaut), et "input:focus" au statut utilisé pour le survol de la souris.
Cependant, lorsque j'ai essayé "input" et "input:disabled", il ne s'est rien passé : mes cases ne changeaient pas d'état.
J'ai rajouté un "input:focus" pour tester, et je me suis rendu compte qu'il réagissait comme statut "actif".
Résultat, mon code actuel est :
input {
border: 2px solid #696969;
background-color: #969998;
color: #696969;
}
input:focus {
background-color: #cfd3d2;
}
input = statut par défaut (inactif)
input:focus = statut actif, quand on clique sur la case
Je n'ai rien modifié sur les champs du formulaire : aurais-je dû ?
Où est-ce que je me plante svp ?
«input = statut par défaut (inactif)
input:focus = statut actif, quand on clique sur la case»
et input:disabaled = lorsque le input possède l'attribut disabled="disabled"
