"¿Has visto alguna vez ese bordecito a puntos alrededor de un enlace? Suele aparecer cuando el enlace tiene el foco. ¿Si?, Bueno, de todas formas pongo una captura:"
Así comienza el artículo en El Plan Seldon y no puedo dejar de pensar: sí lo he visto, lo vengo viendo desde que las PCs eran en blanco y negro y aún no entiendo cómo es que a nadie se le ha ocurrido que son espantosos y deben ser eliminados.
"Bien, pues esa linea a puntitos no es ni padding, ni margin ni border, (realmente no pertenece al modelo de caja de CSS). Pues resulta que esto se llama contorno y se controla mediante la propiedad outline."
¿Cómo es eso? Primera noticia de la existencia de esa propiedad (todos los días se aprende algo nuevo, amén).
Estos contornos, se crean automáticamente sobre cualquier vínculo (etiqueta A), sobre cualquier elemento que pertenezca a un formulario y sobre las imágenes que se utilicen como mapas (etiqueta MAP), en teoría, "para destacarlos sobre el resto cuando tienen el foco" (cuando están activos), en la realidad, sólo sirven para molestarme.
Como el contorno está siempre encima, no influye en la posición o tamaño del bloque y es dibujado comenzando junto fuera del límite del borde.
"Bien, pues esa linea a puntitos no es ni padding, ni margin ni border, (realmente no pertenece al modelo de caja de CSS). Pues resulta que esto se llama contorno y se controla mediante la propiedad outline."
¿Cómo es eso? Primera noticia de la existencia de esa propiedad (todos los días se aprende algo nuevo, amén).
Estos contornos, se crean automáticamente sobre cualquier vínculo (etiqueta A), sobre cualquier elemento que pertenezca a un formulario y sobre las imágenes que se utilicen como mapas (etiqueta MAP), en teoría, "para destacarlos sobre el resto cuando tienen el foco" (cuando están activos), en la realidad, sólo sirven para molestarme.
Como el contorno está siempre encima, no influye en la posición o tamaño del bloque y es dibujado comenzando junto fuera del límite del borde.
La propiedad outline es similar a la propiedad border excepto por dos cosas: no ocupa espacio (se dibuja "sobre" el elemento) y adopta la forma del elemento, es decir, puede no ser rectangular:
La propiedad genérica outline tiene tres estilos que puede controlar:
outline-width: thin | medium | thick | longitud (el ancho del contorno valor inicial medium)
outline-style: none | solid | double | dotted | dashed | groove | ridge | inset | outset (indica el tipo de contorno)
outline-color: el color del contorno (valor inicial invert)
outline-style: none | solid | double | dotted | dashed | groove | ridge | inset | outset (indica el tipo de contorno)
outline-color: el color del contorno (valor inicial invert)
La propiedad outline es una propiedad resumida y determina los tres valores:
outline: width style color
Por ejemplo:
a {outline:none;}
En el El Plan Seldon también sugieren utilizarla como una herramienta de depuración y ya mismo estoy adoptando la idea.
Cuando estoy creando o editando CSS, suelo utilizar un método bastante efectivo, recuadrar con border los bloques DIVs o cualquier otro elemento que quiera ver pero claro, siempre hay una pequeña variación ya que el borde "come" parte del ancho. Como outline no influye en el tamaño sino que funciona como una "capa transparente", es mucho más útil y basta darle valores para visualizar los elementos:
Cuando estoy creando o editando CSS, suelo utilizar un método bastante efectivo, recuadrar con border los bloques DIVs o cualquier otro elemento que quiera ver pero claro, siempre hay una pequeña variación ya que el borde "come" parte del ancho. Como outline no influye en el tamaño sino que funciona como una "capa transparente", es mucho más útil y basta darle valores para visualizar los elementos:
DIV {outline: 1px solid red;}
Simple, efectivo, una maravilla ¿dónde habrás estado toda mi vida que nunca te encontré?
REFERENCIAS:
Ya sé, pusieron un vídeo que encontraron en 
