De CSS-outline-eigenschap is een verwarrende eigenschap. Wanneer u er voor het eerst over leert, is het moeilijk te begrijpen hoe het zelfs op afstand verschilt van het grensobject. De W3C legt uit dat het de volgende verschillen heeft:
- Contouren nemen geen ruimte in beslag.
- Contouren kunnen niet-rechthoekig zijn.
Contouren nemen geen ruimte in beslag
Deze verklaring is op zichzelf al verwarrend. Hoe kan een object op uw webpagina geen ruimte innemen op de webpagina? Maar als u uw webpagina ziet als een ui, kan elk item op de pagina op een ander item worden gelaagd. De eigenschap outline neemt geen ruimte in omdat deze altijd bovenop de doos van het element wordt geplaatst.
Wanneer een omtrek rond een element wordt geplaatst, heeft dit geen effect op hoe dat element op de pagina is neergelegd. Het verandert de grootte of positie van het element niet. Als u een omtrek op een element plaatst, neemt deze evenveel ruimte in beslag als wanneer u geen omtrek van dat element had. Dit is niet waar voor een grens. Een rand op een element wordt toegevoegd aan de buitenbreedte en hoogte van het element. Dus als je een afbeelding had van 50 pixels breed, met een rand van 2 pixels, zou dit 54 pixels duren (2 pixels voor elke rand aan de zijkant). Diezelfde afbeelding met een omtrek van 2 pixels zou slechts 50 pixels breedte op uw pagina in beslag nemen, de omtrek zou over de buitenrand van de afbeelding worden weergegeven.
Contouren mogen niet-rechthoekig zijn
Voordat je begint te denken "cool, nu kan ik cirkels tekenen", denk opnieuw. Deze verklaring heeft een andere betekenis dan je zou denken. Wanneer u een rand op een element legt, interpreteert de browser het element alsof het een gigantische rechthoekige doos is. Als het vak over meerdere regels wordt verdeeld, laat de browser de randen gewoon open omdat het vak niet is gesloten. Het lijkt alsof de browser de rand ziet met een oneindig breed scherm - breed genoeg om die rand een doorlopende rechthoek te maken.
De eigenschap outline daarentegen neemt de randen in overweging. Als een omlijnd element meerdere lijnen beslaat, wordt de omtrek aan het einde van de regel gesloten en wordt de lijn opnieuw geopend op de volgende regel. Indien mogelijk blijft de contour ook volledig verbonden, waardoor een niet-rechthoekige vorm ontstaat.
Gebruik van de overzichtseigenschap
Een van de beste gebruiken van de eigenschap outline is om zoektermen te markeren. Veel sites doen dit met een achtergrondkleur, maar u kunt ook de eigenschap outline gebruiken en u hoeft zich geen zorgen te maken over extra spaties op uw pagina's.
De eigenschap outline-colour accepteert de term "omkeren", waardoor de omtrekkleur het omgekeerde is van de huidige achtergrond. Hiermee kunt u elementen op dynamische webpagina's markeren zonder dat u weet welke kleuren worden gebruikt.
U kunt ook de eigenschap outline gebruiken om de stippellijn rond actieve koppelingen te verwijderen. Dit artikel van CSS-Tricks laat zien hoe je de gestippelde omtrek verwijdert.
