¿Cuál es la diferencia entre: focus y: active?

¿Cuál es la diferencia entre el :focus y :active pseudo-clases :active ?

:focus y :active son dos estados diferentes.

:focus representa el estado cuando el elemento está seleccionado actualmente para recibir la entrada y :active representa el estado cuando el elemento está siendo activado actualmente por el usuario.

Por ejemplo, digamos que tenemos un . El no tendrá ningún estado para comenzar. Simplemente existe. Si usamos Tab para dar “foco” al , ahora ingresa su :focus estado de :focus . Si luego haces clic (o presionas espacio ), haces que el botón ingrese su estado ( :active ).

En esa nota, cuando haces clic en un elemento, le das enfoque, que también cultiva la ilusión de que :focus y :active son lo mismo. Ellos no son los mismos. Cuando se hace clic, el botón está en :focus:active estado :focus:active .

Un ejemplo:

   
 :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 

Fuente: Pseudo-clases CSS

Hay cuatro casos.

  1. Por defecto, active y focus están desactivados.
  2. Cuando tabures para desplazarte por elementos enfocables , ingresarán :focus (sin activo).
  3. Cuando hace clic en un elemento no enfocable , ingresa :active (sin foco).
  4. Cuando haces clic en un elemento enfocable ingresa :active:focus (activo y foco simultáneamente).

Ejemplo:

 
I cannot be focused.
I am focusable.

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

Cuando la página se carga, ambas están en el caso 1. Al presionar la pestaña, enfocarás el segundo div y lo verás en el caso 2. Cuando haces clic en el primer div, ves el caso 3. Cuando haces clic en el segundo div, ves el caso 4 .


Si un elemento es enfocable o no es otra cuestión . La mayoría no son por defecto. Pero es seguro asumir que , , son enfocables por defecto.

: focus es cuando un elemento puede aceptar entrada: el cursor en un cuadro de entrada o un enlace al que se ha asignado una pestaña.

: activo es cuando un elemento está siendo activado por un usuario – el tiempo entre cuando un usuario presiona un botón del mouse y luego lo libera.

Activo es cuando el usuario activa ese punto (Al igual que al hacer clic en el mouse, si usamos tabulación de campo a campo no hay ningún signo del estilo activo. Tal vez haga clic necesite más tiempo, simplemente intente mantener clic en ese punto), el enfoque se produce después el punto está activado. Prueba esto :

    

El enfoque solo se puede dar con la entrada del teclado, pero un elemento se puede activar con ambos, un mouse o un teclado.

Si se utilizara: centrarse en un enlace, la regla de estilo solo se aplicaría al presionar un botón en el teclado.

El uso de “enfoque” le dará a los usuarios del teclado el mismo efecto que los usuarios de mouse obtienen cuando mueven el mouse. “Activo” es necesario para obtener el mismo efecto en Internet Explorer.

La realidad es que estos estados no funcionan como deberían para todos los usuarios. Si no se utilizan los tres selectores, se crean problemas de accesibilidad para muchos usuarios que solo usan teclados y que no pueden usar el mouse físicamente. Los invito a tomar el desafío #nomouse (nomouse dot org).

    Intereting Posts