[css-ui] Proposal: allow multiple outlines per element

[benface]

Multiple borders would be a Pandora's box because borders contribute to the box model, but outlines don't, so I can't think of a reason why it's not possible to set multiple outlines per element, like we can with background and box-shadow. A use case would be a focus ring made of two outlines: a thin (1px), fully opaque inner one, and a thicker, translucent outer one.

[Loirooriol]

Backgrounds and shadows are well-defined, outlines aren't:

This specification does not define the exact position or shape of the outline This specification does not define how multiple overlapping outlines are drawn or how outlines are drawn for boxes that are partially obscured behind other elements.

In fact outline-style: auto is entirely left up to the UA.

I'm afraid that with multiple outlines an author may expect a certain visual composition, but in other browsers it will be utterly broken.

[benface]

Then I amend my proposal to first define the exact position and shape of the outline, as well as how multiple overlapping outlines are drawn, and then allow multiple outlines per element. 😁

[nchevobbe]

That's something that would be really helpful. At the moment, we have to resort to using a mix of outline + box-shadow to get "bulletproof" focus indicators (see https://www.sarasoueidan.com/blog/focus-indicators/#a-%E2%80%98universal%E2%80%99-focus-indicator)

[Loirooriol]

Since we can’t use the outline property to provide two outlines of different colors

@nchevobbe This could be addressed by allowing <image-1D> in outline-color, like for border-color: https://drafts.csswg.org/css-borders-4/#border-color

For example, outline: 6px solid stripes(black, white). IMO this seems more doable than multiple outlines (once browsers implement <image-1D> in borders, which AFAIK hasn't happened yet).

A use case would be a focus ring made of two outlines: a thin (1px), fully opaque inner one, and a thicker, translucent outer one

@benface Likewise, this could be outline: 6px solid stripes(black 1px, rgba(255, 255, 255, 0.5))

[benface]

@Loirooriol – Interesting; would allowing <image-1D> not require outlines to be well-defined, like backgrounds and shadows? Or is there something else about multiple outlines that is more tricky?

[Loirooriol]

To clarify what I said, outlines being loosely defined doesn't make the implementation of multiple outlines more difficult. It's just that the result may not look at all like the author expected on some browsers.

Like, imagine you want a 3px black inner outline and a 3px white outer outline. You could try 2 outlines, the inner one with an offset of 0, and the outer one with an offset of 3px. Oh, but the offset is from the border edge, and the outline is not guaranteed to have the shape of the border edge. I recall some browsers can put (or used to) the outlines further away if there are overflowing descendants. Then your 2 outlines could potentially end up overlapping in some places.

Or think outline-style: auto, it totally ignores outline-width, so the offset of the outer outline could be totally wrong.

The good thing about <image-1D> is that, whatever the shape of the outline the browser decides, it can be painted in different colors. Also, browsers are allowed to ignore outline-color for outline-style: auto, avoiding the problem of auto being UA-specific.