Re: Add one line property for width and height

There's a CSSWG issue tracking tihs request here:
    https://github.com/w3c/csswg-drafts/issues/820

I think the latest branch of the thread starts roughly here:
    https://github.com/w3c/csswg-drafts/issues/820#issuecomment-810626883

I can flag it for the CSSWG agenda. (Note that we do have quite a backlog atm,
though, so it may take awhile to get to the top.)

~fantasai

On 12/18/24 15:47, Samuel Bradshaw wrote:
> 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 <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/ 
>> <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 <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
>>
>

Received on Thursday, 19 December 2024 15:38:27 UTC