[css-ui] consider requiring that descendants do not contribute to outline
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
https://drafts.csswg.org/css-ui-4/#outline-props
Outlines are (intentionally) not required to be a particular shape, but there are some suggestions. One of those suggestions is that descendant boxes contribute to the outline. Firefox does this (although not for descendants whose containing block is an ancestor), but Chrome, Edge, and Safari all appear to ignore descendant boxes.
This is a Web compatibility problem for Firefox sometimes, particular when pages use descendants positioned off screen (e.g. with position: relative; left: -10000px) to provide text alternatives for elements whose background-image is important.
An uncomplicated test that renders differently in Firefox (the outline surrounds the overflowing content) from other browsers:
http://mcc.id.au/temp/pos-outline.html
<!DOCTYPE html>
<style>
div { background-color: yellow; width: 20px; height: 20px; outline: 1px solid blue; }
</style>
<div>abcdefghijklmnopqrstuvwxyz</div>
I think we should consider being a bit stricter about which boxes contribute to an outline.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the CSS UI Level 4 outline properties section and compare the behavior described in the linked pos-outline.html test across Firefox, Chrome, Edge, and Safari. Determine which descendant boxes the specification should require to contribute to an outline, then document the agreed behavior in the spec and confirm the compatibility concern is addressed.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100