Ejendomsbeskrivelsen CSS er en forvirrende ejendom. Når du først lærer om det, er det svært at forstå, hvordan det endda er anderledes end grænsen ejendommen. W3C forklarer det som at have følgende forskelle:
- Outlines tager ikke plads.
- Konturer kan være ikke-rektangulære.
Outlines tager ikke plads
Denne erklæring er i sig selv forvirrende. Hvordan kan et objekt på din webside ikke optage plads på websiden? Men hvis du tænker på din webside som en løg, kan hver vare på siden være lagdelt oven på et andet emne. Konturegenskaben tager ikke plads, fordi den altid er placeret oven på elementets boks.
Når en disposition er placeret omkring et element, har det ingen effekt på, hvordan elementet er lagt ud på siden. Det ændrer ikke elementets størrelse eller position. Hvis du sætter et omrids på et element, vil det tage op på samme plads som om du ikke havde en oversigt over det element. Dette gælder ikke for en grænse. En kant på et element tilføjes til elementets udvendige bredde og højde. Så hvis du havde et billede, der var 50 pixels bredt, med en 2 pixel grænse, ville det tage op 54 pixels (2 pixel for hver sidekant). Det samme billede med en 2-pixel omrids ville kun tage op på 50 pixel bredde på din side, omridset ville vise over ydersiden af billedet.
Skitserne kan være ikke-rektangulære
Før du begynder at tænke "cool, nu kan jeg tegne cirkler", tænk igen. Denne erklæring har en anden betydning end du måske tror. Når du sætter en grænse på et element, tolker browseren elementet som om det var en kæmpe rektangulær boks. Hvis kassen bliver delt over flere linjer, forlader browseren kun kanterne, fordi kassen ikke er lukket. Det er som om browseren ser grænsen med en uendeligt bred skærm - bred nok til at grænsen er et sammenhængende rektangel.
Kontrastegenskaben tager derimod hensyn til kanter. Hvis et skitseret element spænder over flere linjer, lukker omridsen i slutningen af linjen og genåbnes igen på den næste linje. Om muligt forbliver omridsen også fuldt forbundet, hvilket skaber en ikke-rektangulær form.
Anvendelse af udlejningsejendommen
En af de bedste anvendelser af konturegenskaben er at fremhæve søgeord. Mange steder gør dette med en baggrundsfarve, men du kan også bruge konturegenskaben og ikke bekymre dig om at tilføje ekstra mellemrum på dine sider.
Egenskaben for konturfarve accepterer udtrykket "invert", hvilket gør konturfarven den omvendte af den aktuelle baggrund. Dette gør det muligt at fremhæve elementer på dynamiske websider uden at vide, hvilke farver der bruges.
Du kan også bruge konturegenskaben til at fjerne den stiplede linje omkring aktive links. Denne artikel fra CSS-Tricks viser, hvordan du fjerner den stiplede kontur.
