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:
- Ellos pueden ser colapsado entre ellos (¡engaños!) porque técnicamente “no ocupan espacio”.
- 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.
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.
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.
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:
- 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.
- Un contorno siempre recorre todos los lados. Es decir, no es una propiedad taquigráfica como, por ejemplo,
border
; entonces nooutline-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? 😉