Was ist der Unterschied zwischen: Fokus und: Aktiv?

Was ist der Unterschied zwischen der :focusund der :activePseudoklasse?

:focusund :activesind zwei verschiedene Zustände.

• :focus stellt den Zustand dar, in dem das Element aktuell ausgewählt ist, um Eingaben zu empfangen, und
• :active stellt den Status dar, in dem das Element gerade vom Benutzer aktiviert wird.

Nehmen wir zum Beispiel an, wir haben eine <button>. Der <button>wird zunächst keinen Zustand haben. Es existiert einfach. Wenn wir Tabdem "Fokus" geben <button>, tritt es jetzt in seinen :focusZustand ein. Wenn Sie dann klicken (oder drücken space), wird die Schaltfläche in den :activeStatus ( ) versetzt.

In diesem Sinne, wenn Sie auf ein Element klicken, geben Sie ihm den Fokus, was auch die Illusion kultiviert, dass :focusund :activedasselbe sind. Sie sind nicht gleich. Wenn Sie darauf klicken, befindet sich die Schaltfläche im :focus:activeStatus.

Ein Beispiel:

<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>

edit: 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

Quelle: CSS-Pseudoklassen

Es gibt vier Fälle.

1. Standardmäßig sind sowohl Aktiv als auch Fokus deaktiviert.
2. Wenn Sie auf der Registerkarte durch fokussierbare Elemente blättern , werden diese eingegeben :focus(ohne aktiv).
3. Wenn Sie klicken auf einem nicht-fokussierbare Element , tritt es :active(ohne Fokus).
4. Wenn Sie klicken einen auf fokussierbare Element es betritt :active:focus(aktiv und konzentrieren sich gleichzeitig).

Beispiel:

<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;
}

Wenn die Seite geladen wird, sind beide in Fall 1. Wenn Sie die Tabulatortaste drücken, fokussieren Sie das zweite Div und sehen, dass es Fall 2 zeigt. Wenn Sie auf das erste Div klicken, sehen Sie Fall 3. Wenn Sie auf das zweite Div klicken, sehen Sie Fall 4 .

Ob ein Element fokussierbar ist oder nicht, ist eine andere Frage . Die meisten sind nicht standardmäßig. Aber es ist sicher anzunehmen <a>, <input>, <textarea>sind fokussierbar standardmäßig.

: Fokus ist, wenn ein Element Eingaben akzeptieren kann - der Cursor in einem Eingabefeld oder ein Link, zu dem eine Registerkarte erstellt wurde.

: Aktiv ist, wenn ein Element von einem Benutzer aktiviert wird - die Zeit zwischen dem Drücken einer Maustaste durch einen Benutzer und dem anschließenden Loslassen.

Aktiv ist, wenn der Benutzer diesen Punkt aktiviert (wie beim Klicken mit der Maus, wenn wir die Registerkarte von Feld zu Feld verwenden, gibt es kein Zeichen für den aktiven Stil. Vielleicht benötigt das Klicken mehr Zeit, versuchen Sie einfach, den Klick auf diesen Punkt zu halten), wird der Fokus danach ausgeführt Der Punkt ist aktiviert. Versuche dies :

<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"/>

Der Fokus kann nur durch Tastatureingabe gegeben werden, aber ein Element kann sowohl durch eine Maus als auch durch eine Tastatur aktiviert werden.

Wenn man verwenden würde: Fokus auf einen Link, würde die Stilregel nur gelten, wenn man ein Botton auf der Tastatur drückt.

Die Verwendung von "Fokus" gibt Tastaturbenutzern den gleichen Effekt, den Mausbenutzer erhalten, wenn sie mit der Maus schweben. "Aktiv" wird benötigt, um den gleichen Effekt in Internet Explorer zu erzielen.

Die Realität ist, dass diese Zustände nicht für alle Benutzer so funktionieren, wie sie sollten. Wenn nicht alle drei Selektoren verwendet werden, treten bei vielen Benutzern, die nur über die Tastatur verfügen und physisch keine Maus verwenden können, Probleme mit der Barrierefreiheit auf. Ich lade Sie ein, die # nomouse-Herausforderung anzunehmen (nomouse dot org).