Il CSS La proprietà outline è una proprietà che crea confusione. Quando lo si apprende per la prima volta, è difficile capire come sia anche lontanamente diverso dalla proprietà di confine. Il W3C lo spiega come avente le seguenti differenze:
- I contorni non occupano spazio.
- I contorni possono essere non rettangolari.
I contorni non occupano spazio
Questa affermazione, di per sé, è confusa. Come può un oggetto sulla tua pagina Web non occupare spazio nella pagina Web? Ma se pensi alla tua pagina Web come a una cipolla, ogni elemento della pagina potrebbe essere sovrapposto a un altro elemento. La proprietà outline non occupa spazio perché è sempre posizionata sopra il riquadro dell'elemento.
Quando un contorno viene posizionato attorno a un elemento, non ha alcun effetto sulla disposizione dell'elemento nella pagina. Non cambia la dimensione o la posizione dell'elemento. Se metti un contorno su un elemento, occuperà la stessa quantità di spazio come se non avessi un contorno di quell'elemento. Questo non è vero per a
confine. Un bordo su un elemento viene aggiunto alla larghezza e all'altezza esterne dell'elemento. Quindi se tu avessi un Immagine che fosse largo 50 pixel, con un bordo di 2 pixel, avrebbe richiesto 54 pixel (2 pixel per ogni bordo laterale). Quella stessa immagine con un contorno di 2 pixel occuperebbe solo 50 pixel di larghezza sulla tua pagina, il contorno verrebbe visualizzato sul bordo esterno dell'immagine.I contorni possono essere non rettangolari
Prima di iniziare a pensare "bello, ora posso disegnare cerchi", ripensaci. Questa affermazione ha un significato diverso da quello che potresti pensare. Quando metti un bordo su un elemento, il browser interpreta l'elemento come se fosse una gigantesca scatola rettangolare. Se la casella viene divisa su più righe, il browser lascia solo aperti i bordi perché la casella non è chiusa. È come se il browser vedesse il bordo con uno schermo infinitamente ampio, abbastanza ampio da consentire a quel bordo di essere un rettangolo continuo.
Al contrario, la proprietà outline prende in considerazione i bordi. Se un elemento profilato si estende su più righe, il contorno si chiude alla fine della riga e si riapre sulla riga successiva. Se possibile, anche il contorno rimarrà completamente connesso, creando una forma non rettangolare.
Usi della proprietà Outline
Uno dei migliori usi della proprietà outline è evidenziare i termini di ricerca. Molti siti lo fanno con un colore di sfondo, ma puoi anche usare la proprietà outline e non preoccuparti di aggiungere spazi extra alle tue pagine.
La proprietà outline-color accetta il termine "invert" che rende il colore del contorno l'inverso dello sfondo corrente. Ciò consente di evidenziare elementi su pagine Web dinamiche senza bisogno di sapere cosa i colori sono usati.
Puoi anche utilizzare la proprietà outline per rimuovere la linea tratteggiata attorno ai link attivi. Questo articolo di Trucchi CSS mostra come rimuovi il contorno tratteggiato.