Focus Outline Color

[argyleink]

Description

There are 3 areas that could use interop attention:

1. Only Chrome on macOS lets outline-color alone change the outline. Firefox and Safari ignore the color request and continue drawing their default outline styles
2. outline-color should allow the value of invert and only Firefox handles that correctly per spec, it does this by using currentColor
3. If authors do want to change the color of the outline, across browser, they currently must pass outline-style, which has the side effect of no longer matching the border radius of the focused element

Rationale

There was a lot of positive developer feedback when Chrome aligned with Firefox and Safari on making the outline follow the shape of the element. This meant no more box-shadow focus outlines were needed anymore.. mostly. Recently I did a dive into the cross browser customization of this nice shapes focus outline, and found some issues that I've listed above in the description. I still see the box-shadow "hack" in the wild, like in this material component or this article. It's my understanding that these box-shadow solutions don't work for forced color modes or high contrast modes.

Half of the great work is done, having the outline follow the element shape, but it's a big bummer that attempts to customize the color to match a brand means losing the shape. We want people using the built in focus indicator.

Specification

https://www.w3.org/TR/css-ui-4/#outline-props

Tests

https://wpt.fyi/results/css/css-ui?label=master&aligned&view=subtest&q=outline

[jelbourn]

Could this also include outline-radius? Material Design, for example, plans to continue avoiding outline because they have cases where they don't want the focus ring to exactly match the focused element's border radius.

[karlcow]

@jelbourn Does that solve your issue?
https://bugs.webkit.org/show_bug.cgi?id=20807

[jelbourn]

Not quite- this is secondhand from Google's Material Design folks, but apparently there are situations where they'd like the focus ring to have a different radius than the element itself.

[gsnedders]

Could this also include outline-radius? Material Design, for example, plans to continue avoiding outline because they have cases where they don't want the focus ring to exactly match the focused element's border radius.

Is outline-radius even specified anywhere currently, or is there even an open CSS WG issue requesting it? It seems small enough it might be possible to move quickly enough for this to be suitable for 2023, but it would require standardisation to move quickly.

[karlcow]

Could this also include outline-radius? Material Design, for example, plans to continue avoiding outline because they have cases where they don't want the focus ring to exactly match the focused element's border radius.

Is outline-radius even specified anywhere currently, or is there even an open CSS WG issue requesting it? It seems small enough it might be possible to move quickly enough for this to be suitable for 2023, but it would require standardisation to move quickly.

It doesn't seem so.
https:/w3c/csswg-drafts/search?q=outline+radius&type=issues

@jelbourn Google's Material Design folks should contact the CSS WG or someone from Google in the CSSWG. Maybe that could clarify the perimeter of the issue.

[argyleink]

there used to be -moz-outline-radius but it doesnt appear to be prototyped anymore in Firefox

[foolip]

Since today is the last day to refine proposals, let's make it final that outline-radius is not part of this proposal, since there's no spec for it yet.

[gsnedders]

I meant to ask about this last week, but the goal here is specifically how form elements have their outline rendered when they have focus? Because the majority of tests linked above don't have anything to do with focus. (And, e.g., outline-005.html fails in STP 156 because the outline doesn't follow border-radius, even if it does follow the edge of form controls).

[argyleink]

I meant to ask about this last week, but the goal here is specifically how form elements have their outline rendered when they have focus?

specifically about "i just want to change the color" and not get side effects

[emilio]

@argyleink I believe this is just w3c/csswg-drafts#7761? Firefox follows accent-color which I think is a reasonable thing to do.

[argyleink]

@argyleink I believe this is just w3c/csswg-drafts#7761? Firefox follows accent-color which I think is a reasonable thing to do.

I see, can confirm that accent-color in Firefox changes the focus ring color and doesn't downgrade the shape effect. BUT, it does have a secondary outline side effect

[emilio]

@argyleink that is expected, to guarantee contrast regardless of the background. That's the only difference in Firefox between outline-style: auto and outline: 2px solid <whatever>.

[argyleink]

yeah, i get why, but is it conditional, like only doubled up if it's not passing? or it's just always a double as a catch all?

[emilio]

It's always double, the alternative color is the "accent foreground" color, which is usually white, but can be a darkened version of the accent color if it's too light. It's basically whatever color the checkbox checkmark etc are.

[foolip]

