Las propiedades Css outline y outline-offset a fondo 24.5.15
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
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:
- Se dibuja a partir del límite exterior de border.
- 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.
- 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)
- 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.
- 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 ...
- La propiedad 'outline-width' acepta los mismos valores que 'border-width'.
- 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'
- La propiedad 'outline-color' acepta todos los colores y las diversas formas de declararlos. También la palabra clave 'invert'.
- 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
- El valor por defecto es 0 (cero).
- Valores negativos están permitidos. Eso significa que el outline se dibuja hacia el interior del elemento.
- 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.
Kseso
the obCSServer ᛯ 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 Kseso