Haga que los estilos de apuntar, enfocar y estado activo sean diferentes.

A lo largo de los años, he diseñado los estados de los elementos :hover :focus y :active misma manera. No recuerdo exactamente cuándo exactamente comencé a hacer esto. Pero esto está lejos de ser el mejor enfoque. Por qué, intentaré explicar en este artículo.

---

Aquí hay un ejemplo del código que siempre usé.

 .selector { &:hover, &:focus, &:active { ... } } 

Cuando comencé a prestar más atención a la accesibilidad de la interfaz cuando trabajaba con el teclado (el estado de enfoque en particular), llegué a la conclusión de que no deberíamos estilizar los diferentes estados de elementos por igual.

La orientación, el enfoque y el estado activo deben tener un estilo diferente.

La razón es simple: ¡Estas son condiciones diferentes!

Hoy quiero mostrarles la forma mágica de organizar los tres estados sin mucho esfuerzo.

Comencemos con :hover .

Hover Styling (: hover)

:hover activa cuando el usuario se desplaza sobre un elemento con el cursor del mouse.

Por lo general, esta condición es cambiar el color de fondo del color de background-color y / o el color texto. Las diferencias no tienen que ser obvias, porque los usuarios ya saben que se ciernen sobre algún elemento.

 button { background-color: #dedede; } button:hover { background-color: #aaa; } 

Estilo de enfoque (: enfoque)

:focus dispara cuando un elemento recibe foco. Esto se logra de dos maneras:

1. al seleccionar un elemento con el botón Tabulador
2. cuando haces clic en un elemento con el mouse

Los elementos focales incluyen:

1. Enlaces ( <a> )
2. Botones ( <button> )
3. Elementos de formulario ( <input> , <textarea> , etc.)
4. Elementos con el atributo tabindex

Algunos puntos importantes a tener en cuenta:

1. Los usuarios no pueden seleccionar con el botón Tabulador un elemento con el atributo tabindex="-1" , pero pueden hacer clic en él con el mouse. Un clic provoca un estado de enfoque.
2. En los navegadores Safari y Firefox Mac OS, hacer clic no causa foco en los elementos <button>
3. Cuando hace clic en el enlace <a>, el foco permanece sobre él mientras se presiona el botón del mouse. Cuando suelta el botón, el foco se redirige a otro lugar si la id existente en la misma página se especifica en el atributo href

Al estilizar el estado de enfoque, nos preocupamos más por los usuarios que trabajan con la interfaz del teclado que por aquellos que usan el mouse.

Cuando los usuarios presionan Tab, no saben a qué elemento irá el foco, pero solo pueden adivinar. Es por eso que necesitamos un cambio notable en el estado, para atraer la atención del usuario hacia el elemento enfocado .

En la mayoría de los casos, el diseño del foco por defecto está bien. Si quieres darle estilo a tu manera , recuerda estos cuatro puntos:

1. Agregar un trazo
2. Crea animaciones
3. Cambiar background-color
4. Cambio de color

Dado que el cambio del background-color y color propiedades de color menudo se realiza con :hover , tiene sentido organizar el estado :focus utilizando un trazo o una animación.

Puede usar combinaciones de las propiedades de outline , border y box-shadow para crear estilos de enfoque interesantes. Cómo hacer esto, lo describí en el artículo " Crear un estilo de enfoque personalizado ".

 button { background-color: #dedede; } button:hover { background-color: #aaa; } button:focus { outline: none; box-shadow: 0 0 0 3px lightskyblue; } 

Estilización del estado activo (: activo)

Cuando interactúas con algo en la vida real, esperas un tipo de respuesta. Por ejemplo, cuando presiona un botón, espera que se presione.

En los sitios web, esta respuesta también es útil. Puede estilizar el momento de "presionar el botón" con :active . Se llama a este estado cuando interactúa con un elemento . En este caso, interacción significa:

1. Manteniendo presionado el botón izquierdo del mouse sobre un elemento (incluso cuando está desenfocado)
2. Sostenga la barra espaciadora (en los botones)

 button:active { background-color: #333; border-color: #333; color: #eee; } 

Dos puntos a tener en cuenta:

1. Mantener un espacio provoca el estado :active para los botones (<botón>), pero mantener Enter no
2. Enter inicia enlaces pero no causa un estado activo. La barra espaciadora no lanza enlaces en absoluto

Estilos de enlace predeterminados

Los enlaces tienen estilos de estado activos por defecto. Cuando se presionan, se ponen rojos

Relación entre: activo y: foco

Cuando mantiene presionado el botón izquierdo del mouse sobre el elemento enfocado, se activa su estado activo. Pero al mismo tiempo, también se activa el estado de enfoque.

Cuando suelta el botón izquierdo del mouse, el foco permanece en el elemento.

Esto se aplica a la mayoría de los elementos enfocables, excepto enlaces y botones.

Para enlaces:

1. Mantener presionado el botón izquierdo del mouse en Firefox y Chrome provoca los estados :active y :focus . En Safari, solo estado :active (probado solo en Mac OS)
2. Si suelta el botón del mouse,: el :focus permanece en el enlace (si el atributo href no enlaza con el id en la misma página). En Safari, el foco vuelve a <body>

Para botones:

1. Cuando mantiene presionado el botón izquierdo del mouse: ambos estados :active y :focus solo se invocan en Chrome. Estado :focus no se llama en absoluto en Safari y Firefox (Mac). Escribí sobre este extraño comportamiento aquí .

Si desea que los clics provoquen el foco de los botones, debe agregar este JavaScript lo antes posible (para lo que sea necesario, puede leer en el artículo, el enlace al que indiqué anteriormente).

 document.addEventListener('click', event => { if (event.target.matches('button')) { event.target.focus() } }) 

Agregar este código cambiará el comportamiento del botón a lo siguiente:

1. Cuando mantiene presionado el botón del mouse, se llama a :active en todos los navegadores :focus solo se :focus en Chrome
2. Si suelta el botón del mouse, llama :focus en Safari y Firefox (Mac OS). :focus permanece en el botón en todos los navegadores

Comportamiento del botón en Safari después de agregar un fragmento de código JS

Ahora que sabe todo lo que necesita sobre el desplazamiento, el enfoque y los estados activos, quiero hablar sobre el diseño de los tres

Combinación mágica

La combinación mágica permite a los usuarios obtener una respuesta cuando apuntan, enfocan o interactúan con un elemento. Aquí está el código que necesitas:

 .element:hover, .element:active { /*   / */ } .element:focus { /*   */ } 

Para usuarios de mouse:

1. Cuando el usuario pasa el cursor sobre un elemento, cambia el color background-color (y / o el color ). Hay una respuesta
2. Cuando el usuario hace clic en un elemento, se muestra el contorno del trazo del foco. Hay una respuesta

Para usuarios de teclado:

1. Cuando el usuario selecciona un elemento con el botón Tabulador, se muestra el trazo de enfoque. Hay una respuesta
2. Cuando interactúan con un elemento, cambia el color background-color (y / o el color ). Hay una respuesta

¡Lo mejor de ambos mundos!

1. No he probado la combinación mágica con cuidado, esto es solo un argumento a favor de este concepto conceptual. Le agradecería que me ayudara a comprobarlo y me informara sobre posibles problemas.
2. Si va a marcar, no use Codepen . El estado de enfoque para los enlaces en Codepen es muy extraño. Si pasa el mouse sobre un enlace, el trazo de enfoque se elimina. Por qué No lo se A veces me parece que es mejor verificar esas cosas sin el uso de herramientas adicionales. Solo el viejo HTML, CSS, JS.

No es una combinación mágica (pero tal vez incluso mejor)

Como mencioné anteriormente, los clics en los botones tienen un comportamiento extraño en Safari y Firefox en Mac OS. Si agregó el fragmento de código JavaScript que sugerí anteriormente, la combinación mágica aún funciona. Pero no perfecto.

Esto es lo que sucede en Safari y Firefox en Mac OS:

1. Cuando el usuario mantiene presionado el botón del mouse, nada cambia
2. Cuando los usuarios sueltan el botón, el elemento recibe el foco.

Si crees que esto es suficiente, entonces la combinación mágica funciona. Puedes parar ahí.

Pero si cree que este comportamiento no es lo suficientemente accesible, es posible que desee diseñar los estados :hover :focus y :active separado.

 .element:hover { /*   / */ } .element:active { /*        */ } .element:focus { /*   */ } 

Comportamiento del botón en Safari si los tres estados han sido diseñados

Eso es todo! Gracias por leer y espero que hayas aprendido algo nuevo hoy.