Re: [css3-selectors] Elements that can have :focus pseudo-class

On Nov 16, 2008, at 11:34 AM, Boris Zbarsky wrote:

> Brad Kemper wrote:
>> <body onfocus="document.body.className='focus';"  
>> onblur="document.body.className='';" class="focus">
>
> Note that browsers use the DOM0 on* attributes on the body to set  
> event handlers on the window, not on the body.  You can easily test  
> this by outputting the value of |this| in the above focus/blur  
> handlers, or simply by setting up the event handlers on the body  
> using addEventListener and noting that they never fire.
>
> You're correct that these handlers do correspond to focus/blur  
> calls... on the window object.
>
> I'm curious that this was confusing; did you really think that the  
> load and error events also fire on the body and not on the window?

I think there is no WINDOW element in HTML or CSS where I can specify  
(in HTML or CSS) what should happens in response to the window gaining  
focus. HTML solves this by allowing the onfocus handler to be attached  
to the BODY tag, which seems like a sensible, intuitive place to put  
it. I could see the argument for putting it on the HTML element  
instead, but they didn't. And the following also does not work:

html:focus { background-color:green; }

Which is good, really, because it is far more likely that authors will  
set the background color of the BODY than of HTML (and any changes to  
the background color of HTML get covered up or replaced by that of  
BODY). So, is there some other abstraction of a screen region that  
does represent the window or viewport, in which the :focus pseudo- 
class can be used in a way that is consistent with how it is done in  
HTML and JavaScript?

>> With this, the background-color of the body will turn green when it  
>> comes into focus
>
> No, it'll turn green when the window comes into focus.

It seems to me that you are spitting hairs that JavaScript and HTML do  
not split. It is useful in JavaScript to have the event listening  
attributes on the BODY tag, since there is no WINDOW element to use  
with selectors. So why would you think it would be less desirable to  
have the :focus pseudo-element work in a consistent manner? Is there  
another way of doing this that will select the focused viewport?

>> *Elements that are matched by :focus should be the same elements  
>> that have received the "focus" event in an applicable event-driven  
>> scripting language such as JavaScript. Elements that receive the  
>> "blur" event should no longer be matched by the :focus pseudo-class.*
>
> While this could be done (and is in fact what Firefox implements, as  
> I recall), it wouldn't solve your problem.

What would then? A reference to the event handlers as they are  
expressed as attributes in HTML?

>> There's probably a better way to say that, but you get the idea.  
>> There does not seem to be a corresponding problem with :active, as  
>> clicking and holding the mouse down on the body will change its  
>> background-color when you have the following:
>> body:active { background-color:yellow; }
>
> That's because :active is triggered off of mousedown (at least in  
> Firefox) and the body does receive a mousedown event in this case.

And there is no mousedown event for the window itself that can be set  
as an attribute. A situation similar to what we have in CSS, that I  
would like corrected. I prefer a way of correcting it that is similar  
to the way it was dealt with in HTML (pretending that the BODY is the  
WINDOW, for certain things), as that would be familiar and intuitive  
for authors. I am less concerned with the purity of how an implementor  
would think of it (no disrespect intended).

>
>
> -Boris
>

Received on Sunday, 16 November 2008 20:19:20 UTC