Els esquemes CSS són més que una frontera
La propietat contorn de CSS és una propietat confusa. Quan primer s'aprèn d'això, és difícil d'entendre com fins i tot és remotament diferent de la propietat de la vora. El W3C ho explica tenint les següents diferències:
- Els contorns no ocupen espai.
- Els contorns poden ser no rectangulars.
Els esquemes no ocupen espai
Aquesta afirmació, en si mateixa, és confusa. Com pot un objecte de la seva pàgina web no tenir espai a la pàgina web? Però si penses que la teva pàgina web és com una ceba, cada element de la pàgina pot estar en capes sobre un altre element. La propietat del contorn no té cap espai perquè sempre es col·loca a la part superior de la caixa de l'element.
Quan un esbós es col·loca al voltant d'un element, no té cap efecte sobre com es defineix aquest element a la pàgina. No canvia la mida o la posició de l'element. Si posa un esbós sobre un element, tindrà la mateixa quantitat d'espai que si no tingués un esbós d'aquest element. Això no és cert en una frontera. S'afegeix una vora d'un element a l'amplada i alçada exteriors de l'element. Així, si teniu una imatge de 50 píxels d'amplada, amb un límit de 2 píxels, tindrien 54 píxels (2 píxels per a cada costat). Aquesta mateixa imatge amb un esbós de 2 píxels tindrà un ample de només 50 píxels a la vostra pàgina, l'esbós es mostraria sobre la vora exterior de la imatge.
Els esquemes poden ser no rectangulars
Abans de començar a pensar "cool, ara puc dibuixar cercles". Penseu de nou. Aquesta afirmació té un significat diferent del que podria pensar. Quan col·loqueu una vora en un element, el navegador interpreta l'element com si es tractés d'una caixa gegant rectangular. Si la caixa es divideix en diverses línies, el navegador acaba d'obrir les vores perquè la caixa no està tancada. És com si el navegador estigui veient la vora amb una pantalla infinitament ampla, prou àmplia perquè la vora sigui un rectangle continu.
En canvi, la propietat de l'esquema té en compte les vores. Si un element esbossat abasta diverses línies, el contorn es tanca al final de la línia i torna a obrir-se a la línia següent. Si és possible, l'esquema estarà completament connectat, creant una forma no rectangular.
Usos de la propietat d'esquema
Un dels millors usos de la propietat del contorn és ressaltar els termes de cerca. Molts llocs ho fan amb un color de fons, però també podeu utilitzar la propietat de l'esquema i no preocupar-vos d'afegir espais addicionals a les vostres pàgines.
La propietat del color de l'esquema accepta el terme "invertit" que fa que el color del contorn sigui invers del fons actual. Això us permetrà destacar elements a pàgines web dinàmiques sense haver de saber quins colors s'utilitzen .
També podeu utilitzar la propietat del contorn per eliminar la línia de punts al voltant dels enllaços actius. Aquest article de CSS-Tricks mostra com treure el contorn de punts.