w3c / w3c/csswg-drafts

[css-sizing] Introducing box, box-size, box-width and box-height Shorthand Properties

Open
#4,428 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

css-sizing-4
Dominant language
Bikeshed
Stars
4.9k
Forks
816
PR merge metrics
PR metrics pending

Description

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.