New CSS declaration for width and height

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
6 messages Options
Reply | Threaded
Open this post in threaded view
|

New CSS declaration for width and height

Giovanna Ruiu
Good morning, 

I am Giovanna, a Front End Developer from London.

I would like to suggest a new CSS declarations to use in case you have to specify width and height, and these two must be exactly the same.

For example, when you cannot leave either width or height to auto, and have to specify for both exactly the same value.

It would be handy to have a declaration such as “size: 100px” which would mean “width - height: 100px”.

Even if by using variables we would have to change only that once, I think this little line could be of use in many cases and would certainly save one line of code, which is always good.

The web is full of squares and I think developers would benefit from having this little declaration ready to use.

Hopefully you will take this into consideration, thank you!


Giovanna
Reply | Threaded
Open this post in threaded view
|

Re: New CSS declaration for width and height

Brad Kemper


On Apr 12, 2016, at 12:47 PM, Giovanna Ruiu <[hidden email]> wrote:

Good morning, 

I am Giovanna, a Front End Developer from London.

I would like to suggest a new CSS declarations to use in case you have to specify width and height, and these two must be exactly the same.

For example, when you cannot leave either width or height to auto, and have to specify for both exactly the same value.

It would be handy to have a declaration such as “size: 100px” which would mean “width - height: 100px”.

Even if by using variables we would have to change only that once, I think this little line could be of use in many cases and would certainly save one line of code, which is always good.

The web is full of squares and I think developers would benefit from having this little declaration ready to use.

Hopefully you will take this into consideration, thank you!

I think this is not a bad idea. 'size' could be a 2-value shorthand for width and height, where giving a single value is the same as giving the same value twice. So 'size: 100px' would be the same as 'size: 100px 100px', which would be the same as 'width:100px; height:100px'.  
Reply | Threaded
Open this post in threaded view
|

Re: New CSS declaration for width and height

Sebastian Zartner-3
On 19 April 2016 at 21:58, Brad Kemper <[hidden email]> wrote:


On Apr 12, 2016, at 12:47 PM, Giovanna Ruiu <[hidden email]> wrote:

Good morning, 

I am Giovanna, a Front End Developer from London.

I would like to suggest a new CSS declarations to use in case you have to specify width and height, and these two must be exactly the same.

For example, when you cannot leave either width or height to auto, and have to specify for both exactly the same value.

It would be handy to have a declaration such as “size: 100px” which would mean “width - height: 100px”.

Even if by using variables we would have to change only that once, I think this little line could be of use in many cases and would certainly save one line of code, which is always good.

The web is full of squares and I think developers would benefit from having this little declaration ready to use.

Hopefully you will take this into consideration, thank you!

I think this is not a bad idea. 'size' could be a 2-value shorthand for width and height, where giving a single value is the same as giving the same value twice. So 'size: 100px' would be the same as 'size: 100px 100px', which would be the same as 'width:100px; height:100px'.  

I didn't read through all of them, though the proposals I saw so far were:
  1. A new property for setting both values at the same time (like in this thread)
  2. New functions width() and height() taking a percentage indicating a portion of the related dimension.
  3. New units w and h and/or %w and %h indicating a portion of the related dimension.
The latter two imply issues related to cyclic resolution, but allow more flexibility in regard of constraining width and height with each other.

Sebastian
Reply | Threaded
Open this post in threaded view
|

Re: New CSS declaration for width and height

Marat Tanalin | tanalin.com
20.04.2016, 00:50, "Sebastian Zartner" <[hidden email]>:
> Note that there were already earlier discussions about constraining width and height:
> https://lists.w3.org/Archives/Public/www-style/2014Dec/0004.html
> https://lists.w3.org/Archives/Public/www-style/2014Dec/0290.html
> https://lists.w3.org/Archives/Public/www-style/2012Sep/0034.html
> https://lists.w3.org/Archives/Public/www-style/2011Aug/0562.html

There is also a proposal about the `size` shorthand at WICG forum:

https://discourse.wicg.io/t/1160

There is also a PostCSS plugin emulating the feature:

https://github.com/postcss/postcss-size

Reply | Threaded
Open this post in threaded view
|

Re: New CSS declaration for width and height

Matthew Robb

It would be great if size could be tied into aspect ratio. Then height and width become long forms of size sub properties and/or aliases for size-x and size-y.

On Apr 19, 2016 6:19 PM, "Marat Tanalin" <[hidden email]> wrote:
20.04.2016, 00:50, "Sebastian Zartner" <[hidden email]>:
> Note that there were already earlier discussions about constraining width and height:
> https://lists.w3.org/Archives/Public/www-style/2014Dec/0004.html
> https://lists.w3.org/Archives/Public/www-style/2014Dec/0290.html
> https://lists.w3.org/Archives/Public/www-style/2012Sep/0034.html
> https://lists.w3.org/Archives/Public/www-style/2011Aug/0562.html

There is also a proposal about the `size` shorthand at WICG forum:

https://discourse.wicg.io/t/1160

There is also a PostCSS plugin emulating the feature:

https://github.com/postcss/postcss-size

Reply | Threaded
Open this post in threaded view
|

Re: New CSS declaration for width and height

Rachel Nabors
I've been meaning to request aspect ratios for elements for awhile now. Currently to make responsive sprited elements I have to do the padding hack (padding percentages being based on width) on a pseudo element inside. It's grossly over complicated.

I am all about a way to set something's aspect ratio, which would also allow people to set height to equal width (perhaps the keyword "square" could be used!). It's would be useful in many more situations.
On Wed, Apr 20, 2016 at 6:29 AM Matthew Robb <[hidden email]> wrote:

It would be great if size could be tied into aspect ratio. Then height and width become long forms of size sub properties and/or aliases for size-x and size-y.

On Apr 19, 2016 6:19 PM, "Marat Tanalin" <[hidden email]> wrote:
20.04.2016, 00:50, "Sebastian Zartner" <[hidden email]>:
> Note that there were already earlier discussions about constraining width and height:
> https://lists.w3.org/Archives/Public/www-style/2014Dec/0004.html
> https://lists.w3.org/Archives/Public/www-style/2014Dec/0290.html
> https://lists.w3.org/Archives/Public/www-style/2012Sep/0034.html
> https://lists.w3.org/Archives/Public/www-style/2011Aug/0562.html

There is also a proposal about the `size` shorthand at WICG forum:

https://discourse.wicg.io/t/1160

There is also a PostCSS plugin emulating the feature:

https://github.com/postcss/postcss-size

--
Curator of Web Animation Weekly
Speaking & Workshops
• Apr 05 –06 SmashingConf, San Francisco
• Apr 21 Frontend Masters, online, CSS Animations and Transitions Master Class
• May 18 –20 Front-Trends Keynote, Warsaw
• Jun 01 CSSconf Nordic, Oslo