Re: [selectors] Suggestion for :focus-ring pseudoclass

> On Sep 22, 2015, at 3:21 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> 
> I'm currently in discussion with Alice Boxhall and Brian Kardell about
> their input modalities proposal (which we discussed at the f2f), but
> one thing that came out of the discussion which seemed independently
> relevant is the ability to directly style the "focus ring" state.
> 
> By "focus ring" state, I mean the subset of :focus that, in the
> absence of any overriding author styles, triggers a UA focus ring.
> This currently happens any time a text input or [tabindex > 0] element
> is focused, and when a button is *keyboard* focused (but not when it's
> clicked).
> 
> Mozilla has something approximately equivalent today, with
> :-moz-focusring
> <https://developer.mozilla.org/en-US/docs/Web/CSS/%3A-moz-focusring>.
> (The only difference is that it doesn't match anything if "focus ring
> drawing" is turned off.)
> 
> The main benefit of such a thing is that, today, if the default UA
> focus ring style does not work well with your site's theme, you're
> kinda screwed.  You can manually write a :focus rule, but you can't
> predict when an element would have a focus ring drawn; you'll
> unfortunately start drawing focus rings when the user mouse-clicks a
> button.  Using :focus-ring instead does the right thing automatically,
> triggering your styles only when the UA determines via heuristics that
> it should draw a focus ring.
> 
> (Those heuristics might not always be right, and that's part of my
> continuing conversation with Alice and Brian, but that's separable
> from this topic.)
> 
> Thoughts?

Most of my buttons are actually styled <a> elements, because traditionally they've been easier to style consistently across UAs. They get a :focus style very briefly prior to doing whatever it is they do (go to a new page, trigger some JS that can throw the focus elsewhere, etc). I've never seen this as a big problem. Not as serious as, say, Safari not supporting box-shadow on SELECTs, when Chrome does. (Box shadow works better than outline, because it follows the curved corners. You can create a solid line by using spread with no blur or offsets.) 

I think it is kind of odd that buttons don't have focus effects, when links do.

Received on Friday, 25 September 2015 00:26:02 UTC