outline-offset
Éloigne le contour du bord de l’élément, ou le ramène vers l’intérieur, sans modifier la mise en page.
- Valeur initiale
0- Héritée
- Non
- Animable
- oui, en tant que longueur
- S’applique à
- tous les éléments
- JavaScript
element.style.outlineOffset = "4px"
Exemple
#.swatch {
width: 32px;
height: 32px;
border: 0;
border-radius: 50%;
}
.swatch.selected,
.swatch:focus-visible {
outline: 2px solid #e5e5e5;
outline-offset: 3px;
}<p style="margin: 0 0 12px">Couleur de l’avatar</p>
<div style="display: flex; gap: 14px;">
<button class="swatch" type="button" aria-label="Violet" style="background: #7c3aed"></button>
<button class="swatch selected" type="button" aria-label="Bleu" style="background: #0ea5e9"></button>
<button class="swatch" type="button" aria-label="Vert" style="background: #10b981"></button>
<button class="swatch" type="button" aria-label="Ambre" style="background: #f59e0b"></button>
<button class="swatch" type="button" aria-label="Rose" style="background: #f43f5e"></button>
</div>La couleur sélectionnée a un anneau décalé de 3px, et l’espace laisse voir le fond de la page. Le bouton qui a le focus clavier reçoit le même style : cliquez dans l’aperçu et appuyez sur Tab.
Définition et utilisation
#La propriété outline-offset définit la distance entre le contour (outline) et le bord extérieur de la bordure de l’élément. Une valeur positive éloigne le contour vers l’extérieur, une valeur négative le ramène vers l’intérieur, où il se dessine alors par-dessus le fond et le contenu de l’élément.
L’espace entre l’élément et le contour est transparent, si bien que le fond du parent apparaît à travers. C’est ainsi que naît cet effet d’anneau avec un espace, que vous connaissez des sélecteurs de couleur dans les applications et des indicateurs de focus bien visibles.
Le décalage, tout comme le contour lui-même, n’affecte pas la mise en page : l’élément ne grandit pas et ses voisins ne se déplacent pas. Vous ne le verrez toutefois que si le contour a un style autre que none, par exemple après avoir réglé outline: 2px solid.
Le raccourci outline n’inclut pas le décalage. Vous le définissez dans une déclaration séparée, et une modification ultérieure du seul outline ne l’efface pas.
Syntaxe
#outline-offset: <longueur>;Valeurs
#- Le contour colle au bord de l’élément. C’est la valeur par défaut.
<longueur>
Il reste un espace de 4px entre l’élément et le contour, à travers lequel on voit le fond du parent.<longueur>
Le contour entoure l’élément à une plus grande distance, et pourtant il n’occupe toujours aucune place dans la mise en page.valeur négative
Le contour rentre vers l’intérieur et se dessine par-dessus le fond de l’élément. Utile quand un parent avecoverflow: hiddenle découperait sinon à l’extérieur.
Valeurs en pratique
#0
.demo { outline-offset: 0; }4px
.demo { outline-offset: 4px; }12px
.demo { outline-offset: 12px; }-6px
overflow: hidden le découperait sinon à l’extérieur..demo { outline-offset: -6px; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Un écart de 2 à 3px empêche l’anneau de focus de se fondre dans la couleur du bouton, car une bande du fond du parent les sépare.
- Si un parent avec
overflow: hidden, comme un carrousel, découpe le contour, indiquez un décalage négatif. Le contour se dessinera alors à l’intérieur de l’élément. - Le raccourci
outlinene définit pas le décalage. Écrivezoutline-offsetséparément, de préférence dans la même règle que le contour.
Entrées associées
#- outlineDessine un contour autour d’un élément, sans qu’il occupe de place dans la mise en page.
- :focus-visibleCorrespond à un élément ayant le focus seulement quand le navigateur juge que l’indicateur doit être visible, par exemple lors d’une navigation au clavier.
- borderRaccourci qui définit l’épaisseur, le style et la couleur d’une bordure.
- overflowDécide quoi faire du contenu qui ne tient pas dans un élément.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.