Capitalization of Vendor-Prefixed CSS Property Names in JavaScript

I just spent a little too long chasing down the answer to this question: When using an element’s JavaScript styles interface, the .style property, should vendor-prefixed property names start with a capital letter or not? E.g., is it button.style.webkitFilter or button.style.WebkitFilter?

The Short Answer

Capitalize them.¹

However, if the prefix is Webkit, case does not matter.

Case matters for Moz.

(No other vendor prefix besides these two really matters anymore.)

The Long Answer

Here is more information for the curious. Note that I expect the reader to be familiar with the general history of the major web browsers and their rendering engines.

At some point, it seems that the thinking (which I would tend to share) is that they should start with a capital letter.

You can find old blog posts and StackOverflow answers that carefully recommend prefixes (when needed) that follow the table below:

Vendor prefix	CSS	JS
Microsoft	-ms-	ms
Mozilla	-moz-	Moz
Opera	-o-	O
Webkit	-webkit-	Webkit

And, to a large degree, this was and is correct.

However, things have changed.

1. Mozilla and Opera announced, all the way back in 2012, that they were going to start supporting some Webkit-prefixed properties.

2. Non-Webkit browsers² realized that a lot of web developers were only using Webkit prefixes even when they introduced their own prefixes. In 2016, for example, Mozilla announced they had released a version of Firefox that added support for a bunch of Webkit-prefixed properties.

3. Generally speaking there’s been a big recognition that vendor prefixes in general should be minimized and the unprefixed version should be supported as soon as there’s a consensus around the syntax.

4. A lot of the non-Webkit browsers are now… Webkit browsers. Microsoft Edge is now a Chromium browser, not Trident. Opera’s full browser is now Chromium browser.

5. At some point — right away? After a year? I have no idea — browsers began treating style.WebkitX and style.webkitX as synonyms.

6. Last but not least, Apple seems to have deleted a lot of old Safari documentation from its website, leaving me unable to find a definitive source from the company that invented the -webkit- prefix!

All of this leads us to a point where, in virtually any browser, you if you are going to set a vendor-prefixed CSS property using JavaScript, it’s going to respond to both webkit and Webkit prefixes.

Yes. Even in Firefox.

For example, in Firefox, you can run the following lines of JavaScript; the result is commented:

var button = document.querySelector("button");
button.WebkitFilter = "blur(1px)"; // It blurs it a little
button.webkitFilter = "blur(2px)"; // It blurs it more
button.WebkitFilter = "blur(3px)"; // It blurs it even more
button.filter = "blur(4px)"; // It blurs it even more
button.WebkitFilter = "blur(0)"; // No more blur!
button.MozFilter = "blur(1px)"; // No effect!

Here we have three supported synonyms for the same property. Changing one changes them all. Notably there is not even support for the Moz prefix, presumably because Firefox never supported filter until it was far along enough in standardization to be supported unprefixed, and virtually nobody authored CSS with a Mozilla-specific prefix but not the unprefixed property.

Now there are still CSS properties that are only supported in Firefox/Gecko with a vendor prefix and only with the -moz- prefix. In JavaScript, you must use the Moz prefix. Example, as of Firefox 99 (April 2022):

btn.style.MozBorderEnd = "2px solid yellow"; // Right border is yellow
btn.style.mozBorderEnd = "1px solid blue"; // No effect
btn.style.borderEnd = "1px solid orange"; // No effect
btn.style.WebkitBorderEnd = "1px solid red"; // No effect

So in summary, this is where we stand today:

Vendor prefix	CSS	JS
Microsoft	Defunct; now Chromium (Webkit)
Mozilla	-moz-	Moz (case matters)
Opera	Defunct; now Chromium (Webkit)
Webkit	-webkit-	Webkit, but webkit works too, even in Firefox

Please let me know if I’ve overlooked something important, or if you’ve arrived from the future and the sitation has changed further from when I wrote this in 2022. Thanks!