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

Quelle est la différence entre les :focuset les :activepseudo-classes?

:focuset :activesont deux états différents.

• :focus représente l'état lorsque l'élément est actuellement sélectionné pour recevoir une entrée et
• :active représente l'état lorsque l'élément est actuellement activé par l'utilisateur.

Par exemple, disons que nous avons un fichier <button>. Ils <button>n'auront aucun état pour commencer. Cela existe simplement. Si nous utilisons Tabpour «focaliser» le <button>, il entre maintenant dans son :focusétat. Si vous cliquez ensuite (ou appuyez sur space), vous faites alors entrer le bouton dans son :activeétat ( ).

Sur cette note, lorsque vous cliquez sur un élément, vous lui donnez le focus, ce qui cultive également l'illusion :focuset qui :activesont les mêmes. Ils ne sont pas les mêmes. Lorsque vous cliquez dessus, le bouton est en :focus:activeétat.

Un exemple:

<style type="text/css">
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>
  
<button>
  When clicked, my text turns red AND bold!<br />
  But not when focused only,<br />
 where my text just turns red
</button>

modifier: jsfiddle

: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 attribute
: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, actif et focus sont tous deux désactivés.
2. Lorsque vous tabulez pour parcourir les éléments focalisables , ils entreront:focus (sans être actifs).
3. Lorsque vous cliquez sur un élément non focalisable , il entre:active (sans focus).
4. Lorsque vous cliquez sur un élément focalisable, il entre :active:focus(actif et concentré simultanément).

Exemple:

<div>
  I cannot be focused.
</div>

<div tabindex="0">
  I am focusable.
</div>

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 focaliserez le deuxième div et le verrez le cas d'exposition 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 le sont pas par défaut. Mais, il est sûr de supposer <a>, <input>, <textarea>sont focusable par défaut.

: le focus est lorsqu'un élément est en mesure d'accepter la saisie - le curseur dans une zone de saisie ou un lien qui a été tabulé.

: active est lorsqu'un élément est activé par un utilisateur - le temps entre le moment où un utilisateur appuie sur un bouton de la souris, puis le relâche.

Actif, c'est lorsque l'utilisateur active ce point (comme en cliquant avec la souris, si nous utilisons l'onglet d'un champ à l'autre, il n'y a pas de signe du style actif. le point est activé. Essaye ça :

<style type="text/css">
  input { font-weight: normal; color: black; }
  input:focus { color: green; outline: 1px solid green; }
  input:active { color: red; outline: 1px solid red; }
</style>

<input type="text"/>
<input type="text"/>

La mise au point ne peut être donnée que par la saisie au clavier, mais un élément peut être activé par les deux, 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 obtiennent lorsqu'ils survolent avec une souris. "Actif" 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 utilisant uniquement un clavier physiquement incapables d'utiliser une souris. Je vous invite à relever le défi #nomouse (nomouse dot org).