[csswg-drafts] Introduce a mechanism for using an attribute value as a variable

Zhang-Junzhi has just created a new issue for https://github.com/w3c/csswg-drafts:

== Introduce a mechanism for using an attribute value as a variable ==
For now, we are able to design an adaptive UI using attribute-selectors if the possible values of the attribute is enumerable, but there's no way to deal with the situation where the possible attribute values are innumerable.

For example, if I am going to design a positioned box that always follows my cursor by a fixed distance, the current solution is likely to listen to the mousemove event of the window in script code, and do real-time caculation and adjustment for the element.style.position of the box based on the position of the cursor. But that doesn't seem a perfect solution as script code is not primarily used to care for or directly meddle with the style of the document, it would be better if the script just manipulates DOM attributes, and lets presentation up to CSS according to the attribute values.

With the ability of using an attribute value as a variable, this can be achieved. We can set the cursor position value to data-current-cursor-x and data-current-cursor-y attributes on html or body using script, and get the values of the two attributes for use in CSS's calc function.

Although an attribute is always a string, there has to be different kinds of CSS variables it can be converted to(e.g. a number with/without a unit, or just a pure string), in different situations. Currently I haven't come up with a specific solution as to the design of the new mechanism. I just propose for the general idea of using an attribute value as a variable.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2931 using your GitHub account

Received on Tuesday, 17 July 2018 14:44:44 UTC