El contorno de la discordia

28/may/2007 16

Uno de los pocos detalles que le he visto a Firefox, responde a un tema con los links. En realidad, aparece siempre que el foco está sobre un elemento (formularios, enlaces) para llamar la atención y destacarlo por sobre otros. Se dibuja una línea punteada alrededor de nuestro elemento, y lo he notado muy claramente en Firefox, ya que Safari (browser que uso por defecto) no lo despliega si no lo explicito. Otro dato sobre este contorno, o outline: a pesar de que despliega un borde alrededor, no responde al modelo de caja, o sea, no ocupa espacio interior o exterior. O sea, que no debemos de considerarlo al diagramar con cajas, ya que no modifica nuestros anchos o altos.

Pues con todo esto, a lo que voy es que lo podemos controlar a través de CSS, mediante la propiedad outline. Se declara tal como un borde:

a {
     outline: 1px solid black;
}

Mi problema es que está declarado por defecto en Firefox en la peudo-clase :hover, lo que me molesta bastante, principalmente cuando el elemento que contiene el link (y por lo tanto el outline) está posicionado con relación al margen. Fíjense en el ejemplo, en el enlace del medio y se darán cuenta a lo que me refiero (hagan click sobre él con Firefox y verán el susodicho borde contorno).

Ver ejemplo

Bueno, la solución final reside en quitarlo de raíz. Se declara que para todos los links, en todas las instancias (lo que involucra las 4 pseudo-clases a:link, a:visited, a:hover, a:active) este contorno desaparezca:

a {
     outline: 0;
}

Ver nuevamente ejemplos.

Comentarios

  1. Cristián Frenkel [#]

    Wow, estoy gratamente sorprendido… Nunca se me pasó por la cabeza que eso fuese un problema de CSS. Ya se lo incorporé a mis sitios. ¡Gracias!

  2. RUDE [#]

    Ayer justo alguien me aclaró la razón de por qué no hay que tomarse muy a la ligera este outline.Te recomiendo que le eches un vistazo tú mismo.

  3. Markp [#]

    Esta claro que es un borde muy molesto en la gran mayoria de los casos. Es bueno saber como controlarlo.

    Saludos

  4. fearlex [#]

    Muy bueno, hace ya un tiempo que lo incluyo en mis hojas de estilos, es bastante molesto.

  5. La propiedad outline de las CSS [#]

    […] Ayer me avisaron de algo que realmente me puso un poco los pelos de punta y que ni se me había pasado por la cabeza. Existe una propiedad de las CSS que controlan esos recuadritos de puntos que aparecen al clicar sobre un enlace, no tienen nada que ver con el layout y solo tienen importancia en el plano visual. Es por esto que en algunos sitios se nos indica como eliminar dicho elemento. […]

  6. Leandono [#]

    Si, es un truco bastante útil este, en mi caso, suelo usarlo bastante para quitar el borde punteado en los logos de los diseños, no se si me explico, por ejemplo, si uno hace click en el logo superior de CSSLab , la linea punteada aparecerá. Justamente en esos casos uso el truco.

  7. Carlos C [#]

    Con respecto a lo que decia Rude sobre la accesibilidad, Outline no necesariamente la afecta. Esta propiedad sirve escencialmente para quienes tienen problemas en la vista. Por ejemplo si quiseramos usarla correctamente deberíamos utilizarla de la siguiente forma: :focus { outline: thick solid black } . Ahora para que estamos con cosas, sabemos que muchos no utilizaremos el outline de esa forma porque no se vería bien con el diseño… y la linea punteada que trae por defecto Outline no ayuda a ver mejor. Por mi es mejor eliminarla a no ser que la ocupemos como corresponde.

  8. Bruno [#]

    Accesiblemente hablando creo que es contraproducente eliminar el outline de los enlaces. Ya que imposibilitas a la gente que está obligada a navegar mediante teclado (convencional o no) y que usa el tabulador para posicionarse en los enlaces, ya que no saben en cual están posicionados en ese momento, ni pueden ver que hace cuando pulsan “tab”.

    Además firefox interpreta perfectamente el outline siguiendo el modelo de caja. En los ejemplos que pones tienes definidos los enlaces como bloque, haciendo que ocupen todo el ancho del contenedor, y así los interpreta ff.

    Tampoco están definidos en el hover, es cosa del sistema operativo que uses, igual que los scrolls.

    Pero si quieres eliminar el efecto “antiestetico” del outline por defecto en los enlaces en bloque, te sugiero quitarlo del a:active{outline:none} no del a general. Así lo quitas para usuarios que pinchan con el mouse pero no para los que navegan con teclado.

    Un saludo.

  9. Tamy1923 [#]

    Muchisimas gracias por este pequeño truco…no sabia como hacerlo…

    Gracias, te pasaste!!!

  10. Eduardo [#]

    Holas, bueno el dato eh.. pero tengo una consulta.. mi problema es con IE (Internet Explorer) veras cuando subo una animacion flash y lo publico con Dreamweaver a la hora de verlo.. me aparece un condenado borde punteado rodeando la animacion.. y aunk me mato buscando soluciones no las encuentro… pliss alguien ayudemee

    mi correo es: prinxbmw_e@hotmail.com

  11. CSSLab Admin [#]

    Eduardo, ese contorno es con windows y IE….. lo pone para ‘proteger’ al usuario de aplicaciones q no son suyas, por lo tanto no pueden responder por su seguridad. Lee desde Adobe Active Content sobre ello.

  12. isaacDM [#]

    Solo una añadidura mas, el mejor método para esquivar esa “proteccion” no es el Active Content de Adobe, es mejor swfObject, ligero, con mas opciones, y ejemplos para todo tipo de uso de flash

    http://blog.deconcept.com/swfobject/

    SAlu2 jorge!!!

  13. » CSS Reseter | CSSLab [#]

    […] Esto ya lo había mencionado en el artículo El contorno de la discordia. […]

  14. Andev [#]

    Gracias por el dato, pero una consulta como desaparesco el borde negro del solo sucede en ie

    Gracias de antemano por la respuesta

  15. Daniel [#]

    Yo tenia entendido que no estamos hablando de un borde cualquiera, se trata de una propiedad de CSS y no aparece solo en IExplorer y FF. Pienso que Bruno tiene razón es un poco delicado y hay que ser selectivos (específicos) de donde quitarlo pues si se quita en formularios se pierde el enfoque que esta propiedad proporciona al navegar con teclado, saludos.

    PD: IE 6 ignora por completo esta propiedad.

  16. elandy2009 [#]

    Si todavía quieren quitar el outline, deberán asignar un estilo al focus de los enlaces. Así garantizarán la navegación por los links con el teclado (tecla tab), por ejemplo:

    a:active,a:focus {outline:0;color:red}

    para que al hacer foco al link, cambie de color. acá hay otro:

    a:active,a:focus {outline:0;background:yellow}

    en este caso, el fondo del link se vuelve amarillo

Deja tu Comentario

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

CSSLab