[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
13 Replies
The --circle value begins with a slash. Is that legal according to the CSS spec? It is my understanding that custom variables must have values that have valid meaning on their own, and that is part of a valid value but not a whole valid value.
yea, together with the other vars it will be part of the mask shorthand
those can be re-arranged, but
position / size repeat image clip compositethose can be re-arranged, but
position / size have to be together with a slash in between
I understand the intended purpose of the slash. My question is if that is allowed as a value for a CSS variable since that in itself isn't a whole value.
From MDN: "It represents the entirety of what a valid declaration can have as its value."
I just tried loading it into Webstorm to see what warnings or errors it gives. It marks that slash with an error saying "term expected".
The error precedes the slash because something should be there for it to be a complete value.
thanks, but i really want to do this with css alone. don't want separate svg's for each combination. that would be 81 different.
also, because of css i can easily size (out of aspect-ratio)
I dont' think it should be an issue. have done it multiple times before. (there is no issue in the inspector)
But, i will look into it and see if i can change it.
here you see it should work
I understand that it can work in some browsers. The point is that if you violate the specs, some browsers will handle it differently and they are free to change how they handle it at any time.
not sure if i'm violating the specs though (could be interpreted differently). but will try it later. thanks
@MarkBoots I'm not entirely sure but... I think this might have something to do with the 3 value
mask-position being used in the 3rd mask. The 3 value mask-position doesn't seem to work in either Chrome or Firefox in this pen: https://codepen.io/jsnkuhn/pen/OJYzEVPthat is a good catch. will look into it. thanks
getting closer...
now figuring out the correct composites, ff still not liking it completely
https://codepen.io/MarkBoots/pen/abrErOY
edit --gonna pause this project. head is steaming
