Re: Two CSS challenges

"Text nodes should not be targeted through a pseudo-element. They
need something equivalent to a type element selector, same level,
same specificity. When you query the nodeName of a TEXT_NODE, the
DOM replies "#text". Unfortunately, "#" is already meaninful in
Selectors..."

Agreed.

At the moment I am wrapping such boxes into artificial <text> elements so
instead of

   span::text { ... }

I am using

  span > text { ... }

But this solution is far from ideal either.

Say you have two anonymous boxes (as in your other message)
and you will want to style them independently.

Something like:

  span > text:first-child { ... }
  span > text:last-child { ... }

but :first-child/:last-child/:nth-child() will not match such
elements as they are not DOM tree children. They are in rendering tree 
instead.

So if we will want to dive that deep we should introduce something
like "rendering tree combinator", e.g. '!' :

element ! :first-child { ... }
element ! :last-child { ... }
element ! :nth-child(1) { ... }

These will match elements in rendering tree so will be able to style
anonymous boxes too. Selector on the right side of the '!' combinator
matches immediate child in rendering (a.k.a. "shadow") tree.

span
{
  display:inline-block;
  flow:vertical;
  background: red;
  padding: 3px;
}

span ! :first-child
{
  background: blue;
}

span:active ! :first-child
{
   position: relative;
   left:1px; top:1px;
}

That would be an ultimate solution I think.
There are other use cases where styling elements in rendering tree is highly 
desirable.
Consider problem of styling <select size=1> elements (dropdown lists):

select ! caption { ... }
select ! button { ... }
select ! popup { ... }

that would be nice to have in our WebApps era.

-- 
Andrew Fedoniouk

http://terrainformatica.com



-----Original Message----- 
From: Daniel Glazman
Sent: Saturday, December 25, 2010 5:38 PM
To: Andrew Fedoniouk
Cc: Andrew Fedoniouk ; www-style@w3.org
Subject: Re: Two CSS challenges

Le 26/12/10 02:16, Andrew Fedoniouk a écrit :

> I want something like this:
>
> ::text
> {
> position:relative; left:1px; top:1px;
> }
>
> that is shift in both directions.

Consider a property allowing to "move" the vertical alignment
of a box by a given offset. That's what I suggested and it addresses
your need w/o introducing ::text.

> With ::text I can style both lines as
> "text 1<cr/lf> text 2"
> is wrapped into single anonymous [text] box.
>
> If <br/> was not declared as display:block; of course but that is
> another story.

Right. But I am saying that if you start targeting individual text
nodes, web designers will end up with bad side effects so they'll
ask for more.

<div>
   text1
   <p>text2</p>
   text3
</div>

your ::text { border: 1px solid black } will put a border around
text1 and text2. You can't target only one of them with ::text.

Text nodes should not be targeted through a pseudo-element. They
need something equivalent to a type element selector, same level,
same specificity. When you query the nodeName of a TEXT_NODE, the
DOM replies "#text". Unfortunately, "#" is already meaninful in
Selectors...

</Daniel>

Received on Sunday, 26 December 2010 02:45:52 UTC