[brain-breaker] mask-shorthand. Firefox does not like it
Long time ago I dropped a question in here.
I'm making a list where the markers are a puzzle piece (using masks). In chromium it works like expected, but:
[brain-breaker]
Firefox does not like my mask shorthand (probably the composite?)
Depending on if an edge has a knob or a socket, it has to be added to or excluded from the mask.
The order of added/excluded gradients can change per piece.
Thanks to the shorthand i can easily link the composite to the gradient (together width size and position),
But if i have to divide them in separate properties (so i can use the specific webkit props/vals), that will be a lot harder to manage.
[goal]: find a way to use webkit without adding loads of lines
note: I want to try to keep the html as clean as possible (no extra classes or such)
It's not really urgent (just a personal thingy) and I can solve it with a lot of more code, but before I do...
https://codepen.io/MarkBoots/pen/QWRaMVj
I'm making a list where the markers are a puzzle piece (using masks). In chromium it works like expected, but:
[brain-breaker]
Firefox does not like my mask shorthand (probably the composite?)
Depending on if an edge has a knob or a socket, it has to be added to or excluded from the mask.
The order of added/excluded gradients can change per piece.
Thanks to the shorthand i can easily link the composite to the gradient (together width size and position),
But if i have to divide them in separate properties (so i can use the specific webkit props/vals), that will be a lot harder to manage.
[goal]: find a way to use webkit without adding loads of lines
note: I want to try to keep the html as clean as possible (no extra classes or such)
It's not really urgent (just a personal thingy) and I can solve it with a lot of more code, but before I do...
https://codepen.io/MarkBoots/pen/QWRaMVj
