Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
benface opened this issue May 16, 2024 · 2 comments
Open

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

benface opened this issue May 16, 2024 · 2 comments
Labels
css-ui-4 Current Work

Comments

@benface
Copy link

benface commented May 16, 2024

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
Copy link
Contributor

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.

@Loirooriol Loirooriol added the css-ui-4 Current Work label May 16, 2024
@benface
Copy link
Author

benface commented May 16, 2024

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. 😁

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-ui-4 Current Work
Projects
None yet
Development

No branches or pull requests

2 participants