Os contornos de CSS son máis que un límite
A propiedade de esquema de CSS é unha propiedade confusa. Cando o coñeces por primeira vez, é difícil comprender como é remotamente diferente da propiedade da fronteira. O W3C explica que ten as seguintes diferenzas:
- Os contornos non ocupan espazo.
- Os contornos poden non ser rectangulares.
Os contornos non ocupan espazo
Esta afirmación, por si só, é confusa. Como pode un obxecto na súa páxina web non ocupar espazo na páxina web? Pero se pensas que a túa páxina web é como unha cebola, cada elemento da páxina pode estar en capas encima doutro elemento. A propiedade do esquema non ten espazo porque sempre está colocado na parte superior da caixa do elemento.
Cando se coloca un contorno en torno a un elemento, non ten ningún efecto sobre como se establece ese elemento na páxina. Non modifica o tamaño ou a posición do elemento. Se pór un contorno sobre un elemento, ocupará a mesma cantidade de espazo coma se non tivese un esbozo dese elemento. Isto non é verdadeiro dun borde. Engádese un borde sobre un elemento ao ancho e ao alto do elemento. Entón, se tiña unha imaxe de 50 píxeles de ancho, cun bordo de 2 píxeles, levaría 54 píxeles (2 píxeles por cada lado). Esa mesma imaxe cun contorno de 2 píxeles tería un ancho de só 50 píxeles na súa páxina, o contorno veríase sobre o bordo exterior da imaxe.
Os contornos poden ser non rectangulares
Antes de comezar a pensar "cool, agora podo debuxar círculos". Pensa outra vez. Esta afirmación ten un significado diferente do que poida pensar. Cando coloque un bordo nun elemento, o navegador interpreta o elemento coma se tratásese dunha caixa xigante rectangular. Se a caixa se divide en varias liñas, o navegador só deixa os bordos abertos porque a caixa non está pechada. É coma se o navegador estea vendo o bordo cunha pantalla infinitamente ancha o suficiente para que ese bordo sexa un rectángulo continuo.
En contraste, a propiedade do esquema ten en conta os bordos. Se un elemento destacado abrangue varias liñas, o contorno pecharase ao final da liña e volverá a abrirse na seguinte liña. Se é posible, o contorno estará completamente conectado, creando unha forma non rectangular.
Usos da propiedade do esquema
Un dos mellores usos da propiedade de esquema é destacar os termos de busca. Moitos sitios fan isto con cor de fondo, pero tamén pode usar a propiedade do esquema e non preocuparse por engadir un espazo extra nas súas páxinas.
A propiedade da cor contén o termo "invertido" que fai que a cor do contorno sexa a inversa do fondo actual. Isto permítelle resaltar elementos en páxinas web dinámicas sen necesidade de saber que cores se usan .
Tamén pode usar a propiedade de esquema para eliminar a liña de puntos en torno ás ligazóns activas. Este artigo de CSS-Tricks mostra como eliminar o contorno punteado.