Disposisjon - CSS-triks | CSS-almanakk 2025

Den outlineegenskap i CSS tegner en linje rundt utsiden av et element. Det ligner på grensen bortsett fra at:

Det går alltid rundt alle sidene, du kan ikke spesifisere bestemte sider
Det er ikke en del av boksmodellen, så det vil ikke påvirke posisjonen til elementet eller tilstøtende elementer (fint for feilsøking!)

Andre mindre fakta inkluderer at den ikke respekterer grenseradien (fornuftig antar jeg at den ikke er en grense) og at den ikke alltid er rektangulær. Hvis omrisset går rundt et innebygd element med forskjellige skriftstørrelser, vil Opera for eksempel tegne en forskjøvet rute rundt det hele.

Det brukes ofte av tilgjengelighetsgrunner, for å understreke en lenke når den er fanet uten å påvirke posisjonering og på en annen måte enn sveve.

a:focus ( outline: 1px dashed red; )

Forkortelse

outline: ( || || ) | inherit

Det tar de samme egenskapene som grensen, men med "disposisjon-" i stedet.

Ovennevnte stenografi kunne ha blitt skrevet:

a:focus ( outline-width: 1px; outline-style: dashed; outline-color: red; )

Merknader

Du kan ikke sette en oversikt på bare en (eller to eller tre) sider av et element. Bare alle sider. Det er ikke noe slikt som outline-top, outline-right, outline-bottom, eller outline-leftsom det er med border.
Prøv å åpne konsollen på et hvilket som helst nettsted og kjøre document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- du vil se mange nettstedsstrukturer på den måten.
outlinebrukes som standard for :focusstiler. Husk at hvis du noen gang fjerner outlinestiler, a:focus ( outline: 0; )må du legge dem til igjen ved å bruke en annen slags visuelt distinkt stil.