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

[Crissov]

• css-sizing [min-|max-](width|height), size, box-sizing
• css-sizing-4 aspect-ratio
• MQ: aspect-ratio feature
• [css-sizing] Adding a 'size' shorthand for 'width'/'height' #820 size shorthand
• [css-grid][css-sizing] Aspect Ratio #333 aspect-ratio property
• [css-grid] aspect ratio units needed #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'>]

[Crissov]

Occasionally, it is more convenient or common to specify a box by an aspect ratio and a single linear or planar length value:

• One might want to match the area of a different shape, e. g. from SVG.
• TV and other screen sizes are often referenced by diameter or diagonal and (implied default) aspect ratio.

It could therefore make sense to define either size or box-size in a different way:

box-size: … 
 | <'box-width'> by <'box-height'> <'aspect-ratio'>
 | <'width'> <'height'> at <'aspect-ratio'>
 | <'box-diameter'> at <'aspect-ratio'>
 | <length> @ <'aspect-ratio'>

or similar. This implies that a single length would be treated differently from the same length provided twice:

• 10px 10px has equal edges of 10px.
• 10px 4/3 has edges of 8px and 6px.
• 10px has equal edges of ca. 7.07px.