Focus styles

[chris-pearce]

I think this:

:focus
{
    /* normalized default styles for all browsers */
    outline: currentColor dotted thin;
    /* on webkit and blink use focus ring;
       style of “auto” hides it, when using mouse or touch */
    outline: -webkit-focus-ring-color auto 5px;
    /*
    if one don't like webkit's ring, use this instead:
    @supports (outline-color: -webkit-focus-ring-color)
    {
        :focus { outline-style: auto; }
    }
    */
}
/* don't use outline on mozilla browsers, if it's not needed */
:focus:not(:-moz-focusring)
{
    outline: none;
}

Should live in Base or Normalise/Reset.

[chris-pearce]

Probably should wait for this: w3c/csswg-drafts#709.