Invalid CSS syntax, JS, Safari

Coming up with a title that makes sense for this article is just too hard. Also this is going to be more of a short note than a full-scale article. Ok, here we go.

Yesterday a person asked me to help debug a script which main purpose was to animate transitions between pages. Brief investigation unveiled that this library (which was pretty old to be honest) was trying to append vendor prefixes to properties. The mechanism of identifying the prefix was based on getting all style attributes from <dummy> tag, searching for the property and parsing it’s prefix. Something like this:

const element = document.createElement("dummy")
const styleProps = element.style

Somehow though, author of this article completely forgot to think about the case when there will be no more need for prefixes. What happened next is pretty obvious:

// prefix is '' here
return '-' + prefix + '-' + property // -> '--transform'

And this is where strange things started. The animations continued to work in Safari but not in Chrome or FF. While FF’s behavior theoretically could’ve been different, Chrome and Safari share the Webkit rendering engine. I came up with a following Proof-Of-Concept. You could try running it in your web inspector:

const element = document.createElement('div')
element.style.transition = '--transform 1s ease-in-out 0s'
element.style.transition

Apparently, Safari’s JSC doesn’t allow styling elements with invalid CSS code whilst others seems to be ok with it. I’m still curious though which behavior is the correct one.