.style property, should vendor-prefixed property names start with a capital letter or not? E.g., is it
The Short Answer
However, if the prefix is
Webkit, case does not matter.
Case matters for
(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:
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
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
Yes. Even in Firefox.
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. 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:
|Microsoft||Defunct; now Chromium (Webkit)|
|Opera||Defunct; now Chromium (Webkit)|
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. ↩︎