W3C home > Mailing lists > Public > public-css-archive@w3.org > June 2018

Re: [csswg-drafts] [css-grid][css-sizing] Aspect Ratio

From: Tobi Reif via GitHub <sysbot+gh@w3.org>
Date: Mon, 25 Jun 2018 09:33:26 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-399891259-1529919206-sysbot+gh@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:
-> 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

This archive was generated by hypermail 2.3.1 : Wednesday, 9 October 2019 08:16:44 UTC