Pour Gimp, lors de la création d’un bouton il crée automatiquement 3 images, pour les 3 positions ! Ça fait longtemps maintenant. On peut même personnaliser ces états.

Firefox, contrairement à d’autres navigateurs, déclenche le :focus à la souris ; je pense que le problème vient de ce comportement.

1. Lors d’un retour à la page précédente (bouton back du navigateur), le dernier lien cliqué a l’état :active, qu’il ne devrait pas conserver.

2. Lors d’un clic sur un lien pointant dans la page en cours, le lien cliqué conserve l’état :active jusqu’au clic sur un autre élément de la page. Il devrait perdre cet état dès le moment où le bouton d’action (bouton de la souris ou touche du clavier) est relâché.

3. Dans le cas où le bouton d’action (bouton de la souris ou touche du clavier) serait conservé appuyé par l’utilisateur, le lien devrait perdre l’état :active si le pointeur quitte la zone du lien. Ou dès que le lien perd le focus. C’est ce que fait Gnome, par exemple. (Et la solution du :focus:active est intéressante, mais du coup il faut renoncer à déclarer un comportement valable également en navigation au clavier…)

Oui probablement. La spec Selectors Level 3 dit explicitement « The :active pseudo-class applies while an element is being activated by the user ». Ce qui tendrait à signifier que keydown avec la bonne touche clavier devrait basculer l’élément en mode :active.

Ca sert d’avoir un frenchy dans le working group CSS3 ;). Le coup du :hover:active est simple, mais fallait y penser.

Sinon, je me permet de retourner encore plus ma veste en appuyant le discours sur la nécessité ou du moins, l’utilité d’implémenter un comportement :active sur un bouton.

En effet, la représentation visuelle du bouton enfoncé pourrait correspondre à l’enfoncement de la touche entrée si :active était également implémenté pour la navigation au clavier. Reste à savoir si ça le sera et si c’est justifié que ça le soit.

Peut-être qu’il faudrait créer un ticket pour Firefox sur ce thème ?

Maintenant, il est absolument nécessaire de se rendre compte que ce comportement « par défaut » des window managers dépend de la plate-forme. Par exemple sur Mac OS X, certains boutons ont un comportement en mode :active mais pas en mode :hover (les + et – des listes par exemple). On règlera ce genre de choses (dans une page Web) par exemple en mettant programmatiquement une classe dépendant du système à l’élément body et en utilisant un body.telleClasse dans les sélecteurs appropriés des feuilles de style. On peut aussi utiliser des « hacks » CSS sélectionnant la plateforme mais personnellement je trouve cela très cracra…

Globalement, il faut utiliser les sélecteurs :hover pour le survol et :hover:active (les deux à la fois) pour l’action. J’ai lu plus haut que quelqu’un se plaint qu’un navigateur ne « relacherait » pas l’état si la souris est relachée hors du bouton. Face à ces sélecteurs, un tel comportement doit être traité comme un bug. Utiliser des event handlers sur la souris, ça marche aussi mais pourquoi faire du programmatique quand on peut faire du déclaratif ?

Voila, en hopant que ça helpe.

Daniel Glazman, W3C CSS WG Co-Chairman

En fait, ton interprétation est probablement bonne, j’ai fait un raccourci un peu hâtif. Focus est plus approprié effectivement pour afficher le focus même si IE se comporte différemment.

Du coup, :active reste un mystère car il ne fonctionne qu’avec la souris, pas quand on navigue au clavier et qu’on tape entrée (du moins sur mon Firefox 3.5) ce qui devrait être le cas si ton interprétation de sa destination est correcte.

En fait, en regardant les specs, on s’aperçoit que le comportement cité en exemple est implémenté, sans vraiment aller plus loin et le transposer à la navigation clavier. En fait, il serait mieux que le parcours d’un lien avec la touche entrée ne se fasse qu’au relâchement de la touche, et non à l’enfoncement de celle-ci (onKeyPress). Ca permettrai d’appliquer ce sélecteur à la navigation clavier.

1er paragraphe de ton commentaire :
Pourquoi ne pas utiliser la pseudo-classe :focus pour le clavier (tant pis pour IE6 et 7 pour lesquels on peut si nécessaire prévoir du JS) ?

Dernier paragraphe :
En quoi l’interprétation du sélecteur est mauvaise ?

En fat, active signifie : si tu appuie sur entrée, tu suivra le lien sélectionné.

Bref, je pense que ton interprétation du sélecteur est mauvaise. Mais bon, tu as ouvert le débat, peut-être qu’il manque certains sélecteurs CSS, vous avez vu qqchose dans CSS 3 qui comblerai la lacune actuelle ?