Offset - Propriété CSS

offset
offset-position
offset-path
offset-distance
offset-rotate
offset-anchor

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

Description rapide
Propriété résumée définissant tous les paramètres concernant le déplacement suivant un chemin (Motion Path).
Statut
Standard
Utilisable sur
HTML, SVG
Pourcentages
Reportez-vous aux propriétés individuelles.
Valeur initiale
Voir les propriétés individuelles.
Héritée par défaut
Non.
Type d'animation
Voir les propriétés individuelles.
Module W3C
Déplacements suivant un chemin.
Références (W3C)
Statut du document: WD (document de travail)

Description de la propriété offset.

L'objectif de la propriété offset (ou des propriétés détaillées correspondantes) est de positionner un élément sur un chemin quelconque (rectiligne, curviligne), tout en gérant l'orientation de cet élément pour qu'il reste en permanence dans l'axe du chemin.

Motion path - Le conteneur
Le conteneur
Motion path - Le chemin
Le chemin
Motion path - Le mobile
L'élément mobile
Motion path
offset-distance:0%;
Motion path
offset-distance:20%;
Motion path
offset-distance:90%;
L'élément mobile peut être positionné n'importe où sur le chemin, et son orientation est toujours tangente au chemin


offset est une propriété résumée équivalente aux propriétés ci-dessous. Toutes ces propriétés s'appliquent à l'élément que l'on souhaite pouvoir déplacer sur le chemin.

En combinant cette possibilité avec une animation, on arrive à des résultats spectaculaires avec très peu de CSS. Voici deux exemples. Dans le premier, le chemin est un cercle (défini avec la fonction circle()). Dans le deuxième exemple, le chemin est plus complexe, il a été défini avec la fonction path().

Motion path - Le chemin est une forme simple (circle)
Motion path - Le chemin est complexe (path)

Valeurs pour offset-position.

La propriété offset-position positionne le chemin par rapport à l'élément parent (le conteneur). Elle est sans effet si le chemin est fill-box, stroke-box, view-box.

  • offset-position: auto;

    La position du chemin est définie par les propriétés habituelles (text-align ou position par exemple).

  • offset-position: 10px 50px;

    Les deux valeurs doivent être suivies chacune d'une des unités de dimension. La première valeur correspond à la position du chemin suivant l'axe horizontal ; la deuxième la position suivant l'axe vertical.
    Les pourcentages sont calculés par rapport à la dimension du conteneur dans la direction correspondante.
    Si une seule valeur est indiquée, elle positionne le chemin suivant l'axe horizontal, la position verticale étant alors au centre.

    Les valeurs suivantes sont également acceptées :
    left, center, right, pour le positionnement horizontal.
    top, center, bottom, pour le positionnement vertical.

Valeurs pour offset-path.

La propriété offset-path définit le chemin. Une page complète lui est consacrée : offset-path.

  • offset-path: none; offset-path: circle(45px); offset-path: stroke-box; offset-path: ray(20deg);

    La valeur none indique que aucun chemin n'est défini. Cette valeur peut être utile pour annuler une information de chemin récupérée par la cascade des héritages.
    Sinon le chemin peut être défini par l'une des fonctions circle(), ellipse(), inset(), path(), polygon(), par le contour d'une boîte, ou par la fonction ray().

    Reportez-vous à la page spécifique à la propriété offset-path pour une description plus complète des différentes syntaxes.

Valeurs pour offset-distance.

La propriété offset-distance positionne l'élément mobile sur le chemin. La distance est comptée par rapport au point de départ du chemin.

  • offset-distance: 25px;

    La propriété offset-distance attend seulement une dimension (voir les unités de dimension) ou un pourcentage. Le pourcentage est évalué par rapport à la longueur du chemin.

    Le point rouge marque le départ du chemin, le point bleu est le point d'ancrage (ici le centre de l'élément mobile, voir offset-anchor).

    Motion path - offset-distance:50px Motion path - Point de départ
    Motion path - Point d'ancrage
    offset-distance:50px;
    Motion path - offset-distance:50% Motion path - Point de départ
    Motion path - Point d'ancrage
    offset-distance:50%;

Valeurs pour offset-rotate.

La propriété offset-rotate définit l'orientation de l'élément mobile de façon absolue, ou par rapport à l'axe du chemin.

  • offset-rotate: auto;

    L'orientation du mobile sera déterminée par rapport à la tangente du chemin à l'endroit où se trouve le mobile. Cette valeur permet une orientation automatique du mobile pour qu'il soit toujours dans l'axe du chemin.

    Le mobile est ici une image, celle qui est représentée au centre, avec son orientation originale.

    Motion path - Image originale
    Motion path - Rotation auto
    offset-rotate:auto;
  • offset-rotate: reverse;

    Comme pour la valeur auto le mobile est orientée suivant l'axe du chemin, mais une rotation de 180° est également appliquée.

    Motion path - Image originale
    Motion path - Rotation reverse
    offset-rotate:reverse;
  • offset-rotate: 45deg;

    La valeur indiquée, positive ou négative, doit être suivie d'une des unités d'angle. L'élément mobile sera tourné de la valeur indiquée, et cette orientation sera constante : on perd donc l'orientation automatique en fonction du chemin.

    Motion path - Image originale
    Motion path - Rotation de 45 degrés
    offset-rotate:45deg;
  • offset-rotate: auto -45deg;

    En cumulant une valeur prédéfinie (auto ou reverse) et une valeur angulaire, il est possible de conserver l'orientation automatique tout en orientant le mobile dans le sens du déplacement lorsque ce n'est pas le cas dans la forme originale.

    Motion path - Image originale
    Motion path - Rotation auto et de -45 degrés
    offset-rotate:auto -45deg;

