soy Kseso y esto EsCSS

Las propiedades Css outline y outline-offset a fondo

La propiedad outline en su forma acortada y las tres que la conforman: outline-width | outline-style | outline-color y la propiedad outline-offset tal como son definidas en el documento que las desarrolla.

Las propiedades Css outline y outline-offset a fondo

·Por Kseso ✎ 0
La propiedad outline y outline-offset a fondo

El documento "la interfaz gráfica de usuario", del que ya comenté a fondo los cursores, define la propiedad outline y su asociada outline-offset.
Nota al margen: en la especificación de Css2.1 se englobaba bajo el epígrafe "Contornos dinámicos". Título que en la actualidad ha desaparecido.

El outline se puede equiparar a un contorno del elemento similar al borde, pero con unas particularidades y una carga de accesibilidad que lo hacen radicalmente diferente de ellos (de los bordes).

Outline:

La propiedad outline define un cortorno alrededor del elemento al que se declara. Esta propiedad es la forma resumida (shorthand) de otras tres propiedades individuales.

outline-width

Define la anchura del trazo dibujado. Admite los mismos valores queborder-width

Valor: <border-width> | inherit
Inicial: medium
Se aplica a: todos los elementos
Se hereda: no
Porcentajes: N/A
Medios: visuales

outline-style

El estilo del trazo. Admite los mismos valores que border-style

Valor: <border-style> | inherit
Inicial: None
Se aplica a: todos los elementos
Se hereda: no
Porcentajes: N/A
Medios: visuales

outline-color

El color del trazo. Admite los mismos valores que color

Valor: <color> | invert | inherit
Inicial: Invert
Se aplica a: todos los elementos
Se hereda: no
Porcentajes: N/A
Medios: visuales

outline

La propiedad de forma acortada o resumida.

Valor: [ <'outline-color'> || <'outline-style'> || <'outline-width'> ] | inherit
Inicial: Ver las individuales
Se aplica a: todos los elementos
Se hereda: no
Porcentajes: N/A
Medios: visuales

Accesibilidad de outline

La propiedad outline tiene una carga muy fuerte de accesibilidad. Declarada en la pseudoclase :focus posibilita que el usuario que hace uso de la navegación por teclado sepa en todo momento el elemento que recibe el foco.
Por esta razón no es buena idea el deshabilitarlo.

Particularidades y características de outline

Pese a que outline se define como un borde y toma a la propiedad border como referente, difiere de ella en varios aspectos:

  1. Se dibuja a partir del límite exterior de border.
  2. Outline no ocupan espacio: esto es, su aparición u ocultamiento no provoca un redibujado de las cajas. No suma en el tamaño de la caja. No hay movimiento o desplazamiento de los elementos como con border.
  3. Por la razón anterior Outline se dibuja siempre sobre los elementos. Por lo que puede solapar a otros elementos o a sí mismo (ver más abajo outline-offset)
  4. Outline puede ser no rectangular: Si el elemento se distribuye en varias líneas, el contorno no forma un rectágulo para encerrar a todo el elemento, sino que ocurre lo que ves en este span.
  5. Outline es el mismo en todos los lados. No se pueden definir por laterales como en border-top | border-right... Así que es imposible (no válido) un outline-left |outline-bottom ...
  6. La propiedad 'outline-width' acepta los mismos valores que 'border-width'.
  7. La propiedad 'outline-style' acepta los mismos valores que 'border-style', excepto que 'hidden' no es un estilo de contorno lícito. Css 3 ha añadido el valor 'auto': que deja libertad al agente de usuario para crearlo. Si no lo tiene definido 'auto' equivale a 'solid'
  8. La propiedad 'outline-color' acepta todos los colores y las diversas formas de declararlos. También la palabra clave 'invert'.
  9. La especificación no define cómo dibujar múltiples valores para el mismo estilo: .elemento { outline: thick solid } ni tampoco cómo se deben tratar los solapamientos entre los estilos múltiples y con otros elementos.

La propiedad outline-offset

Por defecto, outline se dibuja a partir y hacia el exterior de border del elemento ( o donde acabe su anchura/altura si es 0). Sin embargo con la propiedad outline-offset esto se puede alterar.
outline-offset define la distancia al borde donde comenzará a dibujarse el contorno formado por outline.

Particularidades y características de outline-offset

  1. El valor por defecto es 0 (cero).
  2. Valores negativos están permitidos. Eso significa que el outline se dibuja hacia el interior del elemento.
  3. En según que circunstancias, la conjunción de 'outline-width' y 'outline-offset' puede suponer que tape al propio elemento por la característica de que siempre se dibuja sobre las cajas. Observa lo que ocurre con el siguiente código y su resultado según el navegador con el que lo visualices.
.el { border: 2px solid #000; outline: 12px solid rgba(255,0,0,.5); outline-offset: -12px; } Ejemplo de outline-offset: -12px

Soporte de los navegadores a outline-offset

Fíjate que el resultado es diferente según el navegador utilizado:
Chrome desplaza el outline fuera del contorno del elemento. Hay desborde y solapamiento con los elementos adyacentes.
Firefox, Opera y Safari no hay desborde ni solapamineto con los adyacentes, queda contenido dentro del borde.
IE9 a su bola, como siempre, ignora 'outline-offset'.

Artículo publicado originalmente en Agosto de 2012.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso