CSS-omrisset er en forvirrende eiendom. Når du først lærer om det, er det vanskelig å forstå hvordan det er selv eksternt forskjellig fra grenseegenskapen. W3C forklarer at den har følgende forskjeller:
- Utsikter tar ikke opp plass.
- Utsikter kan være ikke-rektangulære.
Outlines tar ikke opp plass
Denne uttalelsen er i seg selv forvirrende. Hvordan kan et objekt på websiden din ikke ta opp plass på nettsiden? Men hvis du tenker på nettsiden din som en løk, kan hvert element på siden lagres på toppen av et annet element. Innretningsegenskapen tar ikke opp plass fordi den alltid er plassert på toppen av elementets boks.
Når en disposisjon er plassert rundt et element, har det ingen effekt på hvordan elementet legges ut på siden. Det endrer ikke elementets størrelse eller posisjon. Hvis du legger et omriss på et element, vil det ta opp samme mengde plass som om du ikke hadde en oversikt over det elementet. Dette gjelder ikke for en grense. En kant på et element legges til utvendig bredde og høyde på elementet. Så hvis du hadde et bilde som var 50 piksler bredt, med en 2-pixel grense, ville det ta opp 54 piksler (2 piksler for hver sidekant). Det samme bildet med en 2-pixel disposisjon ville ta opp bare 50 piksler bredde på siden din, oversikten ville vises over utsiden av bildet.
Utsikter kan være ikke-rektangulære
Før du begynner å tenke "kult, nå kan jeg tegne sirkler," tenk igjen. Denne uttalelsen har en annen mening enn du kanskje tror. Når du legger en grense på et element, tolker nettleseren elementet som om det var en reell rektangulær boks. Hvis boksen blir delt over flere linjer, lar nettleseren bare kantene åpne fordi boksen ikke er lukket. Det er som om nettleseren ser grensen med en uendelig bred skjerm - bred nok til at grensen er et kontinuerlig rektangel.
Kontrastegenskapen tar derimot hensyn til kantene. Hvis et skissert element spenner over flere linjer, lukkes omrisset på slutten av linjen og åpnes igjen på neste linje. Om mulig vil omrisset også være helt tilkoblet og skape en ikke-rektangulær form.
Bruksområder til kontoret
En av de beste bruksområdene til konturegenskapen er å markere søkeord. Mange nettsteder gjør dette med en bakgrunnsfarge, men du kan også bruke konturegenskapen og ikke bekymre deg for å legge til ekstra avstand på sidene dine.
Egenskapen konturfarger aksepterer termen "invert" som gjør konturfargen den inverse av gjeldende bakgrunn. Dette lar deg markere elementer på dynamiske websider uten å måtte vite hvilke farger som brukes.
Du kan også bruke konturegenskapen til å fjerne den stiplede linjen rundt aktive koblinger. Denne artikkelen fra CSS-Tricks viser hvordan du fjerner det stiplede omrisset.
