De outline-offseteigenschap in CSS verschuift een gedefinieerde omtrek van de rand van een element met een bepaalde hoeveelheid. Een omtrek, die verschilt van een rand, neemt geen ruimte in op de pagina (zoals een absoluut gepositioneerd element), dus de omtrek kan in elke mate worden verschoven en heeft geen invloed op de positie of lay-out van omringende elementen.
.example ( outline: solid 2px blue; outline-offset: 10px; )Contouren die met behulp van de outlineeigenschap zijn gedefinieerd , worden vaak gebruikt als focusringen, voor toegankelijkheid. Met de outline-offseteigenschap kunt u dus de positie van de focusring wijzigen.
Waarden
outline-offset accepteert één soort waarde, een lengte, die kan zijn:
0(de standaard)- Elke andere geldige lengte met een opgegeven eenheid (inclusief negatieve waarden)
Merk op dat outline-offset, zoals outline-width, geen procentuele waarden accepteert.
Positionering van de omtrek
Standaard wordt de omtrek van een element direct buiten de rand getekend (of direct buiten waar de rand zou worden getekend als er een rand was gedefinieerd). Daarom is het technisch mogelijk om omtrek en rand te combineren voor een effect met twee randen:
Van daaruit outline-offsetkan worden gebruikt om de positie van de omtrek ten opzichte van de rand te wijzigen. Probeer de onderstaande demo waarmee u de offsetwaarde van de omtrek interactief kunt wijzigen met behulp van de schuifregelaar. De waarde van de offset wordt op de pagina weergegeven terwijl u de schuifregelaar verplaatst:
outline-offsetAccepteert zoals hierboven vermeld negatieve waarden, die de omtrek in de tegenovergestelde richting verschuiven (naar het midden van het element), zoals getoond in de volgende interactieve demo. Merk op dat de omtrek begint bij -40px:
Als u de bovenstaande demo in Firefox bekijkt, zult u merken dat de omtrek er in eerste instantie correct uitziet, maar wanneer de schuifregelaar wordt aangepast, wordt de omtrek niet vloeiend weergegeven en komt deze in de verkeerde positie terecht. Door het element uit het zicht te scrollen en vervolgens weer in beeld te krijgen, wordt de browser gedwongen de omtrek opnieuw in de juiste positie te schilderen. Dit lijkt alleen een bug in Firefox te zijn.
Geen onderdeel van outlinesteno
Net als bij de borderwoning, het outlinepand is een korte weg dat drie eigenschappen vertegenwoordigt: outline-color, outline-style, en outline-width.
De outline-offseteigenschap wordt daarom niet weergegeven in deze of een andere steno-eigenschap, dus deze moet apart van de gedefinieerde omtrek zelf worden aangegeven.
Verwant
- schets
- grens
Meer informatie
- outline-offset op W3C
Browser-ondersteuning
Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.
Bureaublad
| Chrome | Firefox | D.W.Z | Rand | Safari |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Mobiel / tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 2.1 | 3.2 |
De "gedeeltelijke" indicator voor IE betekent dat IE geen ondersteuning biedt outline-offset, maar wel ondersteuning voor outlinesteno en de drie eigenschappen die het vertegenwoordigt.
Naast de bug die hierboven wordt genoemd in het gedeelte 'Positionering van de omtrek', is er een bug in Firefox waarbij de omtrek onjuist wordt getekend als het element een onderliggend element heeft dat de bovenliggende grens overschrijdt (bijv. Door negatieve marges of absolute positionering) . Daarom zal de outline-offsetwaarde relatief zijn ten opzichte van de uitgebreide grens die is gemaakt door het overlopende kind, in plaats van de oorspronkelijke grenzen van het bovenliggende element. Zie deze CodePen, deze Stack Overflow-thread en dit bugrapport om dit beter te begrijpen (dank aan lezer Matt Vanes voor het insturen van deze bug).