La outline-offsetpropriété en CSS décale un contour défini à partir du bord de la bordure d'un élément d'un montant spécifié. Un contour, qui est différent d'une bordure, ne prend pas d'espace sur la page (comme un élément positionné de manière absolue), de sorte que le contour peut être décalé dans n'importe quelle quantité et cela n'affectera pas la position ou la disposition des éléments environnants.
.example ( outline: solid 2px blue; outline-offset: 10px; )Les contours définis à l'aide de la outlinepropriété sont souvent utilisés comme anneaux de mise au point, pour l'accessibilité. Ainsi, la outline-offsetpropriété vous permet de changer la position de la bague de mise au point.
Valeurs
outline-offset accepte un type de valeur, une longueur, qui peut être:
0(le défaut)- Toute autre longueur valide avec une unité spécifiée (y compris les valeurs négatives)
Notez que outline-offset, comme outline-width, n'accepte pas les valeurs en pourcentage.
Positionnement du contour
Par défaut, le contour d'un élément est dessiné immédiatement à l'extérieur de la bordure (ou immédiatement à l'extérieur de l'endroit où la bordure serait dessinée si une bordure était définie). Par conséquent, il est techniquement possible de combiner contour et bordure pour un effet à deux bordures:
À partir de là, outline-offsetpeut être utilisé pour modifier la position du contour par rapport au bord de la bordure. Essayez la démo ci-dessous qui vous permet de modifier de manière interactive la valeur de décalage du contour à l'aide du curseur. La valeur du décalage s'affiche sur la page lorsque vous déplacez le curseur:
Comme mentionné ci-dessus, outline-offsetaccepte les valeurs négatives, qui décaleront le contour dans la direction opposée (vers le centre de l'élément), comme indiqué dans la prochaine démo interactive. Notez que le contour commence à -40px:
Si vous regardez la démo ci-dessus dans Firefox, vous remarquerez que le contour semble correct au début, mais lorsque le curseur est ajusté, le contour ne s'affiche pas correctement et se retrouve dans la mauvaise position. Faire défiler l'élément hors de la vue, puis le remettre en vue, force le navigateur à repeindre le contour dans la bonne position. Cela semble être un bogue de Firefox uniquement.
Ne fait pas partie de la outlinesténographie
Semblable à la borderpropriété, la outlinepropriété est un raccourci qui représente trois propriétés: outline-color, outline-styleet outline-width.
Par outline-offsetconséquent, la propriété n'est pas représentée dans cette propriété ou dans toute autre propriété abrégée, elle doit donc être déclarée séparément du contour défini lui-même.
En rapport
- contour
- frontière
Plus d'information
- contour-offset sur W3C
Prise en charge du navigateur
Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.
Bureau
| Chrome | Firefox | C'EST À DIRE | Bord | Safari |
|---|---|---|---|---|
| 4 | 2 | 11 | 15 | 3.1 |
Mobile / tablette
| Chrome Android | Android Firefox | Android | Safari sur iOS |
|---|---|---|---|
| 88 | 85 | 2,1 | 3.2 |
L'indicateur «partiel» pour IE signifie que IE ne prend pas en charge outline-offset, mais prend en charge la outlinesténographie et les trois propriétés qu'il représente.
En plus du bogue mentionné ci-dessus dans la section «Positionnement du contour», il y a un bogue dans Firefox où le contour est mal dessiné si l'élément a un élément enfant qui dépasse la limite parent (par exemple en utilisant des marges négatives ou un positionnement absolu) . Par conséquent, la outline-offsetvaleur sera relative à la limite étendue créée par l'enfant débordant, plutôt qu'aux limites de l'élément parent d'origine. Pour mieux comprendre cela, consultez ce CodePen, ce fil de discussion Stack Overflow et ce rapport de bogue (merci au lecteur Matt Vanes d'avoir envoyé ce bogue).