Re: [csswg-drafts] [css-ui] outline-width and "outline-style: auto" (#4925)

> Can you elaborate?

If I set a rule like 

```css
button:focus { outline: solid red 3px; }
```

it will get the solid outline regardless of whether focused by click or keyboard.  That has UX issues because for non-keyboard users it makes it look like clicking toggled a state change, which is why `:focus-visible` was introduced.

But if I use

```css
button:focus { outline-color: red; outline-width: 3px; }
```
then I don't change whether the outline appears or not, only what color & thickness it has when it is drawn.

Or at least, it used to work that way.

It still works that way for color in Chromium, but not for the other outline properties. It still works in Firefox for links and other things that use normal CSS outline, but doesn't work at all for buttons or some inputs. (These results on Windows, some of this may be platform dependent.)

[Test code pen](https://codepen.io/AmeliaBR/pen/56987dfcb5fee580148c6ad2972074fe)

Again, this specific use case is better addressed in the long term with `:focus-visible`. But CSS should definitely be clearer about how `outline-style: auto` can override some or all of the other properties (and that there is huge cross-browser inconsistency in which and when).

-- 
GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4925#issuecomment-610601649 using your GitHub account

Received on Tuesday, 7 April 2020 20:23:29 UTC