Re: UA's implementation of ::selection

On May 15, 2010, at 9:11 AM, François REMY wrote:
> 
> BTW, I don't feel ::selection should be viewn as a pseudo-element
> at all. It's rather a layer put between the text and the background of
> an element. Considering it as a pseudo-element is very difficult since
> it can be broken in many different parts, which may be separated by
> gaps (at least in non-webkit browsers).
> 
> 

I agree that the pseudo-element approach just doesn't seem good.  In the most basic case of wanting to scope a selection to an area...let's say a contenteditable div with an id of mydiv, you have to write a rule like the following:

#mydiv::selection, #mydiv ::selection {
  background-color: green;
}

Not only is it bizarre that I had to write two rules (one to cover the immediate text node children and a second one to cover the children of any element descendants of #mydiv), but it's also inefficient in that you end up creating unique pseudo element styles for every single element inside the div and having to check every single element in your document that is selected to see if it's inside #mydiv.

This proliferation of pseudo styles and the forced use of descendant selectors just to do scoping is horrible.

If an author using WebKit writes

::selection { background-color: green }

and then hits "Select All" in the Web page, potentially thousands of pseudo element styles are created.   This is completely stupid, since they all specify exactly the same thing, but because they all had to inherit from different elements, a zillion of them get created for no reason.

Selection would work much better if it was a property that was just part of the cascade and inherited by default, e.g.,

#mydiv {
  selection: green;
}

Or if we want to have more flexibility for extensibility, you could use some kind of identifier reference to point to an external rule:

@selection myselection {
  background-color: green;
}

#mydiv {
  selection: myselection;
}

Alternatively we could say ::selection is only queried against the root element, and then have the pseudo element itself take an argument identifier:

html::selection(myselection) {
  background-color: green
}|

#mydiv {
  selection: myselection;
}
 
dave