My research about [css-custom] – @CSSWG
The content of this blog post is extracted from a mail I send to Brian Kardell while we still
were in the process of crafting our CSS Custom Properties proposal.
I have been looking for ‘CSS Custom Properties’ on the internet today to see if there were interesting things to see. It happens that ‘CSS Custom Properties’ has hits returning back to 2001 and some very recent ones (up to April 6; 2012) and, two times at least, a ‘my-syntax’ was used in the samples, hinting to me it feels natural :-)
See:
http://stackoverflow.com/questions/2926326/can-i-access-the-value-of-invalid-custom-css-properties-from-javascript
http://stackoverflow.com/questions/6274350/custom-css-properties-why-notOther references:
http://webdevrefinery.com/forums/topic/10265-create-custom-css-properties/,
http://stackoverflow.com/questions/10040771/custom-css-properties-or-html-attributes,
http://stackoverflow.com/questions/8811027/get-elements-custom-css-properties-mystyle-using-javascript,
http://stackoverflow.com/questions/7251804/css-javascript-get-a-list-of-css-custom-attributes
I scanned the threads, here are the two currently proposed solutions :
1. Custom Attribute
Use a custom attribute, as defined by HTML5. Then, simply retrieve that attribute's value. This is the recommended route.
HTML
<div id="myDiv" style="color:#f00;" data-custom-property="upsidedown" />
2. Parse
style
AttributeRetrieve the
style
attribute's value (not.style
) and parse it into name/value pairs. Then use the value that is set to the name-my-custom-property
. While this works, it's a bit of a hack, and I discourage its use.
This confirms further my intuition that CSS “variables” aka “Custom Properties” are really a similar addition to CSS than data attributes was to HTML.