Setting CSS property in JS with particular syntax, however is overwritten by the preferred syntax of the browser. How can I avoid this?
Poor practice, however I later .split() the property to fetch a single number in the property string, which causes issues when the syntax is changed after I set it.
For example:
Setting property:
el.style.maskImage = "gradient(linear, left top, right top,
color-stop(1, rgba(0,0,0,1)),
color-stop(1, rgba(0,0,0,1))"
Browser changes this to:
mask-image: linear-gradient(to right, rgb(0, 0, 0) 100%, rgb(0, 0, 0) 100%);
Which causes issues when I try and split to find an int in property string:
el.style.maskImage.split("color-stop")[1].split("(")[1].split(",")[0]
This is avoided partially in webkit browsers by not using whole values (color-stop(.99, rgba(0,0,0,1))), however it still pops up often, specifically in Firefox.
It is too late to convert the codebase to this preferred syntax, so is there any way of forcing the browser to use this exact CSS and not switch?
This may be a duplicate as I am unsure of the phrasing of this question. Vanilla Javascript