Introduce a mechanism for using an attribute value as a variable

[Zhang-Junzhi]

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.left, element.style.top 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.

[Zhang-Junzhi]

I just saw attr() in https://www.w3.org/TR/css-values-3/#attr-notation , :)
Great! Please close this issue.