Outline

Finalizamos este capítulo sobre las propiedades de capa con la definición de una propiedad CSS a la que suele dársele muy poco uso: la propiedad outline.

Se utiliza para establecer la misma anchura, color y estilo al perfil de una capa, como si se tratara del borde. Pero a pesar del gran parecido con el border de capa, existen un par de diferencias fundamentales:

• Outline genera perfiles que no ocupan espacio, los bordes si lo hacen (una capa de 250px con un borde de 5px por lado tiene una medida total de 260px. La misma capa con un outline de 5px sigue midiendo 250px)
• Los perfiles pueden tener formas no rectangulares:Como vemos en la imagen, aplicando un border al texto este se muestra de una forma poco estética donde cada línea muestra un borde superior e inferior, aunque sólo la primera y última de ellas muestran los márgenes laterales. En el segundo caso y aplicando la propiedad outline conseguimos perfilar los contenidos de nuestra capa  encerrados con una forma no rectangular.Advertir que cada navegador tienen un estilo propio para dibujar los perfiles de forma que pueden verse diferentes en uno o en otro a diferencia de los bordes que si permanecen iguales indistintamente de cual sea nuestro navegador.

  

Los valores posibles para outline son:

• outline-color:#ffcc00;
  Nos permite definir el color para el perfil de nuestra capa.
• outline-style: solid;
  Nos permite definir el estilo de perfil que aplicaremos a nuestra capa, pudiendo ser none (sin perfil), dotted (perfil punteado), dashed (perfil de raya discontinua), solid (perfil de raya continua), double (perfil de raya doble), groove (perfil hundido), ridge (perfil saliente)
• outline-width: 1px;
  Nos permite definir el grueso de nuestro perfil.
• outline:1px solid #ffcc00;
  Forma abreviada para definir tanto el ancho como el estilo como el color en una sola propiedad. Al igual que ocurre con el border, el orden que utilicemos es indistinto y dependerá de nosotros cual deseemos seguir.

Destacar en este caso, que para los outline no existen valores posicionales tipo perfil izquierdo o perfil superior. El perfil de un elemento es único y sus propiedades son idénticas para cada uno de los cuatro lados.

Pese a que se trata de una propiedad que suele usarse mucho menos que el border, outline es la propiedad que vemos por defecto en nuestros navegadores cuando navegamos por las distintas páginas desde nuestro teclado por medio del tabulador que va señalando los enlaces, campos de formulario y en definitiva todos los elementos seleccionables de nuestra página.

De hecho, según el estándar oficial, ese es el propósito para el que se crearon los perfiles: indicar de forma clara el elemento (botón, enlace, otros controles de formulario) que está seleccionado en cada momento. Y suelen ser esos recuadritos punteados negros que aparece durante medio segundo cuando le damos a un enlace o cuando nos ponemos sobre un campo editable de un formulario. Razón importante para que nunca, nunca, nunca al resetear los estilos pongamos este valor a 0, pues destrozaría toda la accesibilidad de nuestra página.