A propriedade de estrutura de tópicos do CSS é uma propriedade confusa. Quando você aprende sobre isso, é difícil entender como é mesmo remotamente diferente da propriedade border. O W3C explica como tendo as seguintes diferenças:
- Contornos não ocupam espaço.
- Contornos podem ser não-retangulares.
Contornos não ocupam espaço
Esta declaração, por si só, é confusa. Como um objeto na sua página da Web não ocupa espaço na página da Web? Mas se você pensar na sua página da Web como sendo uma cebola, cada item da página pode ser colocado sobre outro item. A propriedade de contorno não ocupa espaço porque é sempre colocada no topo da caixa do elemento.
Quando um contorno é colocado em torno de um elemento, ele não tem nenhum efeito sobre como esse elemento é exibido na página. Não altera o tamanho ou a posição do elemento. Se você colocar um esboço em um elemento, ele ocupará a mesma quantidade de espaço como se você não tivesse um esboço desse elemento. Isso não é verdade de uma borda. Uma borda em um elemento é adicionada à largura e altura externas do elemento. Portanto, se você tivesse uma imagem com 50 pixels de largura, com uma borda de 2 pixels, ela consumiria 54 pixels (2 pixels para cada borda lateral). Essa mesma imagem com contorno de 2 pixels ocuparia apenas 50 pixels de largura em sua página, o contorno seria exibido sobre a borda externa da imagem.
Os contornos podem ser não retangulares
Antes de começar a pensar "legal, agora posso desenhar círculos", pense novamente. Esta declaração tem um significado diferente do que você imagina. Quando você coloca uma borda em um elemento, o navegador interpreta o elemento como se fosse uma caixa retangular gigante. Se a caixa for dividida em várias linhas, o navegador deixará as bordas abertas porque a caixa não está fechada. É como se o navegador estivesse vendo a borda com uma tela infinitamente ampla - larga o suficiente para que essa borda fosse um retângulo contínuo.
Em contraste, a propriedade de contorno leva as bordas em consideração. Se um elemento esboçado abrange várias linhas, o contorno fecha no final da linha e reabre novamente na próxima linha. Se possível, o contorno ficará totalmente conectado também, criando uma forma não retangular.
Usos da propriedade de estrutura de tópicos
Um dos melhores usos da propriedade de estrutura de tópicos é destacar os termos de pesquisa. Muitos sites fazem isso com uma cor de plano de fundo, mas você também pode usar a propriedade de contorno e não se preocupar em adicionar qualquer espaçamento extra às suas páginas.
A propriedade outline-color aceita o termo "invertido", o que torna a cor do contorno o inverso do plano de fundo atual. Isso permite destacar elementos em páginas da Web dinâmicas sem precisar saber quais cores são usadas.
Você também pode usar a propriedade de contorno para remover a linha pontilhada em torno dos links ativos. Este artigo do CSS-Tricks mostra como remover o contorno pontilhado.
