De CSS overzichtseigenschap is een verwarrende eigenschap. Wanneer je er voor het eerst over leert, is het moeilijk te begrijpen hoe het zelfs in de verste verte verschilt van het grenseigendom. De W3C legt uit dat het de volgende verschillen heeft:
- Contouren nemen geen ruimte in beslag.
- Omtrekken mogen 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 als een laag bovenop een ander item worden geplaatst. De eigenschap outline neemt geen ruimte in beslag omdat deze altijd bovenop de box van het element wordt geplaatst.
Wanneer een omtreklijn rond een element wordt geplaatst, heeft dit geen invloed op de lay-out van dat element op de pagina. Het verandert niets aan de grootte of positie van het element. Als u een omtreklijn op een element plaatst, neemt het dezelfde hoeveelheid ruimte in beslag als wanneer u geen omtrek van dat element had. Dit geldt niet voor een
grens. Een rand op een element wordt toegevoegd aan de buitenbreedte en hoogte van het element. Dus als je een beeld dat was 50 pixels breed, met een rand van 2 pixels, het zou 54 pixels in beslag nemen (2 pixels voor elke zijrand). Diezelfde afbeelding met een omtrek van 2 pixels zou slechts 50 pixels breed op uw pagina innemen, de omtrek zou over de buitenrand van de afbeelding worden weergegeven.Contouren mogen niet-rechthoekig zijn
Denk nog eens goed na voordat je begint te denken "cool, nu kan ik cirkels tekenen". Deze uitspraak heeft een andere betekenis dan je zou denken. Wanneer u een rand om een element plaatst, interpreteert de browser het element alsof het één 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 is alsof de browser de rand ziet met een oneindig breedbeeld - breed genoeg om die rand één doorlopende rechthoek te laten zijn.
De eigenschap outline daarentegen houdt rekening met randen. Als een omlijnd element meerdere lijnen overspant, sluit de omtreklijn aan het einde van de lijn en opent opnieuw op de volgende lijn. Indien mogelijk blijft de omtrek ook volledig verbonden, waardoor een niet-rechthoekige vorm ontstaat.
Gebruik van de eigenschap Outline
Een van de beste toepassingen 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 het toevoegen van extra spatiëring op uw pagina's.
De eigenschap omtrekkleur accepteert de term "omkeren", waardoor de omtrekkleur het omgekeerde is van de huidige achtergrond. Hierdoor kunt u elementen op dynamische webpagina's markeren zonder dat u hoeft te weten wat kleuren worden gebruikt.
U kunt de eigenschap outline ook gebruiken om de stippellijn rond actieve koppelingen te verwijderen. Dit artikel van CSS-trucs laat zien hoe het moet verwijder de gestippelde omtrek.