Re: 'all' and the system focus outline

On Mon, Mar 16, 2015 at 4:18 PM, Tab Atkins Jr. <jackalmage@gmail.com> wrote:
> The 'all' property, when you "all: initial" or "all: unset", also
> resets the 'outline' property.  This is troublesome, because, for a11y
> reasons, you don't want to kill the outline of an element by accident.
> You can restore it manually, but that's not something that most people
> will do, because it's not obvious that you have to do it.
>
> This is likely not *directly* overriding the outline styles, as
> they're on button:focus or whatever. But if your selector has at least
> one element and one class worth of specificity, it'll win in the
> cascade even when the element is focused.
>
> I don't know how to fix this. :/  We probably dont' want to exclude
> 'outline' from being reset by 'all'; unlike 'direction' and
> 'unicode-bidi', it's a valid property, and wanting to reset it when
> you're using it for something *other than* focus outlines is valid.

The telcon discussion today revealed that the "default" global
keyword, when we define it properly, actually handles this fine.  In
an example like:

UA Stylesheet:
:focus { outline: auto; }

Author Stylesheet:
button.foo { all: default; background: black; color: white; }

It will first get the UA stylesheet results, ignoring all author
styles, then override the 'background-color' and 'color' properties.
This means that, if the button is currently focused, it'll pick up the
UA stylesheet outline.

This does mean you get the default styling for the button; if you want
to fully override it, you'll have to turn some things off manually,
like 'appearance'.  But it at least resets you to a common slate,
which is useful.

~TJ

Received on Wednesday, 18 March 2015 19:30:30 UTC