In short: The CSS Working Group has not yet reached a consensus on a name for the shorthand property.
While the concept is not new and has been suggested several times in the past, there is currently a proposal [css-sizing] Adding a 'size' shorthand for 'width'/'height' from the CSSWG (CSS Working Group).
Many aspects have been debated, but some key questions remain unanswered. Here are a few examples:
What should it be called?
Some of the suggestions for names include:
size: might conflict with the @page's size-propertydimensions: possibly too lengthy or difficult to rememberbox-size: could be confused with box-sizing
How will it function?
Should it be:
<box-size>: <width> <height>?
… or more closely related to properties like padding or margin:
<box-size>: <height> <width>?
Additionally, should it support an option to maintain aspect ratio?
Which vendors will adopt it?
- Which companies will back the proposal and implement the syntax?
- Will it improve the user experience enough to encourage widespread adoption?
The CSSWG recently mentioned the possibility of a shorthand notation in their Teleconference Minutes on 2017-08-16:
The group agreed that a shorthand for ‘width’/’height’ would be beneficial, but decided against using ‘size’ as the name. However, they were unable to come up with an alternative at the time.
That said, you can utilize a CSS pre-processor to simplify your workflow. For example, here's a LESS mixin I use:
.size(@a: null, @b: null) {
& when not (null = @a) {
width: @a;
}
& when (null = @b) {
height: @a;
}
& when not (null = @b) {
height: @b;
}
}
It can be used as follows:
.size(100%, 50%);
width: 100%;
height: 50%;
… and it also accommodates square elements:
.size(100%);
width: 100%;
height: 100%;