repeating-conic-gradient()

Brouillon
Cette page n'est pas terminée.

La fonction CSS repeating-conic-gradient() crée une image composée d'un dégradé conique répété. Elle permet d'avoir un motif répété qu'on pourrait décrire avec une seule itération grâce à conic-gradient. Le résultat fourni par la fonction repeating-conic-gradient() est une valeur de type <gradient> qui est un sous-type du type<image>.

Si le premier ou le dernier arrêt de couleur inclut un angle supérieur à 0deg ou inférieur à 360deg, le dégradé conique ne sera pas répété.

À l'instar des autres dégradés, les dégradés coniques répétés n'ont pas de dimensions intrinsèques (c'est-à-dire pas de taille naturelle ou préférée et pas de proportion préférée). La taille finale du dégradé sera la taille de l'élément sur lequel il est appliqué ou la taille indiquée par d'autres propriétés.

Le type de donnée <gradient>s étant un sous-type d'<image>, on pourra utiliser les dégradés coniques répétés là où des valeurs de type <image> sont attendues. Ainsi, repeating-conic-gradient() ne fonctionnera pas pour la propriété background-color car celle-ci attend une valeur de type <color>.

Note : Afin de créer un dégradé conique qui ne se répète pas, on pourra utiliser la notation fonctionnelle conic-gradient.

Comprendre les dégradés coniques répétés

La syntaxe pour repeating-conic-gradient est semblable à celle de conic-gradient et à celle de repeating-radial-gradient. À l'instar du dégradé conique unitaire, les arrêts de couleur sont placés autour d'un arc. Comme pour les dégradés radiaux répétés, la taille de la portion répétée correspond au premier arrêt de couleur auquel on a soustrait l'angle du dernier arrêt de couleur.

Comparison of the color stops for repeating and non-repeating conic and radial gradients

Les dégradés ci-dessus sont définis avec un tiers de bleu, un tiers de rouge et un tiers de jaune.

repeating-conic-gradient(from 0deg, red 0deg 30deg, yellow 30deg 60deg, blue 60deg 90deg);

repeating-radial-gradient(red 0 8%, yellow 8% 16%, blue 16% 24%);

conic-gradient(red 120deg, yellow 120deg 240deg, blue 240deg);

radial-gradient(red 33%, yellow 33% 66%, blue 66%);

Pour un dégradé répété, on définit le premier et le dernier arrêt de couleur. Si les valeurs ne sont pas explicitement définies, elles correspondent respectivement aux angles 0 et 360deg. Lorsque ces valeurs sont utilisées par défaut, l'arc qui est répété occupe 360 degrés et il n'y a donc pas de répétition.

Les arrêts de couleur sont placés autour d'un arc (et non sur une ligne qui s'écarte du centre). L'arc progresse dans le sens horaire.

Un dégradé conique répété est défini en indiquant un angle de rotation, le centre du dégradé et une liste d'arrêts de couleur. Les arrêts de couleur sont définis avec un angle (type CSS angle). Les unités qui permettent de déclarer un angle sont deg (pour les degrés), grad (pour les grades), rad (pour les radians) et turn (pour les tours). Un cercle se compose de 360 degrés, 400 grade, 2π radians et d'un tour.

Les navigateurs qui prennent en charge ces dégradés permettent également d'utiliser des valeurs en pourcentages (où 100% correspond à 360 degrés). Toutefois, ce comportement n'est pas décrit dans la spécification.

La syntaxe de définition permet de placer le centre du dégradé à l'intérieur ou encore à l'extérieur de l'image. Les valeurs permettant de définir la position du centre s'écrivent comme la syntaxe à deux valeurs de  background-position.

Personnaliser des dégradés

En ajoutant des arrêts de couleur à l'arc du dégradé, il est possible de créer des dégradés sur mesures. La position d'un arrêt de couleur se définit via un <angle>. Si on n'indique pas de position pour un arrêt, celui-ci est placé à mi-parcours entre le précédent et le suivant. Si la position du premier ou du dernier arrêt ne sont pas définies, par défaut, ils seront placés à 0deg et à 360deg respectivement.

Attention, lorsque ces valeurs par défaut sont utilisées, l'arc occupe tout le cercle et le dégradé n'est donc pas répété.

Les deux formulations suivantes sont équivalentes :

repeating-conic-gradient(red, orange, yellow, green, blue 50%);
repeating-conic-gradient(from -45deg, red 45deg, orange, yellow, green, blue 225deg)

Par défaut, les couleurs évoluent progressivement entre chaque arrêt et le milieur de l'arc correspondra à la moyenne des couleurs. Il est possible de déplacer ce point intermédiaire en fournissant une indication quant à l'emplacement du milieu de la transition.

