Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

117
Views
DOM changing syntax of CSS property set

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

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!