Re: Suggestion: Inheritance

>From: Mikko Rantalainen <mikko.rantalainen@peda.net>
>To: www-style@w3.org
>Subject: Re: Suggestion: Inheritance
>Date: Tue, 17 May 2005 11:39:19 +0300
>
>I thought that CSS *rules* are matched with the *DOM tree*. There's no CSS 
>tree, AFAIK.

Yes, I was unclear. CSS rules are applied to elements from the DOM tree... 
But before that, when *reading* CSS styles (or style sheet files), these 
rules must be stored somewhere for later reference, e.g. when building a 
page from the DOM tree. In my last posting I called this storage entity a 
"tree". It may in fact be a hashlist or anything else.


Therefore, using "hashlist" as storage terminology...

  * CSS rules might be stored in an in-memory hashlist when reading
    them from file/stream,

  * XML/HTML elements will be stored in an in-memory DOM tree when
    reading them from file/stream.


When it comes to rendering the XML/HTML tree, the application will search 
the in-memory CSS hashlist for matching entries to apply them to the 
rendered result. These entries currently contain fix values, and they still 
will, following my suggestion, because... when building the CSS hashlist (by 
reading CSS from a file), any back-reference (which references already 
existing elements in the hashlist only) is resolved into (aka. replaced 
with) a value found in the hashlist. If not found, the back-reference might 
be ignored.


This will explain the strategy (I keep it as tight as possible for the sake 
of brevity):


File Content:
-------------
<style type="text/css">
  p
  {color: red;
  border-color: >p.color;            /* back-reference */
  border-width: >h1.border-width;}   /* forward-reference ! */

  h1
  {color: >p.color;                  /* back-reference */
  border-width: 2px;}
</style>
<body>
<h1>Foo</h1>
<p>Bar</p>
</body>


Within the application, when reading the CSS from the above file, following 
functions are given:

/*  Library function: Add a value from file to a CSS hashlist in memory.
*/
void AddCssRule(string selector,string property,string value);


/*  Library function: Look up a value from the existing CSS hashlist
    built from the file.
*/
string LookupCssValue(string selector,string property);


/*  Library function: Returns true, if the provided value is recognized
    as back-reference.
*/
bool IsValueBackReference(string value);


/*  Library function: Extracts a back-reference's selector part.
*/
string GetSelectorFromBR(string value);


/*  Library function: Extracts a back-reference's property part.
*/
string GetPropertyFromBR(string value);


/*  This function is called by the parser when reading a CSS property.
*/
void AddRuleFromFile(string selector,string property,string value)
{
  if (IsValueBackReference(value))
  {
    string refSel,refProp,refRule;

    /* Retrieve selector and property from back-reference */
    refSel = GetSelectorFromBR(value);
    refProp = GetPropertyFromBR(value);

    if (refRule=LookupCssValue(refSel,refProp))!=null)
      AddCssRule(selector,property,refRule);
  }
  else AddCssRule(selector,property,value);
}



So this is what happens when building the in-memory CSS hashlist:

1) AddRuleFromFile("p","color","red");
2) AddRuleFromFile("p","border-color",">p.color");
3) AddRuleFromFile("p","border-width",">h1.border-width");
4) AddRuleFromFile("h1","color",">p.color");
5) AddRuleFromFile("h1","border-width","2px");



And this is the resulting CSS hashlist:

  Step #1:

     p ° color ° red


  Step #2:

     p ° color ° red
     p ° border-color ° red


  Step #3:  (note that the forward-reference is ignored)

     p ° color ° red
     p ° border-color ° red


  Step #4:

     p ° color ° red
     p ° border-color ° red
     h1 ° color ° red


  Step #5:

     p ° color ° red
     p ° border-color ° red
     h1 ° color ° red
     h1 ° border-width ° 2px



>How do you match your "back-reference" to a single element in DOM tree to 
>query the computed value from? How do you get computed values for 
>potentially all properties with a single-pass algorithm - the time you need 
>to "expand" the back-reference, you haven't parsed the whole of CSS.

Did my explanation solve your question?



>I repeat my question:
>>p { color: span.color; }
>>.special+p {color: blue; }
>>span { color: p.color; }
>
>given source fragment
>
><div>
><p class="special>A</p>
><p><span>B</span></p>
></div>
>
>What is the computed 'color' value for <span> (the string "B")? Let's say 
>we have also rule "div { color: red; }" if that makes any difference.


According to the example above, the following would apply:

p { color: span.color; }   /* forward-reference - ignored */
span { color: p.color; }   /* ignored because not given */

So only the following CSS rules would apply:

     .special+p ° color ° blue
     .div ° color ° red

<OPTION>
In the strategy above, references not found in the built up hashlist are 
ignored. Another option was to use the default value of the referenced 
selector/property instead.
</OPTION>


RFC
Axel Dahmen

Received on Wednesday, 18 May 2005 15:13:07 UTC