I got asked a question recently on twitter from Seb Lee-Delisle about vendor Prefixes and JavaScript. He asked:

is the JS equivalent of -ms-transform MSTransform? or msTransform?

The answer to the question is msTransform. However, the question opens up an important note about the way that different browser vendor have approached Capitalisation with vendor prefixed JavaScript.

Now before I go any further, if you don’t know what Vendor Prefixes are then take a look at this primer.

All CSS properties have a JavaScript Equivalent. However, in JavaScript you can’t use a dash (-ms-TransitionDuration) and so browser vendors have simply prefixed the JavaScript property with the vendor name e.g:

var element = document.getElementById("myDiv");
element.style.msTransitionDuration = "3s";

CSS case-sensitivity

Generally CSS is case-insensitive (except with XHTML in some browsers). However, it’s best practice with vendor prefixes to have them lowercase, the spec that covers this can be found here. Therefore CSS vendor prefixes look like this:

  • -moz-transform (FireFox)
  • -ms-transform (Internet Explorer)
  • -o-transform (Opera)
  • -webkit-transform (Safari, Chrome)

JavaScript case-sensitivity

JavaScript, however, is a case-sensitive language and it’s important to note that different browser vendors have taken slightly different approaches to casing Vendor Prefixes. Now before you get to worried, it is very simple to deal with this issue and this article shows a very easy way to deal with it:  A best practice for programming with vendor prefixes.

In Internet Explorer, Microsoft Lowercase the first Letter, which makes it consistent with the CSS capitalisation:

  • msTransform

With FireFox, Mozilla uppercases the first letter – (Capitalising the first Letter seems to be the convention, however, I couldn’t find a reference to any standard that states a capital, if you know of one please point me to it in the comments and I will update)

  • MozTransform

Opera also uppercases the first letter:

  • OTransform

And in Chrome and Safari you can use either Lower case or uppercase

  • webkitTransform or WebkitTransform

Of course when a property is not vendor prefixed (the property has been fully standardised and browsers no longer needs the vendor prefix) then you simply drop the prefix:

  • transform