RE: [CSS-Variables] Suggestion of change to time of substitution

| [Skipping quite long but interesting message]

While it's not properly defined in the spec right now, my intention with [CSS-Custom] was to introduce a new style level (the 'resolved style') which would happen just before the value computation level. If you look at the specfication, 'inherit' is replaced by its value at computation time so this would solve the issue. See [http://www.w3.org/TR/CSS2/cascade.html#value-stages] at '6.1.2. Computed Value'.

The goal of the resolved style would be to resolve all references and substitute them by their value (or their fallback value) and would be limited to this one purpose only.

However, you're right that the 'inherit' value in a custom property should not trigger inheritance, because it would be otherwhise impossible to use as a value for the target properties. The proper way to reset custom property inheritance is "x-abc: get(parent x-abc)". For now, the specification clearly states that the computed value of a custom property is 'as specified, with references being resolved'. To make this less ambigous, we should probably add that 'any other algorithm or set of rules defined elsewhere in CSS should be ignored when computing the style of a custom property, and in particular the section <.... Inheritance> of CSS .. when calculating the computed value of a CSS Custom Property'.

Your last concern about the note on 'inherit being invalid in most cases when used in compound value' does not make me afraid. Firstly, this is a note so it's not normative (this just point the fact the no algorithm deals with the case of inherit being nested at computation time). Secondly, the case for using 'inherit' as a fallback value of a property reference is properly defined and used in our respective specs. 

Don't forget that after the 'resolution phase', the cascaded value of "color: get(x-text-color || inherit)" will be 'inherit' if x-text-color property is undefined, which is a value the computation algorithm can handle.




Under those assumptions,

   div {
      var-color: red;
      background-color: blue;
   }
   p {
      var-color: inherit;
      background-color: var(color);
   }
   
   <div><p>text</p></div>

would produce a blue text and 

   * {
      color: var(text-color, inherit);
    }

has no reason to be considered invalid. 




Do this resolve your issues?

Received on Wednesday, 31 October 2012 08:25:30 UTC