Juan Manuel Miércoles, 30 de Julio de 2008 a las 14.04

Eliminando la molesta línea punteada de los enlaces de tu sitio

Diseño, Usabilidad, CSS, código, accesibilidad, enlaces, estilos CSS, links CSS

Eliminando la molesta línea punteada de los enlaces de tu sitio Los links del tipo “ancla” <a> muestran por defecto una línea punteada cuando están activos o “en foco”. En Firefox 3 la línea toma el color del texto mientras que en otros navegadores o versiones directamente se muestra en color gris.

Esto no es una locura, por cuestiones de accesibilidad se muestra qué link está activo (piensa en personas que no puedan acceder a un sitio con una computadora con mouse. Presionando”tab” se desplazarán por los enlaces. Pero si te molesta ver esa línea en tu sitio por cuestión de estética o diseño, puedes seguir leyendo para enterarte cómo eliminarla.

Aquí puedes ver un ejemplo de cómo se ve la línea punteada de la que te hablo.

Eliminando la molesta línea punteada de los enlaces de tu sitio

Prueba hacer clic en un enlace cualquiera, aquí mismo, pero deja el botón del mouse presionado unos segundos. Podrás ver la línea “en vivo y en directo”.

Quitarla por medio de CSS es muy sencillo:

a {
outline: none;
}
Pero no te olvides de la accesibilidad. Deberías crear un estilo para reemplazar esa línea molesta. Yo suelo usar el mismo que en “hover”.

Por ejemplo:

a:hover, a:active, a:focus {
// estilos para cualquier forma en la que se vaya a usar el link
}
¡Anímate a personalizar tu blog!

Fuente: CSS Tricks