Re: DOM style object property names with vendor prefixes

From	"Chris Beall" <Chris_Beall@prodigy.net>
Newsgroups	comp.lang.javascript
Subject	Re: DOM style object property names with vendor prefixes
Date	2014-10-30 10:47 -0400
Organization	A noiseless patient Spider
Message-ID	<op.xojso0entnmj2w@cbealls-imac.local> (permalink)
References	<op.xoeolsddtnmj2w@cbealls-imac.local> <m2r7q5$otd$1@speranza.aioe.org>

Show all headers | View raw

Joao Rodrigues wrote:

> On 27/10/2014 18:30, Chris Beall wrote:
>> I occasionally use JavaScript to dynamically modify style sheets.  This
>> requires that I know the DOM equivalent of CSS property names.  For
>> example: CSS property name 'animation-duration' becomes DOM name
>> 'animationDuration'.  The general conversion formula seems to be: remove
>> hyphens and capitalize the next letter (camel case).
>>
>> But, for bleeding-edge functions, it often becomes necessary to add
>> vendor-specific prefixes.  If there's a standard rule for that syntax, I
>> haven't found it and would appreciate a pointer or two.
>
> There's a W3C Recommendation for the CSS 2.1 Specification, section
> 4.1.2.1 Vendor-specific extensions:
> <http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords>

Good information, but addresses CSS syntax, not DOM syntax.
So, in CSS, "All CSS syntax is case-insensitive within the ASCII range  
(i.e., [a-z] and [A-Z] are equivalent), except for parts that are not  
under the control of CSS." and, for vendor prefixes, "Keywords and  
property names beginning with -' or '_' are reserved for vendor-specific  
extensions.", which, as a later table in the same reference shows, doesn't  
mean vendors will always use the syntax reserved for them.
In the DOM objects representing CSS properties, however, different  
conventions (perhaps they are rules, but the authoritative reference has  
been elusive thus far).  The convention seem to be (whether  
vendor-specific prefixes are being used or not): 1. lowercase the property  
name, 2, uppercase each letter that follows a dash, 3. remove all dashes.
Thus W3C 'official' property names (which never start with a dash) will  
always be camel-cased in the DOM, while vendor-specific ones will always  
have an uppercase letter at, and only at, the beginning of each word, ex:  
border-top becomes borderTop, -moz-animation-duration becomes  
MozAnimationDuration.
The DOM representation IS case sensitive, so doing the conversion  
correctly is important if you are modifying the DOM.
All of the above was determined by experiment.  Since experiments seldom  
cover all possibilities, I would appreciate hearing about contrary  
experimental results.

(snip)
>> I would appreciate authoritative references.
>
> There are some tools that help dealing with the "Vendor-specific
> extensions", as described in this article:
> <http://css-tricks.com/how-to-deal-with-vendor-prefixes/>

If I were doing commercial work, I might seek out such tools, but I prefer  
hand coding, which helps me understand what I did if I have to go back  
later to make a change.  It's harder for me to stay current with multiple  
tools than with a few basic specifications.  Just a personal preference.

Chris Beall

Back to comp.lang.javascript | Previous | Next — Previous in thread | Find similar | Unroll thread

Thread

DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-27 16:30 -0400
  Re: DOM style object property names with vendor prefixes "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2014-10-27 14:07 -0700
    Re: DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-27 17:43 -0400
    Re: DOM style object property names with vendor prefixes Andrew Poulos <ap_prog@hotmail.com> - 2014-10-28 09:48 +1100
      Re: DOM style object property names with vendor prefixes "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2014-10-27 22:45 -0700
        Re: DOM style object property names with vendor prefixes Andrew Poulos <ap_prog@hotmail.com> - 2014-10-28 19:31 +1100
          Re: DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-28 09:59 -0400
          Re: DOM style object property names with vendor prefixes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-10-28 15:26 +0100
          Re: DOM style object property names with vendor prefixes Andrew Poulos <ap_prog@hotmail.com> - 2014-10-31 12:29 +1100
  Re: DOM style object property names with vendor prefixes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-10-27 22:20 +0100
    Re: DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-27 18:11 -0400
      Re: DOM style object property names with vendor prefixes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-10-27 23:45 +0100
        Re: DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-27 20:38 -0400
          Re: DOM style object property names with vendor prefixes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-10-28 19:49 +0100
            Re: DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-28 17:56 -0400
              Re: DOM style object property names with vendor prefixes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-10-29 21:07 +0100
                Re: DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-30 12:50 -0400
                Re: DOM style object property names with vendor prefixes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-10-30 19:13 +0100
                Re: DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-30 17:17 -0400
                Re: DOM style object property names with vendor prefixes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-10-31 20:35 +0100
        Re: DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-27 23:19 -0400
          Re: DOM style object property names with vendor prefixes John Harris <niam@jghnorth.org.uk.invalid> - 2014-10-28 10:11 +0000
            Re: DOM style object property names with vendor prefixes Tim Streater <timstreater@greenbee.net> - 2014-10-28 11:42 +0000
              Re: DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-28 09:52 -0400
            Re: DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-28 09:49 -0400
              Re: DOM style object property names with vendor prefixes John Harris <niam@jghnorth.org.uk.invalid> - 2014-10-29 15:48 +0000
          Re: DOM style object property names with vendor prefixes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-10-28 15:54 +0100
        Re: DOM style object property names with vendor prefixes Scott Sauyet <scott.sauyet@gmail.com> - 2014-10-30 08:12 -0700
  Re: DOM style object property names with vendor prefixes Joao Rodrigues <groups_jr-1@yahoo.com.br> - 2014-10-29 15:23 -0200
    Re: DOM style object property names with vendor prefixes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-10-29 21:47 +0100
      Re: DOM style object property names with vendor prefixes Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2014-10-30 07:32 +0100
    Re: DOM style object property names with vendor prefixes "Chris Beall" <Chris_Beall@prodigy.net> - 2014-10-30 10:47 -0400

csiph-web