# Re: aspect-ratio property

From: Matthew Wilcox <elvendil@gmail.com>
Date: Thu, 5 Jan 2012 16:44:33 +0000
Message-ID: <CAMCRKiKtfG8jqpr3FsMq0bitC_eE2oxEXm=S8rgLA4oLoN=Ceg@mail.gmail.com>
To: Lea Verou <leaverou@gmail.com>

```Calc will work for this, you're right - as long as it can pull width
(or height, or whatever it is we want to get the value of to work
with).

My point isn't so much the math mechanism as the fact that if we can
get CSS to reference other elements through selectors, then it solves
a lot of problems from a design perspective without needing to
introduce a dozen layout modules and multiple new core syntax.

For example (and expanding beyond the original point):

div.foo { height : get("div.bar", height); } // make this div the same
height as div.bar

div { width : get(self, height); } // might set width equal to boxes own height

Or to get back to solving the original Aspect Ratio problem:

div { height : calc(get(self, width)/2); } // set aspect ratio of 2:1,
based on width

This may well be very pie-in-the-sky, but it's a very powerful concept
that makes for extremely flexible use.

On 5 January 2012 16:18, Lea Verou <leaverou@gmail.com> wrote:
> On 5/1/12 12:36, Matthew Wilcox wrote:
>>
>> I'm fresh to the discussion, but I'd suggest that a better solution
>> than a new property would be to work with the existing ones.
>>
>> div { width : 100%; height : width/2; }
>>
>> This seems much more flexible and easier to understand?
>>
> calc() was introduced for a reason. Your example should at least be height:
> calc(width/2); which is much easier to parse and hardly hinders readability.
> As for introducing a `width` keyword, I'd imagine that doesn’t scale very
> well: Which properties would become keywords? All? Just `width` and
> `height`? Why, are they "special"? I think if we’re going to do anything
> like that, we need a special notation for it. I’d propose current(), like a
> generalization of currentColor, accepting all properties. So, your example
> could be height: calc(current(width)/2);
> Yes, there could be cycles like width: calc(2*current(width); but they can
> be detected and removed quite trivially.
>
> However, I’ve discussed this with implementors a while back (it’s one of the
> highest items in my CSS wishlist) and it seems pretty much impossible, at
> least if layout properties are included, as per your suggestion. Even
> currentColor on its own is hard (I remember Simon Fraser writing "I hate
> currentColor :(" in one of my Webkit bug reports about it.
>
> --
> Lea Verou (http://lea.verou.me | @LeaVerou)
>
```
Received on Thursday, 5 January 2012 16:45:00 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:08:09 UTC