Upper camel case vs. lower camel case in vendor prefixes

Question

The following both seem to be working:

element.style.WebkitFlex = 1;
element.style.webkitFlex = 1;

But which syntax is standard?

Answer 1

The first,

element.style.WebkitFlex = 1;

is the preferred syntax. To reference vendor-prefixed CSS properties inside of JavaScript while using the non-normalized, exact CSS property name, we must rely on the use of bracket notation:

element.style['-webkit-flex'] = 1;

This is, unfortunately, rather unwieldy. Dot notation affords itself better for these situations, and it is in that spirit why we also have the ability to reference vendor-prefixed properties using their camelCased counterparts.

In the process of normalizing property names between CSS and JavaScript, dashes are recognized as a delimiter. They are, obviously, parsed out altogether in the resultant camelCased property name but, nevertheless, are taken into account. In particular, the (delimiting) dashes signal where to apply different casing ( ie , the Uppercased lettering). And, even though they are not alphabetical characters, a dash occupies the first position in (most) vendor-prefixed CSS properties, meaning the specific vendor's name prefix becomes capitalized. This procedure is also explained here .

Thus, element.style['-webkit-flex'] = 1; becomes

element.style.WebkitFlex = 1;

Similar rules apply to the other vendors, such that we could also have...

element.style.MozTransition = 'width 1s 0s ease-in-out';

element.style.OTransform = 'scaleX(1.5)';

As this answer explains, this normalization procedure is applied under the hood in certain libraries including jQuery , among others.

Further evidence of this kind of procedure can be seen in other parts of the spec. For example, the HTML5 dataset property defines similar rules for how to parse data-attributes.

Answer 2

As this is related with style property we should use established camel case notation that gets used with CSS properties.

All style related properties are named like below:

font-variant line-height letter-spacing word-spacing text-align

So we should stay with established practice.