La propiedad de esquema CSS es una propiedad confusa. Cuando lo aprendes por primera vez, es difícil entender cómo es incluso diferente a la propiedad del borde. El W3C lo explica como teniendo las siguientes diferencias:
- Los esquemas no ocupan espacio.
- Los contornos pueden ser no rectangulares.
Los esquemas no ocupan espacio
Esta afirmación, en sí misma, es confusa. ¿Cómo puede un objeto en su página web no ocupar espacio en la página web? Pero si piensa que su página web es como una cebolla, cada elemento de la página puede colocarse encima de otro. La propiedad de esquema no ocupa espacio porque siempre se coloca en la parte superior del cuadro del elemento.
Cuando se coloca un contorno alrededor de un elemento, no tiene ningún efecto sobre cómo se presenta ese elemento en la página. No cambia el tamaño o la posición del elemento. Si coloca un esquema en un elemento, ocupará la misma cantidad de espacio que si no tuviera un esquema de ese elemento. Esto no es cierto de una frontera. Un borde en un elemento se agrega al ancho exterior y la altura del elemento. Entonces, si tuviera una imagen de 50 píxeles de ancho, con un borde de 2 píxeles, ocuparía 54 píxeles (2 píxeles por cada borde lateral). Esa misma imagen con un contorno de 2 píxeles ocuparía solo 50 píxeles de ancho en su página, el contorno se mostraría sobre el borde exterior de la imagen.
Los esquemas pueden ser no rectangulares
Antes de empezar a pensar "bien, ahora puedo dibujar círculos", piensa de nuevo. Esta declaración tiene un significado diferente del que podrías pensar. Cuando coloca un borde en un elemento, el navegador interpreta el elemento como si fuera una caja rectangular gigante. Si el cuadro se divide en varias líneas, el navegador solo deja los bordes abiertos porque el cuadro no está cerrado. Es como si el navegador estuviera viendo el borde con una pantalla infinitamente ancha, lo suficientemente ancha para que ese borde sea un rectángulo continuo.
Por el contrario, la propiedad de contorno tiene en cuenta los bordes. Si un elemento delineado abarca varias líneas, el contorno se cierra al final de la línea y se vuelve a abrir en la siguiente línea. Si es posible, el contorno también estará completamente conectado, creando una forma no rectangular.
Usos de la Propiedad de Esquema
Uno de los mejores usos de la propiedad de esquema es resaltar los términos de búsqueda. Muchos sitios hacen esto con un color de fondo, pero también puede usar la propiedad de contorno y no preocuparse por agregar espacios adicionales en sus páginas.
La propiedad de color de contorno acepta el término "invertir" que hace que el color de contorno sea el inverso del fondo actual. Esto le permite resaltar elementos en páginas web dinámicas sin necesidad de saber qué colores se utilizan.
También puede usar la propiedad de contorno para eliminar la línea de puntos alrededor de los enlaces activos. Este artículo de CSS-Tricks muestra cómo eliminar el contorno de puntos.
