Offset - Propriété CSS

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.

L'élément mobile peut être positionné n'importe où sur le chemin avec offset-distance, et son orientation est toujours tangente au chemin.
Le chemin peut être défini par une forme géométrique (un cercle, une ellipse, etc.), une boite (border-box, fill-box, etc.), ou plus généralement en SVG par la méthode path.

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 en SVG, avec la méthode path (on aurait pu utiliser aussi la fonction 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: normal;

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

• offset-position: auto;

  Valeur équivalente à 0 0.

• 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.

  Plus d'informations : voir offset-position.

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(), shape(), 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-position positionne l'élément mobile sur un emplacement du chemin.

• offset-distance: 25px;

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

  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, matérialisé sur les exemples par un point rouge.

  ⦁

  ✈

  offset-distance:50px;

  ⦁

  ✈

  offset-distance:50%;

  Voyez la propriété offset-distance pour plus de précisions.

Valeurs pour offset-rotate.

• offset-rotate: auto; offset-rotate: reverse; offset-rotate: auto 90deg; offset-rotate: reverse 90deg;

  offset-rotate définit l'orientation de l'élément mobile. La présence des mots auto ou reverse dans la valeur, rend l'orientation du mobile automatique pour être toujours tangent au chemin.

  🛦

  offset-rotate:auto;

  🛦

  offset-rotate:auto 90deg;

  Pour plus de précisions et d'exemples, reportez vous à la page sur offset-rotate.

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.

• 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 dimension, positive ou négative, un pourcentage, calculé par rapport à la largeur de l'élément mobile, ou encore une des valeurs prédéfinies : left, center ou right.
  La deuxième valeur positionne le point d'ancrage verticalement. Cela peut être une dimension, positive ou négative, un pourcentage, calculé par rapport à la hauteur de l'élément mobile, ou une des valeurs top, center ou bottom.

  

  offset-anchor:left top

  

  offset-anchor:10px

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: 90deg; offset-anchor: left center;

• offset: initial; offset: inherit; offset: revert; offset: revertLayer; offset: 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.

95%

94%

89%

93%

94%

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

Caniuse

Caniuse

Caniuse

Caniuse

Historique de la propriété offset.

• Déplacements suivant un chemin - Niveau 1.

  Présentation de la propriété résumée offset.
  

  09 Avril 2015

  Document de travail.

  

  

  

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 :

Fonctions :