Path: csiph.com!v102.xanadu-bbs.net!xanadu-bbs.net!feeder.erje.net!eu.feeder.erje.net!newsfeed.datemas.de!weretis.net!feeder1.news.weretis.net!news.solani.org!.POSTED!not-for-mail
From: Thomas 'PointedEars' Lahn <PointedEars@web.de>
Newsgroups: comp.lang.javascript
Subject: Re: DOM style object property names with vendor prefixes
Date: Wed, 29 Oct 2014 21:47:30 +0100
Organization: PointedEars Software (PES)
Lines: 65
Message-ID: <10973897.6iAA0hNIMK@PointedEars.de>
References: <op.xoeolsddtnmj2w@cbealls-imac.local> <m2r7q5$otd$1@speranza.aioe.org>
Reply-To: Thomas 'PointedEars' Lahn <usenet@PointedEars.de>
Mime-Version: 1.0
Content-Type: text/plain; charset="ISO-8859-1"
Content-Transfer-Encoding: 8Bit
X-Trace: solani.org 1414615651 4427 eJwNwoENwDAIA7CXQJCwnNMi+P+EVTaCzq4kmNgndeNqD9DVLpmW0K7p5Bct55hi2JOI8h8VQhCV (29 Oct 2014 20:47:31 GMT)
X-Complaints-To: abuse@news.solani.org
NNTP-Posting-Date: Wed, 29 Oct 2014 20:47:31 +0000 (UTC)
User-Agent: KNode/4.14.1
X-User-ID: eJwFwYkBADAEBLCVqjiMo579R2iiDEKZQCG6uh3ie9qTMjo5mFJVO2f9uVw75Vzy7iOahkveCbOhBI6j+gNcRBWZ
Cancel-Lock: sha1:UQX6L89NwomR9NVov+il71UqSqg=
X-NNTP-Posting-Host: eJwFwYEBwCAIA7CXipTizhko/59gEi5TJxViTMzoYNvSWZdHzTQP/Fm8017soiNZ6G9fAngYTRC7
Mail-Copies-To: usenet@PointedEars.de
Xref: csiph.com comp.lang.javascript:26030

Joao Rodrigues wrote:

> On 27/10/2014 18:30, Chris Beall wrote:
>> [?] 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>

You are missing the point.  The question was about if there are any formal 
specifications as to how style property names translate to style *object* 
property names.

There are not; there are only de-facto standards (which Mozilla *appears* 
not to care to follow for some reason).
 
>> 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/>

There is nothing authoritative about this site, so it fails to meet the 
request.

I strongly recommend to avoid all the approaches mentioned there except CSS 
preprocessors like LESS and SASS (use them server-side if possible).

> Sometimes, I simply open the console in the target browser and try to
> retrieve the attributes of a given element (the one who has
> vendor-specific prefixes), e.g.
> 
> var el = document.getElementById('someID');
> var atts = el.attributes;
> [].slice.call(atts).forEach(function(item) {
>   console.log(item.name + ': ' + item.value)
> });

I am not sure if this is a good idea at all.
 
> And sometimes I create a dummy div and retrieve its style, e.g.
> 
> var parseEl = document.createElement('div');
> var css = parseEl.style;
> for (i in css) {

(Unguarded) for-in iteration over host objects certainly is a Very Bad Idea, 
as you have been told before.

>   if (/moz|webkit/i.test(i)) console.log(i + ': ' + css[i])
> }

Should be at least /^(moz|webkit)/i.
 
-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not Cc: me. / Bitte keine Kopien per E-Mail.