Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

outline-offset - Propriété CSS

outline-offset

Résumé des caractéristiques de la propriété outline-offset

Description rapide
Définit l'espacement entre le contour et l'élément.
Statut
Standard
Pourcentages
Ne s'appliquent pas.
Valeur initiale
0
Héritée par défaut
Non
Type d'animation
Computed value : lors d'une animation, la propriété outline-offset passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Interface utilisateur de base
Références (W3C)
 🡇  
 🡅  
Statut du document:: WD (document de travail)

Statut du document:: REC (recommandation)

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) :


Pas d'offset : le contour est juste sur le bord de l'élément

Un offset positif : le contour est éloigné de l'élément

Un offset négatif : le contour se retrouve à l'intérieur de l'élément

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 CSS 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; outline-offset: inherit; outline-offset: revert; outline-offset: revert-layer; outline-offset: unset;

    La valeur initiale est : 0.

Animation de la propriété 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.

Simulateur.

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.

outline-offset :
La propriété outline-offset appliquée àun élément du type block.
La propriété outline-offset appliquée à un élément inline (span)
fragmenté sur plusieurs lignes

Prise en charge de outline-offset par les navigateurs.

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

Colonne 1
Prise en charge de la fonctionnalité permettant de tracer le contour des éléments.
Colonne 2
Prise en charge de la propriété CSS outline-offset.
1
Outlines
2
outline-offset
Estimation de la prise en charge en pourcentage du parc actuel.
97%
95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que outline-offset.

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

Propriétés.

Définit la couleur des élément actifs, cochés.
Définit toutes les propriétés nécessaires pour qu'un élément soit affiché comme un bouton, un menu, etc.
Définit la couleur et la forme du marqueur de texte.
Choisit la couleur du marqueur de texte (curseur clignotant).
Définit la forme du curseur de texte.
Définit la forme du curseur de la souris.
Définit l'accessibilité d'une zone de saisie.
Résumé des caractéristiques d'encadrement.
Définit la couleur de l'encadrement (outline).
Définit le type de trait des contours (simple, double, pointillé...).
Définit l'épaisseur du trait d'encadrement.
Autorise ou empêche le dimensionnement de l'élément. par l'utilisateur.
Définit si le contenu d'un élément est sélectionnable par l'utilisateur ou non.