Re: [csswg-drafts] [css-values-4] <length> add rw and rh to build responsive components

I've experimented with this idea, calling them `EW`, `EH`, `EMIN`, and `EMAX` for 'Element', and they function similar to the viewport-percentage units.

Check out my dream spec for them here: https://tomhodgins.github.io/element-queries-spec/element-queries.html#element-percentage-units

The idea of using an element-based unit to size things _does_ let you build scalable layouts as though the element was its own viewport. It allows _responsive border widths_ which are otherwise tricky to achieve, and is really good for scaling text headlines inside non-full-width containers like Modal windows (where I first needed them most).

As a concept, it's easy to achieve by somehow remembering or being aware of an elements `offsetWidth` and dividing by 100.

- [EW, EH, EMIN, EMAX unit test](https://codepen.io/tomhodgins/pen/YGgLrW)
- [Responsive borders with EW](https://codepen.io/tomhodgins/pen/YNKVMQ)
- [Another example using a different library](https://codepen.io/tomhodgins/pen/mmXVjg)

So element-percentage units like this would be benefit, and a natural companion to the units CSS already has. After experimenting with them and using them in a few designs it's hard to believe this isn't something already in CSS the whole time!

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

Received on Friday, 11 August 2017 14:17:29 UTC