Usando la propiedad `outline` como borde plegable

La outlinepropiedad en CSS dibuja una línea alrededor del exterior de un elemento. Esto es bastante similar a la borderpropiedad, con la principal excepción de que outlineno forma parte del modelo de caja. Se suele utilizar para resaltar elementos, por ejemplo, el :focusestilo.

En este artículo, vamos a ponerle punto, apoyándonos en lo que outlinees bueno:

1. Se pueden colapsar entre sí (¡engaño!) porque técnicamente “no ocupan espacio”.
2. Mostrar y ocultar contornos, o cambiarlos outline-width, no active los diseños (lo cual es bueno para animaciones y transiciones de alto rendimiento).

Bordes de celda de imitación de tabla más fáciles

A continuación se muestra un ejemplo de una lista dispuesta como una cuadrícula, lo que hace que parezca un diseño de tabla. Cada celda tiene un ancho mínimo y crecerá/reducirá a medida que el contenedor se ensanche/estreche.

Podríamos usar borderpara lograr esto, así:

Pero para hacer un borde uniforme alrededor de cada celda, sin duplicarlas ni faltarlas, es un proceso engorroso. Arriba, utilicé un borde en todos los lados de cada “celda” y luego márgenes negativos para superponerlos y evitar la duplicación. Eso significó recortar el borde en dos lados, por lo que los bordes tuvieron que volver a aplicarse allí en el padre. Demasiado trabajo complicado, si me preguntas.

Incluso tener que ocultar overflowes una gran tarea, que debes hacer porque, de lo contrario, activarás las barras de desplazamiento a menos que recurras a trucos aún más complicados, como usar pseudoelementos absolutamente posicionados.

Vea el mismo resultado, visualmente, sólo que usando outlineen su lugar:

El código aquí es mucho más limpio. No hay ningún verdadero engaño en el juego. Cada “celda” simplemente tiene un contorno a su alrededor, y eso es todo.

Borde en animación

El cambio border-widthsiempre activará el diseño, sin importar si realmente es necesario.

Además, debido al manejo especial de Chrome de los subpíxeles para el ancho de los bordes, animar la border-widthpropiedad hace que todo el borde tiemble (lo cual creo que es extraño). Firefox no tiene este problema.

Hay pros y contras cuando se trata de animar fronteras. Consulte la publicación de Stephen Shaw de hace un tiempo para ver un ejemplo de las implicaciones en el rendimiento.

Hay algunas trampas

Por supuesto que las hay. Como la mayoría de las otras propiedades CSS, hay algunos “errores” o cosas que debes saber al trabajar con la outlinepropiedad:

1. Los contornos redondeados sólo son compatibles con Firefox en el momento de escribir este artículo. Me imagino que otros navegadores eventualmente también los admitirán.
2. Un contorno siempre recorre todos los lados. Es decir, no es una propiedad abreviada como, por ejemplo, border; entonces no outline-bottom, y así sucesivamente.

¡Pero podemos solucionar estas limitaciones! Por ejemplo, podemos usar agregar un box-shadowsin radio de desenfoque como alternativa. Pero recuerde: box-shadowtiene un costo de rendimiento mayor que usar cualquiera de los dos outliney border.

¡Eso es todo!

¿Siempre estarás trabajando en algo que requiera falsificar una tabla con una lista desordenada? Improbable. Pero el hecho de que podamos utilizarlo outliney su falta de participación en el modelo de caja lo hace interesante, sobre todo como borderalternativa en algunos casos.

Tal vez algo como este tablero de tres en raya que Chris creó hace varios años podría beneficiarse outline, en lugar de recurrir a bordes de celdas diseñados individualmente. ¿Desafío aceptado, Sr. Coyier?