[css-values-4] inherit(<integer>)

I would like to propose an inherit(<integer>) function, akin to the inherit keyword, but inheriting from a higher up ancestor than just the parent. inherit(1) would be equivalent to the inherit keyword, inherit(2) would inherit from the grandparent and so on. If the parameter is larger than the current element’s levels of nesting, it could:

a) resolve to `initial` OR
b) be clamped to the levels of nesting that correspond to targeting :root OR
c) be invalid

I think (b) is more useful, but not sure about implementability.

0 would resolve to `initial`. Negative parameters would make it invalid.

Use cases
---------------

- A generated content pseudo-element inheriting from the parent element. This is especially useful for background effects. Relevant: [1]
- Inheriting background and other colors from any ancestor could be a good alternative to variables for certain cases when loose coupling is desired (e.g. components that are dropped in an environment where their ancestors are controlled by different developers)
- Inheriting a font-size and/or line-height from the grandparent when the parent’s font-size/line-height are set to 0 (common for accessible text hiding) or any other absolute value.
- I've needed this personally many times for a number of different use cases, that escape me now. I will update this thread as I remember them (if anyone else can remember use cases too, even better!) , but I wanted to get implementor feedback first about whether this is feasible at all.

Furthermore, this will eliminate the need for toggle() [2], which is currently at-risk and not implemented anywhere AFAIK. For example, the use case of lists in the spec [2] could be written like this with the inherit function:

ul { list-style-type: disc }
ul ul { list-style-type: circle }
ul ul ul { list-style-type: square }
ul ul ul ul { list-style-type: box; }
ul ul ul ul ul { list-style-type: inherit(4); }

Yes, it’s significantly more code, but:
a) it’s easier to understand
b) it degrades more gracefully for UAs not supporting the inherit function
c) the use cases for toggle() aren't that common to need a shortcut, they just need to be *possible* with a finite amount of code.
d) it's more flexible

Thoughts?

[1]: http://stackoverflow.com/questions/12124953/can-the-before-and-after-pseudo-elements-inherit-height-from-the-parent-elemen
[2]: http://www.w3.org/TR/css3-values/#toggle-notation


Lea Verou
W3C developer relations
http://w3.org/people/all#lea ✿ http://lea.verou.me ✿ @leaverou