[css-sizing] Introducing box, box-size, box-width and box-height Shorthand Properties
Nobody has claimed this yet.
- Dominant language
- Bikeshed
- Stars
- 4.9k
- Forks
- 816
- PR merge metrics
- PR metrics pending
Description
- css-sizing
[min-|max-](width|height),size,box-sizing - css-sizing-4
aspect-ratio - MQ:
aspect-ratiofeature - #820
sizeshorthand - #333
aspect-ratioproperty - #1173 aspect-ratio units,
ar,ew,eh,w,h… - Project
- WICG aspect ratios
Apparently, size will be a plain and simple shorthand property to set width and height at once (and nothing more), i. e. either of
size: <'width'> <'height'>?
size: <'height'> <'width'>?
with
width, height,
min-width, min-height: auto | <box-dimension>
max-width, max-height: none | <box-dimension>
<box-dimension>: <length-percentage> | min-content | max-content | fit-content(<length-percentage>)
<box-dimension-4>: <box-dimension> | contain | stretch | fit-content
aspect-ratio: auto | <ratio>
<ratio>: [<positive-integer> / <positive-integer>] | <number>
box-sizing: content-box | border-box
Iʼve suggested before that introducing a new property only makes actual sense if it offers additional capabilities. If size shall not be that versatile, I propose to add four new box- properties for convenience:
box: <'box-size'> || <'box-sizing'>
box-size: <'size'> | <'aspect-ratio'> | [<'box-width'> <'aspect-ratio'>] | [<'aspect-ratio'> <'box-height'>]
box-width, box-height: <box-dimension>{1,3} | auto
box-width: <'width'> | [<'min-width'> <'max-width'>] | [<'min-width'> <'width'> <'max-width'>]
box-height: <'height'> | [<'min-height'> <'max-height'>] | [<'min-height'> <'height'> <'max-height'>]
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 by reading the linked CSS Sizing and Media Queries specifications, then review related issues #820, #333, and #1173 and the referenced project. The proposal needs a standards decision on the shorthand properties and their grammar; done would require the agreed specification changes rather than merely implementing an isolated edit.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css
- Domain
- documentation, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100