Si deux (voire plusieurs) couleurs sont au même emplacement, la transition sera une ligne brutale entre la première et la dernière couleur déclarées à cet emplacement.

Bien qu'il soit possible de mélanger et de combiner différentes unités pour les angles, il est préférable d'éviter par souci de lisibilité / maintenabilité.

Syntaxe

background: repeating-conic-gradient(
    from 3deg at 25% 25%,
    hsl(200, 100%, 50%) 0deg 15deg,
    hsl(200, 100%, 60%) 10deg 30deg);
);

Values

<angle>
Lorsque cet angle est précédé du mot-clé from, cela définit la rotation du dégradé dans le sens horaire.
<position>
Une position définie avec la même syntaxe que la propriété background-position. Cette position définit le centre du dégradé. Lorsque cette valeur est absente, la valeur utilisée par défaut est center, ce qui indique que le dégradé est centré.
<angular-color-stop>
Une valeur <color> pour un arrêt de couleur, suivie par une ou plusieurs positions d'arrêt (données par un <angle> le long de l'arc). La taille de l'arc répété pour le dégradé est donné par l'angle du dernier arrêt de couleur auquel on a soustrait l'angle du premier arrêt de couleur.
<color-hint>
Une indication d'interpolation qui définit la façon dont le dégradé progresse entre deux arrêts de couleurs adjacents. Cette indication indique l'emplacement où la couleur doit être la couleur intermédiaire entre les deux arrêts environnant. Si cette valeur est absente, la moitié de la transition entre les couleurs sera atteinte à la moitié de l'arc entre les deux arrêts.

Note : Le rendu des arrêts de couleur pour les dégradés CSS suit les mêmes règles que celui des arrêts de couleur pour les dégradés SVG.

Syntaxe formelle

repeating-conic-gradient(
  [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
  \---------------------------------/ \----------------------------/
        Définition du dégradé            Liste d'arrêts de couleur

where <angular-color-stop-list> = [ <angular-color-stop> [, <angular-color-hint>]? ]# , <angular-color-stop>
  and <angular-color-stop> = <color> && <color-stop-angle>?
  and <angular-color-hint> = <angle-percentage>
  and <color-stop-angle> = <angle-percentage>{1,2}

Exemples

Noir et blanc

div {
  background-image:
     repeating-conic-gradient(#fff 0 9deg, #000 9deg 18deg);
}

Dégradé désaxé

div {
  background: repeating-conic-gradient(
    from 3deg at 25% 25%, 
    green, blue 2deg 5deg, green, yellow 15deg 18deg, green 20deg);
}

Le degradé est répété 18 fois mais on en voit que la moitié droite et on voit donc 9 répétitions.

Note : Voir la page Utiliser les dégradés en CSS pour plus d'exemples.

Accessibilité

Les navigateurs ne fournissent pas d'informations spécifiques aux outils d'assistance quant aux images d'arrière-plan. Les lecteurs d'écran ne pourront donc pas annoncer le sens de l'image aux utilisateurs. Bien qu'il soit possible de créer des camemberts, damiers, etc. avec CSS, si l'image contient des informations critiques pour la compréhension générale de la page, mieux vaudra décrire ces informations de façon sémantique dans le document.

Spécifications

Spécification État Commentaires
CSS Images Module Level 4
La définition de 'repeating-conic-gradient()' dans cette spécification.
Version de travail

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
conic-gradient()Chrome Support complet 69
Support complet 69
Support complet 59
Désactivée
Désactivée From version 59: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Edge Support complet 79Firefox Aucun support NonIE Aucun support NonOpera Support complet 56
Support complet 56
Support complet 46
Désactivée
Désactivée From version 46: this feature is behind the Enable Experimental Web Platform Features preference.
Safari Support complet 12.1WebView Android Support complet 69Chrome Android Support complet 69
Support complet 69
Support complet 59
Désactivée
Désactivée From version 59: this feature is behind the Enable Experimental Web Platform Features preference. To change preferences in Chrome, visit chrome://flags.
Firefox Android Aucun support NonOpera Android Support complet 48
Support complet 48
Support complet 43
Désactivée
Désactivée From version 43: this feature is behind the Enable Experimental Web Platform Features preference.
Safari iOS Support complet 12.2Samsung Internet Android Support complet 10.0
Double-position color stopsChrome Support complet 72Edge Support complet 79Firefox Aucun support NonIE Aucun support NonOpera Support complet 60Safari Support complet 12.1WebView Android Support complet 72Chrome Android Support complet 72Firefox Android Aucun support NonOpera Android Support complet 51Safari iOS Support complet 12.2Samsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.
Une action explicite de l'utilisateur est nécessaire pour activer cette fonctionnalité.

Voir aussi