Re: inherit property

I am just adding more info to this posting. The trinidad skin spec which 
is based on CSS3 (adds additional elements) introduces -tr-rule-ref() 
and -tr-property-ref() for this. It would be nice to pull these or add 
something similar to CSS3.

Example 1:
    .someclass {color: red}
    .foo {-tr-rule-ref: selector(".someclass")}

Example 2:
    .someclass {color: red}
    .foo { background-color: -tr-property-ref(".someclass", "color");}

Source: http://myfaces.apache.org/trinidad/devguide/skinning.html

Anand

On 11/8/2011 10:08 AM, Райчо Райков wrote:
> I was always interested why in CSS not implemented inheritance from
>
> another style.
>
> Example:
>
> ..style_1 { border-color: blue; color: red; }
> ..style_2 { border-color: inherit-from ( style_1 ); color: green; }
>
> When I search in the Internet, there are other people asking the same
> question.
>
> Main advantage is extending styles for libraries without changing their
> CSS files. In my example, lets assume "style_1" is declared in library
> from other vendor. I build my own web page(s), where I need box with the
> same border as defined in library but with different color of the text
> (green in example).
>
> If the library vendor changes border color in style_1 (or user changes
> the page theme), if I have such kind of inheritance my page will
> "follow" changes automatically.
>
> I send an email to Karen Myers (Business Development Lead, MIT) and here
> is part of her answer:
>
> -------------------------------
>
> The *technical* answer has several aspects, including:
>
>   - It is not so easy at is looks. E.g., what color does the last line
> use in this example?
>
>         .style1 { color: blue }
>         .style1 { color: green }
>         .style1 { color: inherit-from(.style1) }
>         P.style1 { color: yellow }
>         H1.style1 { color: orange }
>         H1 { color: inherit-from(.style1) }
>
>   - If it is to make editing of CSS easier (for advanced users), there
> are specialized systems such as LESS and SASS, and generic systems such
> as PHP and SSI, that can do this much better. They also have the
> advantage that they already work, and are independent of browser support.
>
> -------------------------------
>
> I know it isn't so easy to implement such thing. It's not just another
> "property". It's another way of thinking about properties. If in current
> CSS the model of properties can be called "flat", if such inheritance is
> implemented the model will become "hierarchical".
>
> About the implementation, I think if the browser can resolve which style
> should use when rendering a tag, it can resolve which style to use when
> inherit from other style. Of course, it's not a "real" answer or 
> solution.
>
> Ms. Myers give me a good example (mine was very simple). Let's follow it
> step by step (or think as a CSS parser):
>
>         .style1 { color: blue }
>
> Now *.style1 defines text color to be blue.
>
>         .style1 { color: green }
>
> Now text color of *.style1 becomes green. We "forget" about the blue.
>
>         .style1 { color: inherit-from(.style1) }
>
> It's interesting. After this line the text color of *.style1 should
> be.... green again.
>
>         P.style1 { color: yellow }
>         H1.style1 { color: orange }
>
> Nothing special here.
>
>         H1 { color: inherit-from(.style1) }
>
> Here is another complicated situation. There are two ways to parse it:
> orange or green. If we follow the "normal" way of HTTP-CSS relationship,
> the result should be orange. But more correct (in my point of view) is
> to use explicit clause (*.style1), so color should be green. If we want
> orange, we must use:
>
>         H1 { color: inherit-from(H1.style1) }
>
> The final simplified result of our parsing should be:
>
>         .style1 { color: green }
>         P.style1 { color: yellow }
>         H1.style1 { color: orange }
>         H1 { color: green }
>
> Also we can go further and say something like following:
>
>     .s1 { color: green }
>     .s2 { border: 1px solid inherit-from ( .s1 color ) }
>     .s3 { background-color: inherit-from ( .s2 border ) }
>     .s4 { background: inherit-from ( .s2 border ) }
>
> Of course it requires more complicated parser, but I think it is
> possible. The parser should copy adequate (?!?!?) values from inherited
> property. Not the value with same name, but the value with the same
> meaning. But it becomes really, really complicated.
>
> If the point symbol is not reserved for other use, it can be used
> instead of inherit-from property:
>
>     .s5 { color: .s1.color }
>     .s6 { color: .s2.border.color }
>
> Currently CSS "uses" the dash ('-') as a "hierarchy delimiter"
> (border-color, border-left-style, etc.). So it can be used here without
> any confusion (and probably with blessing from all CSS parser 
> developers):
>
>     .s7 { color: .s2-border-color }
>     .s8 { border: .s2-border-width solid .s1-color }
>
> I think it's more simple and more readable. But the dash may occur in
> style name (and here, we are killed slowly and painfully from angry
> crowd of web developers). I think it looks like some kind of namespace
> delimiter?!??!?!
>
> Also, we can simply remove clause "inherit-from":
>
>     .s9 { color: .s1 }
>
> The property with the same name (.s1.color) should be used. I think the
> last example is basic functionality, that should be implemented in CSS.
> Basically, the parser should make a copy of current value of the same
> property in the ancestor style.
>
> If the ancestor style has no value for inherited property, then the
> property in derivative style also has no value.
>
> If the ancestor has part of values (resulting from usage of dash), then
> derivative should inherit only these values.
>
>     .a1 { border-color: red; border-width: 1px; }
>     .a2 { border-style: solid; }
>     .d1 { border: .a1; border: .a2; }
>     .d2 { border: .a1, .a2 }
>
>
>
>
>

Received on Wednesday, 9 November 2011 08:30:20 UTC