Re: Add one line property for width and height

Hello,

There is an old discussion about that from 2015:
https://discourse.wicg.io/t/shorthand-for-width-height-css-longhands/1160/

In short in October 2015, a proposal was introduced on the WICG Discourse
forum to add a size CSS property as a shorthand for setting both width and
height. The suggested syntax was:

.element {
  size: 10px; /* Sets both width and height to 10px */
}

.element {
  size: 2em 3em; /* Sets width to 2em and height to 3em */
}

This shorthand aimed to reduce redundancy when defining identical width and
height values and to provide a more concise way to specify these
dimensions, similar to existing shorthands like margin and padding. The
concept had been implemented in tools like PostCSS via the postcss-size
plugin.

A participant inquired whether this size property could also define an
element's aspect ratio. The proposer clarified that the size property was
intended solely as a shorthand for width and height, not for aspect ratio
control.

By November 2015, the proposer expressed frustration over the lack of
response from decision-makers, specifically the CSS Working Group (CSSWG).
In December, a community member reminded the proposer that the WICG is a
community-driven platform without formal decision-makers and that gaining
support from browser vendors and the broader community is essential for
such proposals to advance. They also noted that many standards proposals do
not progress for various reasons, including limited perceived benefit or
implementation challenges.

The proposer responded by emphasizing that while the WICG facilitates
discussions, the CSSWG comprises decision-makers who determine the adoption
of such proposals. They also mentioned that the size property had been
implemented in preprocessors like PostCSS, indicating some level of
interest and utility within the developer community.

As of now, the size shorthand property has not been adopted into the
official CSS specifications. However, developers can achieve similar
functionality using preprocessors or custom mixins in CSS. For instance, in
SCSS, one can define a mixin to set both dimensions:

@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

.element {
  @include size(10px); // Sets both width and height to 10px
}

.element {
  @include size(2em, 3em); // Sets width to 2em and height to 3em
}

This approach allows for concise and maintainable code without relying on a
dedicated size property.

I was sure I read something about a CSS support but I can't find anything
right now.
The main issue I see is that size property is used alongside @page media
query to define a page size.

E.g.

size: Letter;

Or

size: 6in 9in;

This means the property already is a shorthand for the width and height,
but for a page.

https://developer.mozilla.org/en-US/docs/Web/CSS/@page/size

Have a good day!
Geoffrey


On Wed, Dec 18, 2024, 19:53 Mohsin Nawaz <mohsin04.diligenttek@gmail.com>
wrote:

> During my development journey, I have seen that a lot of times we have to
> use width and height property & there is no one line property to use them
> both at a single time in a single line.
>
> My suggestion is to create a one liner property for ex: length: width
> height;
>
> Thank You
>