W3C home > Mailing lists > Public > www-style@w3.org > October 2011

Re: [css3-selectors] Clarity to :focus?

From: Brian Kardell <bkardell@gmail.com>
Date: Mon, 10 Oct 2011 16:25:27 -0400
Message-ID: <CADC=+je06=TMVx39Unbth4G=EZTqbFNv7kO99UWEs-JcscRCRA@mail.gmail.com>
To: Justin Rogers <justrog@microsoft.com>
Cc: "www-style@w3.org" <www-style@w3.org>
In case it's not clear - I understand the UI/interaction concepts.
What I don't understand is the need for ambiguity.  In the absence of
something clearly defined to the contrary, it is intuitive to think
that "like things work alike".  For example, the level 3 rec says:

"Selectors doesn't define if the parent of an element that is
‘:active’ or ‘:hover’ is also in that state."

 Selectors 4 just comes right out and says "The parent of an element
that is :hover is also in that state."  Great, because that's what
everyone implemented :)

It seems to me that it should not be that hard to come to some
consensus on the others and either clearly note the difference or
update the implementation.  Chrome, Safari and FF all say "The parent
of an element that is :active is also in that state", Opera says
"nope".  I'm not sure about IE - but I'm sure you would know.  In any
case, it's widely enough accepted/implemented that I see people use
it.  When you see 2 out of three things which are grouped together in
the drafts/recs and not clearly specified, working a certain way -- is
it not reasonable to assume that the third would as well? I kind of
think so.  That or just explain why in the draft.

It's a minor point - maybe it only bothers me... I'm just raising it
incase anyone else thinks that there is value in the observation.



On Mon, Oct 10, 2011 at 3:52 PM, Justin Rogers <justrog@microsoft.com> wrote:
>
> They are pseudo interaction classes where each interaction has a different meaning.
>
>
>
> :hover is well defined to have a behavior which causes your entire parent tree to become hovered as well. This is implied by the hit-test which occurs as hover is linked to your “cursor” location. The hit-test is like a ray-cast to the root of your document and the implication is that if an element is hovered at a specific location then its parent is also hovered. The current implementation of hover is actually questionable. Since hover is linked to a tunneling hit-test you might expect that other elements other than simply your parent chain be hovered. For instance, if you have content underneath of the node but not in its immediate parent chain, it is clearly “hovered” but doesn’t gain the state.
>
>
>
> :active on the other hand does not have to tunnel to your parent chain. You’ve obviously tested in a specific browser or set of browsers. Not all browsers propagate active up the parent chain. If you read the specification there is even a limitation on what elements can be activated and the activation is left to the document language (thus HTML) to define. Specifically active was meant to cover the duration during which a link is navigating (not just the duration for which the cursor is held in the down position). It can be extended to the duration during which an element which is able to be activated is performing its action (which is obviously not easy to figure out or define for many things).
>
>
>
> :focus is another one just like active. The focused element is the element which will accept the current keyboard input (traditionally). It is specifically one element, not a set of elements or an entire parent chain of elements. Thus focus only applies to a single element.
>
>
>
> Justin Rogers [MSFT]
>
>
>
> From: www-style-request@w3.org [mailto:www-style-request@w3.org] On Behalf Of Brian Kardell
> Sent: Monday, October 10, 2011 9:35 AM
> To: www-style@w3.org
> Subject: [css3-selectors] Clarity to :focus?
>
>
>
> In a fork of a previous thread I mentioned that I was surprised that :focus worked differently than :active and :hover...  Given:
>
>
>
>     <div>
>
>         <input class="x"></input>
>
>     </div>
>
>
>
> The following rule will make the background of the div yellow when the input is hovered:
>
>
>
>     div:hover{ background-color: yellow; }
>
>
>
> And this one will make the background of the div red when the input is 'clicked' (not exactly, but you get the idea):
>
>
>
>     div:active{ background-color: red; }
>
>
>
> But this one will never do anything:
>
>
>
>     div:focus{ background-color: blue; }
>
>
>
>
>
> I think you could make a case whether this is correct behavior or not and rational people could disagree - but given the relationship between and what is in the current drafts/etc it seems in that in the least, this is less clear than it could be.
>
>
>
> Is it worth suggesting that it should specify that the three should work similarly in this regard or note specifically how they are different?  Again, I am not making a case for either, just stating that either course would probably improve the situation.
>
>
>
>
>
>
>
>
>
>
Received on Monday, 10 October 2011 20:26:03 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:45 GMT