Valeurs pour offset-anchor.

La propriété offset-anchor spécifie le point d'ancrage de l'élément mobile, c'est à dire le point qui est précisément calé sur le chemin.

  • offset-anchor: auto;

    Équivalent aux valeurs center center : le point d'ancrage est au milieu de l'élément mobile.

    Remarque : la valeur auto est égale à celle de offset-position si aucun chemin n'est défini (offset-path:none)

  • offset-anchor: 5px 5px;

    La propriété offset-anchor définit le point d'ancrage sur le mobile, c'est à dire le point qui est précisément calé sur le chemin, et qui est également le centre de rotation pour offset-rotate.

    La première valeur indique la position horizontale du point d'ancrage. Cela peut être :

    • Une valeur numérique, positive ou négative, suivie d'une des unités de dimension.
    • Un pourcentage, calculé par rapport à la largeur de l'élément mobile.
    • Une des valeurs prédéfinies : left, center ou right.

    La deuxième valeur positionne le point d'ancrage verticalement. Cela peut être :

    • Une valeur numérique, positive ou négative, suivie d'une des unités de dimension.
    • Un pourcentage, calculé par rapport à la hauteur de l'élément mobile.
    • Une des valeurs prédéfinies : top, center ou bottom.

    Le point d'ancrage peut se situer en dehors de l'élément mobile si offset-anchor a une valeur négative ou supérieure à la dimension de l'élément mobile. Si une seule valeur est indiquée, la position verticale du point d'ancrage est fixée par défaut à center.

    Motion path - offset-anchor:left top Motion path - Point d'ancrage
    left top
    Motion path - offset-anchor:right bottom Motion path - Point d'ancrage
    right bottom
    Motion path - offset-anchor:10px Motion path - Point d'ancrage
    10px
    Motion path - offset-anchor:-20px -10px Motion path - Point d'ancrage
    -20px -10px

    Les deux exemples ci-dessous illustrent l'impact de la position du point d'ancrage sur les rotations de l'élément mobile.

    Motion path - Marqueur
    offset-anchor:left center;
    Motion path - Marqueur
    offset-anchor:right center;

Valeurs pour la propriété résumée offset.

La syntaxe de la propriété résumée offset accumule toutes les valeurs des propriétés détaillées.

  • offset: auto;

    Aucun chemin n'est défini, l'élément est à sa position habituelle.

  • offset: auto circle(40%) 20px 90deg / left center;

    La syntaxe ci-dessus est équivalente aux règles suivantes. Comme avec toutes les propriétés résumées, les propriétés non définies sont fixées à leur valeur initiale.
    offset-position:auto; offset-path:circle(40%); offset-distance:20px; offset-rotate:45deg; offset-anchor:left center;

Valeurs communes :

offset: initial offset: inherit offset: revert offset: revertLayer offset: unset
offset-position: initial (auto) offset-position: inherit offset-position: revert offset-position: revertLayer offset-position: unset
offset-path: initial (none) offset-path: inherit offset-path: revert offset-path: revertLayer offset-path: unset
offset-distance: initial (0) offset-distance: inherit offset-distance: revert offset-distance: revertLayer offset-distance: unset
offset-rotate: initial (auto) offset-rotate: inherit offset-rotate: revert offset-rotate: revertLayer offset-rotate: unset
offset-anchor: initial (auto) offset-anchor: inherit offset-anchor: revert offset-anchor: revertLayer offset-anchor: unset

Ces valeurs sont décrites plus en détail sur leur page respective : initial, inherit, revert, revert-layer, unset.

Animation de la propriété offset.

Toutes les propriétés relatives au déplacement sur un chemin (Motion path) peuvent être animées. Le plus courant est cependant d'animer la propriété offset-distance, ce qui permet à l'élément mobile de déplacer en suivant le chemin défini.

Prise en charge par les navigateurs.

1
Déplacement
suivant un chemin
2
Propriété
offset
3
Propriété
offset-position
4
Propriété
offset-distance
5
Propriété
offset-rotate
6
Propriété
offset-anchor
Estimation de la prise en charge globale.
94%
92%
88%
92%
92%
89%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Samsung Internet

Firefox pour Androïd

Chrome

Edge

Firefox

Chrome pour Androïd

Androïd Brower

Safari sur IOS

Safari

KaiOS Browser

Opéra mini

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

Historique de la propriété offset.

Voir aussi, au sujet des Motion Path.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété offset fait partie du module Motion Path.. Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

offset-anchor
Définit le point d'ancrage des élément mobile, dans le contexte du déplacement sur un chemin (Motion Path).
offset-distance
Définit l'emplacement d'un élément mobile sur le trajet du chemin (Motion Path).
offset-path
Définit le chemin sur lequel pourra se posiitionner un élément (Motion path).
offset-position
Définit la position d'un chemin de déplacement, dans le contexte d'un déplacement suivant un chemin (Motion Path).
offset-rotate
Définit l'orientation d'un élément par rapport à l'axe du chemin (Motion Path).