Re: [selectors] adding a :has-focus pseudo class

> On 17 Nov 2014, at 10:48, Simon Pieters <simonp@opera.com> wrote:
> 
> On Fri, 14 Nov 2014 18:28:55 +0100, Florian Rivoal <florian@rivoal.net> wrote:
> 
>> ...
>> 
>> === Conclusion ===
>> 
>> We should add a :has-focus selector, included in the fast profile, which:
>> a - matches on elements that match :focus
>> b - matches on parents of elements that match :has-focus
>> c - allows the host language to define additional ways in which an element can match :has-focus (and then ping the whatwg to do their part)
> 
> This sounds like a good idea to me. I'm not sure the label part is necessary really, usually you don't focus the label, you focus the control.

I’d expect things the other way around here: putting the focus on the control giving you the ability to style the label as well. Either way, this does not make a difference to the css spec, this is still “allowing the host language to define additional ways”.

> The "ancestors also match" part of :active and :hover should be in the Selectors spec, not in HTML, but I guess that's a separate issue.

Agreed. HTML is likely to want to replicate that as well, since it does so for active and hover, but it definitely does belong in selectors.

>> Alternatively (and I would actually prefer that), we could add these b and c rules to the existing :focus pseudo class. However, given that :focus is already interoperable in not doing that, I am afraid we’d run into web compat problems. Anyone has (or can gather) data to check if we can do that?
> 
> It seems plausible that there are pages using :focus as a bare selector (or *:focus) and do not want all ancestors to get the style applied. Looking at webdevdata from last year, I see 295 sites out of 102,000 pages using bare :focus or *focus. About 99% is setting outline:0 but one is a menu implemented in CSS with :focus, and some also use $("*:focus") in JS which would return the wrong element if ancestors matched. So I think we shouldn't change :focus.

I agree on the assumption, and a brief code search in github gave similar results: there are naked :focus or *:focus selectors, the vast majority are css resets or similar setting outline:0, but a handful is actually showing highlights.

As much as I’d like this to work on the bare :focus, I does seem wiser to leave it alone.

- Florian

Received on Monday, 17 November 2014 09:57:43 UTC