:focus {outline, porque es importante no suprimirlo sino atribuirle los estilos correctos

Estamos acostumbrados, por cuestión de estética, quitar la propiedad outline, que depende del selector :focus

En efecto, por default los navegadores imponen un grueso halo azul alrededor de un elemento hijo de la etiqueta <from>:

Pero al eliminar el outline a través de los estilos

:focus {
   outline: 0;
   /* or */
   outline: none;
}

quitamos del website una funcionalidad muy importante para la gente acostumbrada a navegar con el teclado, y para los con problema de visión.

Así es muy recomendable que al lugar de suprimirlo, customizar el estilo.

De esa manera por ejemplo:

:focus {
 outline: thin dotted #333333 !important;
 outline: 5px auto -webkit-focus-ring-color !important;
 outline-offset: -2px;
}

Nota: el estilo por default de Chrome:

:focus {
   /* -webkit-focus-ring-color = '#5B9DD9' */
   outline: -webkit-focus-ring-color auto 5px;
}

El de Firefox:

:focus {
  /*  outline:

1px dotted #212121

; } 

Spread the love

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *