Mediante CSS se pueden modificar ciertos detalles relacionados con el modo en que interactua el usuario con un alguno de los componentes del interfaz de la página. Uno de esos detalles es el outline, que es algo así como un borde extra, que se suele utilizar para indicar que elemento está seleccionado o tiene el foco.
Es fácil de observar este borde o línea divisoria en los navegadores, pulsando TAB y moviéndonos por los diferentes enlaces de la página. Generalmente, aparece como una línea punteada y es muy similar al funcionamiento de los bordes.
Las propiedades para contornos
La familia de propiedades outline-* nos permiten modificar el comportamiento visual del contorno de los elementos. Generalmente, este outline se muestra como una línea divisoria que rodea el contenido externo del propio elemento. Esta línea divisoria, por defecto no ocupa espacio en el modelo de cajas y no tiene porque tener una forma rectangular.
Las propiedades relacionadas con este tipo de borde son las siguientes:
| Propiedad | Valor | Significado |
|---|---|---|
outline-width | medium | thin | thick | | Tamaño de los bordes. Tamaño predefinido o específico. |
outline-style | Idem a los bordes. Estilo de la línea divisoria. | |
outline-color | invert | | Invierte el color de la misma. |
outline-offset | Desplazamiento del contorno. |
Veamos como funcionan.
Propiedades individuales de outline
La propiedad outline-color permite modificar el color de la línea divisoria, en el caso de que el tamaño outline-width sea mayor que cero o tenga un valor definido de las palabras clave mencionadas anteriormente.
Además, al igual que con los bordes, también se puede cambiar el estilo de la línea con outline-style. Veamos un ejemplo, donde puedes comparar con los bordes (en negro). Observa que hemos añadido el outline (en rojo) cuando el elemento está seleccionado. Para conseguirlo, pulsa TAB para marcar los diferentes enlaces:
.container {
display: flex;
gap: 1rem;
}
a {
text-align: center;
border-width: 5px;
border-style: solid;
border-color: black;
}
a:focus {
outline-width: 5px;
outline-style: solid;
outline-color: red;
}
<div class="container">
<a href="https://manz.dev/">ManzDev</a>
<a href="https://links.manz.dev/">Links</a>
<a href="https://twitch.tv/ManzDev/">Twitch</a>
<a href="https://youtube.com/@manzdev">Youtube</a>
</div>
Como puedes ver, es muy similar a los bordes de CSS, pero los contornos outline son como una especie de borde exterior.
La propiedad outline-offset
En los bordes tradicionales de CSS no existe la propiedad border-offset, sin embargo, en outline si que existe una propiedad outline-offset. Esta propiedad nos permite ampliar el desplazamiento o espacio interior de la línea de contorno.
Observa el mismo ejemplo anterior, pero estableciendo un outline-offset de 10px:
.container {
display: flex;
gap: 1rem;
}
a {
text-align: center;
border-width: 5px;
border-style: solid;
border-color: black;
}
a:focus {
outline-width: 5px;
outline-style: solid;
outline-color: red;
outline-offset: 10px;
}
<div class="container">
<a href="https://manz.dev/">ManzDev</a>
<a href="https://links.manz.dev/">Links</a>
<a href="https://twitch.tv/ManzDev/">Twitch</a>
<a href="https://youtube.com/@manzdev">Youtube</a>
</div>
Atajo: La propiedad outline
Al igual que con muchas otras propiedades, es posible resumir las propiedades individuales en una sola propiedad para ahorrar espacio. El orden recomendado es el siguiente:
div {
/* outline: <color> <style> <width> */
}
Observa que la propiedad outline-offset no forma parte del atajo outline. Veamos el mismo ejemplo anterior, pero utilizando la propiedad de atajo outline, y nuevamente, comparándola con la propiedad de atajo border:
.container {
display: flex;
gap: 1rem;
}
a {
text-align: center;
border: 5px solid black;
}
a:focus {
outline: 5px solid red;
outline-offset: 10px;
}
<div class="container">
<a href="https://manz.dev/">ManzDev</a>
<a href="https://links.manz.dev/">Links</a>
<a href="https://twitch.tv/ManzDev/">Twitch</a>
<a href="https://youtube.com/@manzdev">Youtube</a>
</div>
Nota: En muchas ocasiones, estas propiedades son usadas por el desarrollador para indicar un
outline: 0y desactivar esta característica de contorno. Hay que tener mucho cuidado con esto, ya que este contorno visual es muy importante en el ámbito de la accesibilidad, y desactivarlo puede ser contraproducente.
