Quelle est la différence entre: focus et: active?

Quelle est la différence entre le :focus et :active pseudo-classes :active ?

:focus et :active sont deux états différents.

:focus représente l’état où l’élément est actuellement sélectionné pour recevoir l’entrée et :active représente l’état lorsque l’élément est actuellement activé par l’utilisateur.

Par exemple, supposons que nous ayons un . Le n’aura aucun état pour commencer. Il existe juste. Si nous utilisons Tab pour donner “focus” au , il entre maintenant dans son état :focus . Si vous cliquez ensuite (ou appuyez sur espace ), vous faites alors passer le bouton dans son état ( :active ).

Sur cette note, lorsque vous cliquez sur un élément, vous lui donnez le focus, ce qui cultive également l’illusion que :focus et :active sont les mêmes. Ils ne sont pas les mêmes. Quand on clique dessus, le bouton est dans :focus:active état :focus:active .

Un exemple:

   
 :active Adds a style to an element that is activated :focus Adds a style to an element that has keyboard input focus :hover Adds a style to an element when you mouse over it :lang Adds a style to an element with a specific lang atsortingbute :link Adds a style to an unvisited link :visited Adds a style to a visited link 

Source: CSS Pseudo-classes

Il y a quatre cas.

  1. Par défaut, active et focus sont désactivés.
  2. Lorsque vous faites défiler les éléments pouvant être mis au point , ils entreront :focus (sans actif).
  3. Lorsque vous cliquez sur un élément non focalisable , il entre :active (sans focus).
  4. Lorsque vous cliquez sur un élément pouvant être :active:focus il entre :active:focus (actif et actif simultanément).

Exemple:

 
I cannot be focused.
I am focusable.

 div:focus { background: green; } div:active { color: orange; } div:focus:active { font-weight: bold; } 

Lorsque la page se charge, les deux sont dans le cas 1. Lorsque vous appuyez sur tab, vous focalisez le deuxième div et le voyez dans le cas 2. Lorsque vous cliquez sur le premier div, vous voyez le cas 3. Lorsque vous cliquez sur le deuxième div, vous voyez le cas 4 .


Qu’un élément soit focalisable ou non est une autre question . La plupart ne sont pas par défaut. Mais, il est sûr de supposer que , , peuvent être focalisés par défaut.

: le focus est lorsqu’un élément est capable d’accepter une entrée – le curseur dans une zone de saisie ou un lien qui a été tabulé.

: actif est l’activation d’un élément par un utilisateur – le délai entre le moment où l’utilisateur appuie sur un bouton de la souris et le relâche ensuite.

Active lorsque l’utilisateur active ce point (comme si vous cliquiez sur la souris, si vous utilisez tab du champ à champ, il n’y a aucun signe du style actif. Peut-être que cliquer nécessite plus de temps, essayez simplement de cliquer sur ce point), le point est activé. Essaye ça :

    

La mise au point ne peut être effectuée que par saisie au clavier, mais un élément peut être activé à la fois par une souris ou un clavier.

Si l’on utilisait: se concentrer sur un lien, la règle de style ne s’appliquerait qu’en appuyant sur un bouton du clavier.

L’utilisation de “focus” donnera aux utilisateurs du clavier le même effet que les utilisateurs de souris lorsqu’ils survolent avec une souris. “Active” est nécessaire pour obtenir le même effet dans Internet Explorer.

La réalité est que ces états ne fonctionnent pas comme ils le devraient pour tous les utilisateurs. Le fait de ne pas utiliser les trois sélecteurs crée des problèmes d’accessibilité pour de nombreux utilisateurs ne disposant que d’un clavier et qui sont physiquement incapables d’utiliser une souris. Je vous invite à relever le défi #nomouse (nomouse dot org).