Shorthand for width/height CSS longhands

I posted a question about this on SO 3 years ago, happy to see this being proposed.

At the risk of upsetting people for reopening an old topic, I thought I would mention I think this has lot benefit especially as logical properties come in rather than writing inline-size and block-size.

@Crissov’s proposal of making the shorthand more useful as in #15 makes sense to me:[quote=“Crissov, post:15, topic:1160”] It would have slightly larger benefits, hence chances, if it (optionally) included more functionality. The three things first springing to my mind are aspect-ratio, box-sizing and related min- and max- properties (which are different from proposed min() and max() pseudo functions).

size: 300px; /* shorthand setting width = height = 300px min-width = min-height = 0? or 300px? max-width = max-height = 300px? or auto aspect-ratio = 1 box-sizing = content-box */

size: 400px 300px border-box; /* shorthand setting, among others, width = 400px, height = 300px aspect-ratio = 1.333… box-sizing = border-box */

size: 400px/30em/600px 4:3; /* shorthand setting min-width = 400px, min-height = 300px width = 30em, height = 22.5em max-width = 600px, max-height = 450px aspect-ratio = 1.333… */ [/quote]

Where: height = block-size width = inline-size min-height = min-block-size min-width = min-inline-size max-height = max-block-size max-width = max-inline-size

Currently aspect ratios are defined as a hack using padding it would be nice to assist these in a single property @tabatkins has there been any progression of aspect-ratio I can’t see anything on the mailing list since 2014?

Considering de-facto tempos of considering interesting ideas™ (moreso third-party proposals) in the world of web standards, a year or two ago is far from being old, it is a very, very recent. For example, after 10 years, we still don’t have a way to override a specific background layer without having to respecify all the layers.

Substantively, complicating things usually may make sense after a simpler thing is already accepted, specced, and implemented, but we are far even from that here.

As for aspect ratio (which I believe should be discussed in a separate topic though, as long as discussing anything at WICG makes sense at all), ability to preserve aspect ratio without a necessity to specify an explicit ratio in CSS would be useful on its own:

currently, if an image has both width and height specified (to reserve page space for the image so that page jumps once the image has been loaded are prevented), there is no way to preserve original aspect ratio when e.g. max-width is applied to the image, effectively overriding the original width while not affecting the original height. To prevent having disfigured proportions in such situations, we could use something like aspect-ratio: preserve (or aspect-ratio: original, or anything else, exact keyword doesn’t matter). But I’m almost sure there will be no such ability for many more years since those responsible are busy working hard on more important things™. :wink:

You don’t have to be a dick about…

width/height shorthand is a great idea if you ask me. WICG was called to life to not make things last a gazillion years before they’re specced or implemented.

[quote=“Michiel, post:24, topic:1160”]width/height shorthand is a great idea if you ask me.[/quote]Fwiw, I don’t care much about the size shorthand itself (this proposal was more like a sort of WICG test for me), but I’m glad you think this would be useful.

[quote=“Michiel, post:24, topic:1160”]WICG was called to life to not make things last a gazillion years before they’re specced or implemented.[/quote]We can have very good goals, but what actually matters is substantive results. For now, WICG looks like just a way to separate community of web-developers from community of implementors and spec editors (who are still using mailing lists).

I roughed out a specification for this here which clears up @tabatkins’s definition of aspect ratio using newer terms as found in logical properties and the in-flow and out-of-flow usage in flex etc.

This specifies that:

  • one ‘…-size-dimension’ specifies inline/block-size to be the same
  • two ‘…-size-dimension’ specifies them each respectively


  • ‘inline-size’/‘block-size’ respecively
  • ‘aspect-ratio’
  • ‘min-…-size’/‘max-…-size’
  • ‘min-…-size’/‘inline-size’/‘max-…-size’

This should alow developers to quickly specify max and min without needing to specify the main size.

@marcosc would you be able to have a quick look over this when/if you get a chance?

I have created a quick demo of how the attribute would work here:

(Works in Chrome and Firefox, Safari not currently supported)

1 Like

@jonathank, would you like to begin formal incubation? If so, I’ve sent you an invite to the WICG so you can transfer the repository over.

Would you be willing to continue to drive it? Eventually it would need to go to the CSS WG.


Yup totally happy to move it over and drive it. The RICG is interested in the outcome of the work as well as coming up with usecases for implementing aspect ratios:

Also Github requires me to have admin access to move the repo over now :frowning:

As a quick update the demo has moved:

And the draft proposal:

1 Like