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-not

Other 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 Attribute

Retrieve 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.

Published on 2013-03-29 under ALL, DISCUSS, WEB

Comments

A javascript file is loading the comments.