Quelle est la différence entre les :focus
et les :active
pseudo-classes?
Quelle est la différence entre les :focus
et les :active
pseudo-classes?
Réponses:
:focus
et :active
sont 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 :focus
et qui :active
sont 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
état
focus
et active
n'a pas d'importance. Cela n'a d'importance que lorsqu'ils se contredisent, par exemple color:red
et color:blue
(puis le dernier gagne).
: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
visited
liens ne changeront pas de style lorsqu'ils seront survolés ou cliqués, car leur "visite" remplacera les autres pseudo-classes. LVHFA est l'ordre que la plupart des gens voudront utiliser dans la plupart des cas. Je ne sais pas pourquoi vous avez inclus lang
...
Il y a quatre cas.
:focus
(sans être actifs).:active
(sans focus).: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.
:active
mais pas :focus
. C'est une chose qui m'a dérouté et que les autres réponses n'ont pas abordé.
: 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.
:focus
ne fonctionne pas comme ça. La zone de texte que je tape actuellement est active car j'ai cliqué sur un bouton. Il peut également perdre et restaurer le focus en cliquant dessus, puis à nouveau. Dans une seconde, je vais mettre l'accent sur le bouton Ajouter un commentaire à droite en cliquant dessus. Tout cela sans saisie au clavier provoquant la mise au point.
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).
document.activeElement
propriété nommée de manière confuse , bien qu'elle doive être dans un catch try car IE8 peut lever une exception. Et sachez que les anciennes versions des navigateurs peuvent traiter: actif et: se concentrer différemment.function activeElement() { try { return document.activeElement; /* can get exeption in IE8 */ } catch(e) { } }