- From: Mats Palmgren <mats.palmgren@bredband.net>
- Date: Sat, 02 Apr 2005 14:57:17 +0200
- To: Daniel Glazman <daniel.glazman@disruptive-innovations.com>
- CC: Ian Hickson <ian@hixie.ch>, BachusII <BachusII@planet.nl>, Anne van Kesteren <fora@annevankesteren.nl>, W3C CSS List <www-style@w3.org>, dbaron@mozilla.org
Daniel Glazman wrote:
>
> Mats Palmgren wrote:
>
>> How about something similar to counters? [1]
>>
>> body, section, navigation { depth-weight: IDENT 1; }
>> h:depth(IDENT, 3) {}
>>
>> that is, :depth(IDENT, number) would match an element where the sum of
>> its ascenders' weight for the depth IDENT equals number.
>
>
>
> As Ian said, it's a neat idea but it adds a new dependency from
> selectors to values. And that's quite a bad one IMHO:
>
> div:depth(divdepth, 3) { depth-weight: divdepth 1; }
>
> K-boom...
>
Just for fun I implemented my suggestion above for Mozilla and it
seems to work fine (the selector above does not match anything).
Daniel Glazman wrote:
> Even if you solve that saying that depth-weight property cannot be used
> if the :depth() functional notation is used in the selector part, you'll
> still have to resolve depth-weight declarations in a first step before all
> other declarations:
>
The computed value of -moz-depth-weight for an element only affects
descenders of that element. It follows that :-moz-depth() only looks at
-moz-depth-weight of its ancestors. Maybe I'm missing something -
could you give me a complete example that I can test?
Here's one of my testcases to illustrate:
simple.css:
body,form,div,h,navigation,section {
display:block; color:black; background:white;
}
body, section, navigation { -moz-depth-weight: tree1 1; }
navigation navigation { -moz-depth-weight: tree1 -1; }
h:-moz-depth(tree1, 1) { background:lime; }
h:-moz-depth(tree1, 2) { background:blue; }
h:-moz-depth(tree1, 3) { background:yellow; }
section:-moz-depth(tree1, 3) { -moz-depth-weight: tree2 1; }
h:-moz-depth(tree2, 1):-moz-depth(tree1, 3) { background:silver; }
h:-moz-depth(tree2, 1) { background:pink; }
<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" href="simple.css" ?>
<body>
<h>h1</h>
<form>
<section>
<div>
<h>h2</h>
</div>
<div>
<navigation>
<h>h3</h>
<section>
<h>h4</h>
</section>
<navigation>
<h>h5</h>
</navigation>
</navigation>
</div>
</section>
</form>
</body>
The result is:
h1: lime
h2: blue
h3: yellow
h4: silver
h5: blue
/Mats Palmgren
Received on Saturday, 2 April 2005 12:58:02 UTC