Uso de la propiedad `outline` como borde plegable | Programar Plus

El outline propiedad en CSS dibuja una línea alrededor del exterior de un elemento. Esto es bastante similar al border propiedad, la principal excepción es que outline no es parte del modelo de caja. Se utiliza a menudo para resaltar elementos, por ejemplo, el :focus estilo.

En este artículo, pongamos un punto, apoyándonos en lo que outline es bueno en:

  1. Ellos pueden ser colapsado entre ellos (¡engaños!) porque técnicamente “no ocupan espacio”.
  2. Mostrar y ocultar contornos o cambiar outline-width, no activa diseños (lo cual es bueno para animaciones y transiciones de alto rendimiento).

Bordes de celda de tabla falsa más fáciles

A continuación se muestra un ejemplo de una lista que se presenta como una cuadrícula, por lo que se parece un poco a un diseño de tabla. Cada celda tiene un ancho mínimo y crecerá / encogerá a medida que el contenedor se vuelva más ancho / más estrecho.

Podríamos usar border para lograr esto, así:

Pero para hacer un borde uniforme alrededor de cada celda, sin duplicar ni faltar nunca, es un proceso engorroso. Arriba, utilicé un borde en todos los lados de cada “celda” y luego márgenes negativos para superponerlos y evitar que se dupliquen. Eso significaba 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 teniendo que esconder el overflow es una gran pregunta, que debe hacer porque, de lo contrario, activará las barras de desplazamiento a menos que recurra a trucos aún más gruesos, como usar pseudo elementos absolutamente posicionados.

Se muestra una tabla plana con siete columnas y cuatro filas, cada celda numerada secuencialmente, del 1 al 28. La tabla tiene un fondo blanco y texto en bloque y los bordes son negros alrededor de cada celda con un relleno amplio.

Mira el mismo resultado, visualmente, solo usando outline en lugar de:

El código aquí es mucho más limpio. No hay ningún truco real en juego. Cada “celda” solo tiene un contorno a su alrededor, y eso es todo.

Borde en animación

Cambiando border-width siempre activará el diseño, sin importar si es realmente necesario.

Se muestran los resultados de renderizado de pintura de una prueba de rendimiento en la que se muestra un cambio de diseño en medio de los resultados que tarda 58,4 milisegundos en completarse.

Además, debido al manejo especial de Chrome de subpíxeles para anchos de borde, la animación de border-width La propiedad hace temblar toda la frontera (lo que creo que es extraño). Firefox no tiene este problema.

Mostrando otra prueba de rendimiento, esta vez sin ningún diseño activado en los resultados.

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 de rendimiento.

Hay algunas trampas

Por supuesto que los hay. Como la mayoría de las otras propiedades de CSS, existen algunas “trampas” o cosas que debe saber al trabajar con outline propiedad:

  1. Los contornos redondeados solo 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 taquigráfica como, por ejemplo, border; entonces no outline-bottom, y así.

¡Pero podemos solucionar estas limitaciones! Por ejemplo, podemos usar agregar un box-shadow sin radio de desenfoque como alternativa. Pero recuerda: box-shadow tiene un costo de rendimiento más alto que el uso de outline y border.

¡Eso es!

¿Siempre estarás trabajando en algo que requiera falsificar una mesa con una lista desordenada? Improbable. Pero el hecho de que podamos usar outline y su falta de participación en el modelo de caja lo hace interesante, particularmente como un border alternativa en algunos casos.

Tal vez algo como este tablero de tic-tac-toe que Chris armó hace varios años podría beneficiarse de outline, en lugar de recurrir a bordes de celda diseñados individualmente. ¿Desafío aceptado, Sr. Coyier? 😉

(Visited 6 times, 1 visits today)