- From: Tobi Reif via GitHub <sysbot+gh@w3.org>
- Date: Mon, 25 Jun 2018 09:33:26 +0000
- To: public-css-archive@w3.org
> This specific example of ew unit confuses me.
It's code from an actual project, and it works 😀
The more typical element query would look like this, for example:
```
@element .page and (max-width: 422px) {
/* Inside this block, the element-width unit "ew" is based on the .page element. */
}
```
> Are you setting the img to 30% of the width of the .page element?
Yep, that's what this EQCSS-powered code does.
> So the img ew unit comes from the parents width?
It comes from the .page element, which could be the parent of the image element, but it could also be a far higher ancestor for example.
The docs are at https://elementqueries.com/ -> "ew (element width)" "EW Units",
and (with more info) at https://tomhodgins.github.io/element-queries-spec/element-queries.html#ew .
Some more instances of "ew" units in use:
https://tobireif.com/demos/grid/view_demo_source/
-> search-in-page for all "ew;" .
> Regardless, I'd be more interested in a property or method [aspect-ratio specific]
Having property (or set of properties) specifically for aspect-ratio would be great!
The "ew" unit is a fundamental part of element queries / container queries, and it could also be used for ensuring any aspect ratio:
```
@element #foo {
#foo {
height: 100ew;
}
}
```
... but having one or more properties specifically for aspect-ratio would be even better (and I hope we'll get native element queries including element-width units in any case).
--
GitHub Notification of comment by tobireif
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/333#issuecomment-399891259 using your GitHub account
Received on Monday, 25 June 2018 09:33:32 UTC