![](/style/images/good.png)
![](/style/images/bad.png)
Capitalization of Vendor-Prefixed CSS Property Names in JavaScript
source link: https://alanhogan.com/code/vendor-prefixed-css-property-names-in-javascript
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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.1
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.
Mozilla and Opera announced, all the way back in 2012, that they were going to start supporting some Webkit-prefixed properties.
Non-Webkit browsers2 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.
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.
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.
At some point — right away? After a year? I have no idea — browsers began treating
style.WebkitX
andstyle.webkitX
as synonyms.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!
-
The exception was Microsoft (see table). Note the past tense in that sentence. No current Microsoft browser uses Microsoft vendor prefixes, so this is only relevant if you are, for whatever reason, supporting ancient, specific, rarely used versions of Microsoft browsers. ↩︎
-
Blink is the Webkit fork at the heart of Chromium browsers. Technically it is not Webkit anymore, but it still uses the same
-webkit-
prefix that Webkit does, so for our purposes Blink counts as Webkit. When I say “non-Webkit” browsers, I mean browsers that did not share a history with Webkit. ↩︎
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK