eliminar-contorno-puntos-css

Todo el que use Firefox 3 se dará cuenta que al hacer click sobre un enlace o un elemento enlazado con la etiqueta este crea un recuadro punteado alrededor de sí mismo. En Firefox 3, el color de los puntos está determinado por el color del texto, en anteriores versiones y en otros navegadores este color es gris. ¿Para qué sirve esto? Pues muy simple, es un propósito para mejorar la accesibilidad del usuario. Para las personas que no puedan usar un ratón, deben tener una señal sobre el enlace que está activo, para que puedan saber a qué enlace vamos a ir al pulsar Intro en el teclado.

Este efecto es estilizado mediante la propiedad outline.  La propiedad “outline” es similar a la propiedad “border” (Más información acerca de la propiedad outline). El valor de la propiedad “outline” no es una parte del elemento. El borde se calcula con la anchura total de la caja, considerando que outline no es. Esto es importante ya que así el diseño no se estropeará al eliminar la propiedad “outline”.

Cómo eliminar la propiedad outline

Para eliminar el contorno de puntos tendremos que darle a la propiedad outline el valor “none”:

a {  outline: none; }

Pero al haber eliminado esta propiedad, estamos quitando al sitio web una importante función de accesibilidad. ¿Por qué no estilizamos los enlaces a nuestro gusto para que tengan mayor accesibilidad? Es bueno estilizar los enlaces para los pseudo-elementos :hover, :active y :focus ya que, aunque hayamos eliminado la propiedad “outline”, añadiremos accesibilidad al sitio.

a:hover, a:active, a:focus {
    // estilizar un enlace que va a ser utilizado.
 }

Ojo, esta entrada no debe confundirse con la otra que expuse anteriormente sobre la eliminación del borde en un vínculo.

Vía | CSS-Tricks