[csswg-drafts] Resolve values of attr() functions in a custom property

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

== Resolve values of attr() functions in a custom property ==
**Background**

Currently, an attribute value on the element can be obtained by the element itself or its pseudo-elements.

However, it's not possible, **for descendant elements**, to obtain an attribute value of their ancestor. Although an attribute selector can be applied such as `html[data-foo=val] .some-descendant`, that restricts ability of adjusting style of descendant elements accordingly only when their ancestor's attribute value is **enumerable**; that is, if their ancestor's attribute value is **inumerable**, style adjustment of descendant elements accordingly seem hopeless in CSS.

------------------------------

**Proposal**

[css-variables](https://drafts.csswg.org/css-variables-1/) defines that only var() is resolved in a custom property declaration at computed-value time before the value is inherited, so I'd like to suggest we just do this for attr() as well. If both the two kinds of functions occur in one declaration, var() is resolved before attr(). Here are some examples:

```
/* Valid. Both var() and attr() are resolved at computed-value time, before the value is inherited. */
--foo: attr(data-foo);
--foo: foo attr(data-foo);
--foo: var(--bar) attr(data-foo);
--foo: attr(var(--bar));

/*
 * Invalid. Both var() and attr() are resolved at computed-value time, before the value is inherited.
 * However, since var() is resolved before attr(), the literal "attr(data-foo)" is an invalid custom
 * property name, hence the declaration value is invalid.
 */
--foo: var(attr(data-foo));
```

------------------------------

I am looking forward to hearing from your opinions.

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

Received on Sunday, 22 July 2018 11:55:18 UTC