Re: Add one line property for width and height

I like this idea. Is the Discourse forum still used, or would the best place to discuss this now be in a GitHub issue?
https://github.com/w3c/csswg-drafts/issues

I often write width and height on a single line like this, to keep them together:

.my-class {
  width: 10px; height: 10px;
  …
}


> On Dec 18, 2024, at 1:17 PM, Geoffrey Crofte <geoffrey.crofte@gmail.com> wrote:
> 
> 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 <mailto: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