Outline-offset - Propriété CSS

Description de la propriété outline-offset.

La propriété outline-offset définit l'espace entre le contour et l'élément. Pour plus de précisions sur les contours, reportez-vous à la propriété outline.

Voici sur 3 exemples l'effet de outline-offset (le contour est le trait en vert) :

Reportez vous également aux autres propriétés relatives aux contour :

Valeurs pour outline-offset.

• outline-offset: 5px;

  L'espace entre le contour et l'élément est déterminé par la valeur indiquée. C'est une valeur positive ou négative, suivie d'une unité de dimension Voir les unités de dimension. Les pourcentages ne sont pas acceptés.

  Par défaut, le contour est collé à l'élément, sans espace.

  Si une valeur négative est indiquée et se trouve supérieure à une des dimensions de l'élément, par exemple sa hauteur, la valeur de l'offset sera réduite pour que le contour reste affichable.

• outline-offset: initial; (0) outline-offset: inherit; outline-offset: revert; outline-offset: revertLayer; outline-offset: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de outline-offset.

L'effet ci-dessous a té obtenu en animant les propriétés outline-offset et outline-color. La forme circulaire est un élément div carré, avec un arrondi de 50% dans chacun des angles.

Exemple interactif avec la propriété outline-offset.

Ajustez la valeur de outline-offset et observez le résultat ci-dessous. Le simulateur applique l'offset sur un élément du type block et sur un élément du type inline. Rappelons que les valeurs négatives sont acceptées, mais pas les pourcentages.

Compatibilité des navigateurs avec outline-offset.

Tous les navigateurs actuels reconnaissent et traitent correctement la propriété outline-offset.

Remarques :

(1) Supporte aussi la valeur invert pour la propriété outline-color.
Ne supporte pas la propriété outline-offset.

1

Prise en charge
des contours

2

Propriété
outline-offset

Estimation de la prise en charge globale.

96%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété outline-offset.

• Module CSS - Interface utilisateur de base - Niveau 3

  Ce module de spécification regroupe les propriétés qui interagissent avec l'espace utilisateur (UI) : cursor, caret-color, etc. Il définit également les propriétés de contour outline....

  Concernant outline-offset. Introduction de la propriété outline-offset dans le niveau 3 de la spécification.
  

  02 Août 2002

  Document de travail.

  

  07 Juillet 2015

  Candidat à la recommandation.

  

  14 Décembre 2017

  Proposé à la recommandation.

  

  21 Juin 2018

  Recommandation.

• Module CSS - Interface utilisateur de base - Niveau 4

  Ce niveau 4 de la spécification reprend les définitions déjà établies au niveau 3. Il apporte également quelques ajouts : la gestion du marqueur de texte est plus fine, plusieurs propriétés concernent le pointeur de souris, etc.

  Concernant outline-offset. Pas de changement concernant la propriété outline-offset.
  

  22 Septembre 2015

  Document de travail.

  

  

  

Voir aussi, au sujet de l'interface utilisateur.

Les spécifications éditées par le W3C sont organisées en modules. La propriété outline-offset fait partie du module CSS - Interface utilisateur de base (Module CSS - Interface utilisateur de base). Les définitions suivantes sont également décrites dans ce même module.

Propriétés :