Ray() - Fonction CSS

Schéma syntaxique de ray().

Sur le diagram, les termes en gras sont les termes prédéfinis de CSS, les autres sont décrits ci-dessous :

• a est une valeur numérique suivie d'une des unités d'angle.
• x et y sont deux valeurs numérique, suivies d'une des unités de dimension

Description de la fonction ray().

La fonction ray() peut être utilisé dans le cadre des déplacement suivant un chemin, avec la propriété offset-path. Elle définit un chemin rectiligne qui part du centre de l'élément et qui se dirige vers la périphérie. Les nombreux paramètres de la fonction permettent de tout ajuster, l'angle, la position du centre, etc.

Propriétés en rapport.

Nous vous invitons à consulter la propriété résumée offset pour plus d'explications ou d'autres exemples, et également les pages ci-dessous, concernant les propriétés en rapport.

La valeur ray() peut être utilisée avec les propriétés suivantes :

• offset-path : Définit le chemin sur lequel pourra se posiitionner un élément (Motion path).

Syntaxes de la fonction ray().

• offset-path: ray(45deg);

  a est que fait le chemin avec la verticale. 0° correspond donc à un chemin vertical, du bas vers le haut.

  

  
  45deg

  

  
  90deg
• offset-path: ray(45deg at 25% 75%);

  Le mot at introduit les coordonnées du centre. Il s'agit d'une valeur numérique suivie d'une unités de dimension ou d'un pourcentage. Dans ce dernier cas, le pourcentage est calculé par rapport à la largeur de l'élément pour la première valeur, et par rapport à la hauteur pour la deuxième.

  Ces valeurs peuvent également placer le centre en dehors de l'élément.

  Ces valeurs peuvent être également :
  pour la première : left, center ou right.
  et top, center ou bottom pour la deuxième valeur.

  

  
  at 75% 40%
  Centre situé dans l'élément.

  

  
  at -20% 50%
  Centre situé à l'extérieur de l'élément.
• offset-path: ray(45deg closes-side at 25% 25%);

  Le deuxième paramètre correspond à la longueur du chemin.

  • closest-side : distance depuis le centre jusqu'au bord le plus proche (valeur par défaut).
  • farthest-side : distance depuis le centre jusqu'au bord le plus éloigné.
  • closest-corner : distance depuis le centre jusqu'au coin le plus proche.
  • farthest-side : distance depuis le centre jusqu'au bord le plus éloigné.
  • sides : distance depuis le centre jusqu'à la bordure. Contrairement aux quatre premières valeurs, avec sides cette distance varie en fonction de l'angle.
  

  closest-side

  

  farthest-side

  

  closest-corner

  

  farthest-corner

   

  

  
  sides

  

  
  sides
  Avec sides la distance face à un angle sera plus importante que perpendiculairement à un bord.
• offset-path: ray(45deg contain); ⚠

  Le mot contain réduit légèrement la distance pour que le mobile soit toujours contenu entièrement dans les limites du chemin.

  ⚠ Attention, cette valeur n'est pas encore prise en charge par les navigateurs (2025).

  

  
  Sans contain

  

  
  Avec contain

  

  
  Avec contain
  (simulation)

Animation avec la fonction ray().

La fonction ray() s'anime de façon continue sans problème. Sur notre exemple, afin qu'on puisse voir quelque chose, il y a deux animations. Le point rouge parcourt une spirale.

• Une première sur offset-path, avec la fonction ray().
• Une deuxième sur offset-distance.

Simulateur avec la fonction ray().

Offset-position a été fixée à 33% du bord gauche et 33% du bord haut, de façon à ce qu'il y ait vraiment un coté plus proche que les autres (et un angle plus proche aussi).
Le simulateur ne représente pas vraiment ce qu'est la fonction ray() qui est un rayon du cercle, et non pas, comme on pourrait le croire en regardant l'animation, une circonférence.
L'animation se contente de faire évoluer une propriété personnalisée : --angle. Propriété qui est reprise dans les différentes syntaxes proposées par la simulateur.

Support de la fonction ray().

La fonction ray() est bien reconnue par tous les navigateurs actuels et peut être utilisée sans problème.

1

Fonction
ray()

Estimation de la prise en charge globale.

88%

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

Samsung Internet

Chrome

Edge

Safari

Opéra

Firefox

Chrome pour Androïd

Safari sur IOS

Androïd Brower

Firefox pour Androïd

KaiOS Browser

Opéra mini

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

Caniuse

Historique de la fonction ray().

• Déplacements suivant un chemin - Niveau 1.

  Concernant ray(). Introduction des déplacements suivant un chemin, et de la fonction ray().
  

  09 Avril 2015

  Document de travail.

  

  

  

Voir aussi, à propos des déplacements sur un chemin.

Les déplacements suivant un chemin font l'objet d'une spécification spéciale, décrite ici déplacements suivant un chemin., qui regroupe les propriétés et les fonctions relatives à cette fonctionnalité. En voici la liste.

Propriétés :

Fonctions :