Re: [csswg-drafts] [css-grid][css-sizing] Aspect Ratio (#333)

_With a huge chance of side-tracking this thread (due to not really knowing where exactly to post this reply) or the risk of proposing something that got proposed before, here goes:_

Glad to see the addition of `aspect-ratio` being talked and discussed about, as the need is real _(once wrote [an extensive post on this](https://www.bram.us/2017/06/16/aspect-ratios-in-css-are-a-hack/) myself)_.

Thinking further on this, this solution is somewhat limited: it _only_ solves the aspect ratio problem, and nothing else outside of that.

A more broader solution – I think – *could* be the introduction of a `val()` function, which could be used to solving the `aspect-ratio` thing, but also other future things.

The `val()` function would work like the `var()` function (which reads the value of a custom property) but then for reading values from other properties. The `val()` function also differs from `var()` in such a way that it yields the **computed value** of the property. Recalculation would happen upon resize events and the like. Combine `val()` it with `calc()` and you're good to go.

In code, it would result in something like this:

```css
.box {
  width: 100%;
  height: calc(val(width) * 16 / 9);
}
```

Of course it needs some more tweaking and thought: What if you want percentages (for use within `rgba` for example)? Perhaps a second argument that defines the requested unit (say you want percentages or ems instead of pixels) could be added? Or a whole different function that converts units could be introduced _(`unit()` would be a nice one)_? Or … — Things might easily get over-complicated, which is not really feasible I guess.

I know, it's a bit side-tracky this reply, but I do see a future for this kind of addition. Don't let this comment hinder the release of `aspect-ratio` though, the sooner it lands the better! Maybe it could later be retrofitted as an underlying part of `aspect-ratio`? Quite sure all the smart people involved will have a clear idea on this all, or will immediately see a lot of flaws in my brainfart above, as you've already pondered about it quite a lot.

-- 
GitHub Notification of comment by bramus
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/333#issuecomment-505358952 using your GitHub account

Received on Tuesday, 25 June 2019 09:12:18 UTC