Support for Repeating-radial/linear-gradient

[eramdam]

https://developer.mozilla.org/fr/docs/Web/CSS/repeating-radial-gradient
https://developer.mozilla.org/fr/docs/Web/CSS/repeating-linear-gradient

[MoOx]

Can you provide expected input & output? Not sure if we can transform this into classic *-gradient()s.

[eramdam]

Actually it would be only a matter of adding the corresponding vendor prefixes since it looks like it's supported on Chrome/Safari/Firefox with prefixes.
So I'd say something like that

body {
/* spec */
background: repeating-radial-gradient(black 2px, black 0px, white 5px, white 10px);
/* prefixed */
background: -moz-repeating-radial-gradient(black 2px, black 0px, white 5px, white 10px);
background: -webkit-repeating-radial-gradient(black 2px, black 0px, white 5px, white 10px);
background: -o-repeating-radial-gradient(black 2px, black 0px, white 5px, white 10px);

/* spec */
background: repeating-linear-gradient(black 2px, black 0px, white 5px, white 10px);
/* prefixed */
background: -moz-repeating-linear-gradient(black 2px, black 0px, white 5px, white 10px);
background: -webkit-repeating-linear-gradient(black 2px, black 0px, white 5px, white 10px);
background: -o-repeating-linear-gradient(black 2px, black 0px, white 5px, white 10px);
}

[MoOx]

So we should forward that to autoprefixer (poke @ai).

[ai]

@eramdam Autoprefixer already adds prefixes to repeating gradients.

[MoOx]

Good to know.

Also, only really old browser need prefix http:https://caniuse.com/#feat=css-repeating-gradients so if you need to scope that you need to adjust your browser scope.