- From: Райчо Райков <raycho.raykov@gmail.com>
- Date: Tue, 08 Nov 2011 06:38:32 +0200
- To: www-style@w3.org
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 Tuesday, 8 November 2011 12:23:55 UTC