In the State of CSS 2022 question about browser incompatibilities, there were 13 responses categorized as outline. A sample of those:

• outline stroke with radius! would use this extensively if browser support was wider, since it can overlay the content with alpha borders.
• outline+border-radius
• Safari's lack of support for honoring border-radius on outline is our most recent annoyance.

These two about focus might also be pointing at the same issue:

• styling default focus ring
• focus rings for all interactive elements

This wasn't enough to make the top list in #248, but I'd consider it a medium strength signal since a bunch of comments point to a specific problem.

[gsnedders]

In the State of CSS 2022 question about browser incompatibilities, there were 13 responses categorized as outline. A sample of those:

• outline stroke with radius! would use this extensively if browser support was wider, since it can overlay the content with alpha borders.
• outline+border-radius
• Safari's lack of support for honoring border-radius on outline is our most recent annoyance.

None of these are about focus outlines, though, are they? They're just about the behaviour of outline in general. See my question about scope above.

[foolip]

@gsnedders I'm not especially familiar with this, but assumed that outline can be used to control the styling of the focus outline, and I just confirmed that with the following:

<!DOCTYPE html>
<style>
input:focus {
  outline: 3px solid blue;
}
</style>
<input value="hello">

Whether the comments from State of CSS are about focus outlines or other uses of outlines is hard to say, but since they mention radius and many focusable things have rounded corners, it's not very far fetched.

Is the scope of this proposal still unclear though? If so I'm sure @argyleink will be happy to clarify.

[foolip]

In the MDN short survey on CSS & HTML, "CSS outline property (including outline-color)" was selected by ~14% of survey takers, putting it in the middle third of the 20 options. (There is some uncertainty as with any survey data.)

[argyleink]

most of the comments you shared about outlines were about the shape of the outline following the shape of the element that's in focus. there was previously poor interop here on this behavior, but it's been remedied. BUT, that being said, changing the color of the outline shouldnt revert the shape following behavior to the previous behavior (where the shape of the element was ignored). that's what this issue is about, that change the color of it shouldnt effect the shape. there was a lot of fanfare once outlines follow element shape (they're ugly when they dont follow), but if we want that shape apparently we can't change the color because it forces paint down the old code path. hence the term side effects in the description: i changed the color but for some reason got a shape change.

[jensimmons]

It's still unclear what this proposal is about.

[jensimmons]

Are we to assume that this proposal is only about outline-color interop, as originally proposed. And not everything else discussed?

Are there any tests for outline-color? @argyleink you linked to all tests related to outlines. Which is not the same as a narrowly-scoped proposal for outline-color combined with outline: auto.

[argyleink]

Are we to assume that this proposal is only about outline-color interop, as originally proposed. And not everything else discussed?

I'd prefer it stays scoped that way yeah

Are there any tests for outline-color?

There are some, but I don't see any narrowly-scoped tests for outline-color combined with outline: auto specifically no. Adding some would hopefully illuminate this issue and provide something to align on.

[jensimmons]

Thanks for your response, Adam.

We are wondering if this is in fact testable, since it's deeply affected by operating system & context.

[jensimmons]

There are 3 areas that could use interop attention:

1. Only Chrome on macOS lets outline-color alone change the outline. Firefox and Safari ignore the color request and continue drawing their default outline styles
2. outline-color should allow the value of invert and only Firefox handles that correctly per spec, it does this by using currentColor
3. If authors do want to change the color of the outline, across browser, they currently must pass outline-style, which has the side effect of no longer matching the border radius of the focused element

Is this a to-do list of two items, or three items?

1. Make outline-color work in all browsers
2. Allow invert for outline-color
3. ??

Is there something for browsers to do for 3? Or are you just listing the suboptimal consequence of not doing 1 & 2? @argyleink

[argyleink]

are you just listing the suboptimal consequence of not doing 1 & 2

I think that's a fair view of bullet 3 yeah 👍🏻

[nairnandu]

Thank you for proposing Focus Outline for inclusion in Interop 2023.

We wanted to let you know that this proposal was not selected to be part of Interop this year. We had many strong proposals, and could not accept them all. This should not be taken as a comment on the technology as a whole, and resubmitting a proposal for this feature as part of a future round of Interop would be welcome.

For an overview of our process, see the proposal selection summary. Thank you again for contributing to Interop 2023!

Posted on behalf of the Interop team.