Offset-anchor - Propriété CSS

Schéma de la syntaxe de offset-anchor.

Description des termes utilisés sur le schéma :

• length est une valeur numérique suivie d'une des unités de dimension.
• %1 est un pourcentage calculé sur la largeur de l'élément.
• %2 est un également pourcentage calculé sur la hauteur de l'élément.

Description de la propriété offset-anchor.

Les déplacement suivant un chemin (Motion path) est une fonctionnalité nouvelle, implémentée récemment dans CSS. Elle nécessite les éléments ci-dessous (le chemin peut être le contour du container, ce qui simplifie les choses en évitant de le définir).
L'élément mobile se positionne sur le chemin, à l'emplacement défini par offset-distance. Son orientation est adaptée par rapport au chemin.

L'objectif de la propriété offset-anchor est de définir le point d'ancrage, c'est à dire le point qui est précisément positionné sur le chemin.

Propriétés en rapport.

Reportez-vous aux pages suivantes qui ont toutes un rapport avec les déplacements suivant un chemin.

Valeurs pour offset-anchor.

• offset-anchor: auto;

  Équivalent aux valeurs center center : le point d'ancrage, représenté sur le dessin par un point bleu, est au milieu de l'élément mobile.

  
  offset-anchor:auto;
• offset-anchor: 5px 5px;

  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 (et que ce n'est pas top ou bottom), la position verticale du point d'ancrage est fixée par défaut à center.

  

  offset-anchor:left top;

  

  offset-anchor:right bottom;

  

  offset-anchor:10px;

  

  offset-anchor:-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. On a ajouté une animation sur offset-distance.

  

  offset-anchor:left center;

  

  offset-anchor:right center;
• offset-anchor: initial; (auto) offset-anchor: inherit; offset-anchor: revert; offset-anchor: revertLayer; offset-anchor: unset;

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

Exemple d'animation de offset-anchor.

La propriété offset-anchor s'anime de façon progressive. Toutes les propriétés relatives au déplacement sur un chemin (Motion path) peuvent être animées. cependant, le plus courant est d'animer la propriété offset-distance, ce qui permet à l'élément mobile de parcourir le chemin défini.

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

Compatibilité des navigateurs avec offset-anchor.

1

Déplacement
suivant un chemin

2

Propriété
offset-anchor

Estimation de la prise en charge globale.

95%

90%

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

Histoire de la propriété offset-anchor.

• Déplacements suivant un chemin - Niveau 1.

  Introduction des déplacements suivant un chemin, et des propriétés correspondantes, dont offset-path.
  

  09 Avril 2015

  Document de travail.

  

  

  

Voir aussi, au sujet des déplacements suivant un chemin.

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

Propriétés :

Fonctions :