La proprietà outline CSS è una proprietà di confusione. Quando lo impari per la prima volta, è difficile capire come sia anche lontanamente diverso dalla proprietà del 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é, è fonte di confusione. Come può un oggetto sulla tua pagina Web occupare spazio sulla pagina Web? Ma se pensi che la tua pagina Web sia come una cipolla, ogni elemento della pagina può essere sovrapposto a un altro elemento. La proprietà outline non occupa spazio perché è sempre posizionata sopra la casella dell'elemento.
Quando un contorno è posizionato attorno a un elemento, non ha alcun effetto su come tale elemento è disposto sulla pagina. Non cambia la dimensione o la posizione dell'elemento. Se metti un contorno su un elemento, occuperà la stessa quantità di spazio che avresti se non avessi un contorno di quell'elemento. Questo non è vero per un confine. Un bordo su un elemento viene aggiunto alla larghezza e all'altezza esterna dell'elemento. Quindi, se avessi un'immagine larga 50 pixel, con un bordo di 2 pixel, occuperebbe 54 pixel (2 pixel per ciascun bordo laterale). Quella stessa immagine con un contorno di 2 pixel occuperebbe solo 50 pixel di larghezza sulla pagina, il contorno verrebbe visualizzato sul bordo esterno dell'immagine.
I contorni possono essere non rettangolari
Prima di iniziare a pensare "cool, 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 scatola rettangolare gigante. Se la finestra viene divisa su più righe, il browser lascia i bordi aperti perché la casella non è chiusa. È come se il browser vedesse il confine con uno schermo infinitamente ampio, abbastanza largo da essere un rettangolo continuo.
Al contrario, la proprietà struttura prende in considerazione gli spigoli. Se un elemento delineato si estende su più righe, il contorno si chiude alla fine della riga e si riapre nuovamente sulla riga successiva. Se possibile, anche il contorno rimarrà completamente connesso, creando una forma non rettangolare.
Usi della proprietà di contorno
Uno dei migliori usi della proprietà outline è evidenziare i termini di ricerca. Molti siti lo fanno con un colore di sfondo, ma puoi anche utilizzare la proprietà struttura e non preoccuparti di aggiungere spazi aggiuntivi alle tue pagine.
La proprietà outline-color accetta il termine "invert" che rende il contorno del colore l'inverso dello sfondo corrente. Ciò consente di evidenziare elementi su pagine Web dinamiche senza dover sapere quali colori vengono utilizzati.
È inoltre possibile utilizzare la proprietà struttura per rimuovere la linea tratteggiata attorno ai collegamenti attivi. Questo articolo di CSS-Tricks mostra come rimuovere il contorno tratteggiato.
