design-reviews#559: Review for CSS property "aspect-ratio"

#559: Review for CSS property "aspect-ratio"

Visit on Github.

Opened Sep 22, 2020

Saluton TAG!

I'm requesting a TAG review of the aspect-ratio CSS property.

[One paragraph summary of idea, ideally copy-pasted from Explainer introduction]

Explainer¹ (minimally containing user needs and example code): https://docs.google.com/document/d/1VqD0mfkIDyCxQBrrvDw5wEbhXBsmEYIhk6ahiX_fvco/edit#
Specification URL: https://drafts.csswg.org/css-sizing-4/#aspect-ratio
Tests: https://wpt.fyi/results/css/css-sizing/aspect-ratio?label=experimental&label=master&aligned
Security and Privacy self-review²: n/a, this only affects sizing of elements
GitHub repo (if you prefer feedback filed there): n/a (or https://github.com/w3c/csswg-drafts/issues)
Primary contacts (and their relationship to the specification):
- Tab Atkins (@tabatkins), Google LLC, Editor
- Elika Etemad (@fantasai), n/a (Editor)
- Jen Simmons (@jensimmons), Apple (previously at Mozilla)
- Christian Biesinger (@cbiesinger), Google LLC (implementor)
Organization(s)/project(s) driving the specification: CSSWG and Google LLC
Key pieces of existing multi-stakeholder review or discussion of this specification: The CSSWG has been involved in discussing this spec, including people from Mozilla and Google. Mozilla and Google are currently implementing.
External status/issue trackers for this specification (publicly visible, e.g. Chrome Status): https://www.chromestatus.com/feature/5738050678161408

Further details:

I have reviewed the TAG's API Design Principles
Relevant time constraints or deadlines: Preferably in the next couple weeks, we'd like to ship soon. Sorry I didn't file this sooner.
The group where the work on this specification is currently being done: CSSWG
The group where standardization of this work is intended to be done (if current group is a community group or other incubation venue): CSSWG
Major unresolved issues with or opposition to this specification: none
This work is being funded by: Google

You should also know that...

This form feels overly complex for one fairly straightforward CSS property.

We'd prefer the TAG provide feedback as (please delete all but the desired option):

💬 leave review feedback as a comment in this issue and @-notify @cbiesinger @chrishtr

Discussions

Discussed Nov 9, 2020 (See Github)

Tess: I like it. The capability of using tha adder function... It a good addition to CSS. Solid spec work.

Rossen: Agree. I was there from the beginning. Quite comfortable.

Tess: We might be too close to be objective.

Tess: Some elements have an intrinsic aspect ratio. e.g. an image. some don't, eg. div. This property allows you to set an override. If you set an aspect ration then the set aspect ratio wins, if not then the intrinsic aspect ratio wins. Important for images for example. Other ways to do this are very tricky to use. This property slices through that - you can just set the ratio and you get that for free. This is useful not just in new layout systems. It's very helpful in normal flow layout. As far as syntax it's about as simple as it can be.

Dan: any inetraction issues?

Tess: when you over-specify - when you set a width and height and an aspect ratio then width and height win. It might be difficult where you're setting height and width in one stylesheet and aspect ratio somewhere else. That's the only one I can think of. Don't know the state of developer tools support.

Yves: syntax, is it the same as media query aspect ratio?

Rossen: I don't think so.

Yves: just at a syntax level to figure out if it's a ratio..

Tess: double-checking... Yes, it's the same CSS syntax.

Dan: suggest we set it to proposed closed and close it in the plenary.

Tess: sounds good.

Tess: they suggest that the form is too complex - should we have a lighter weight form for a straightforward thing like this?

[discussion on this]

Tess: this has been extensively vetted by layout experts.

Comment by @chrishtr Jan 22, 2021 (See Github)

Please also include review of the interpolation curve for animations of aspect ratios.

Comment by @hober Jan 26, 2021 (See Github)

Hi,

Explainer¹ (minimally containing user needs and example code): https://docs.google.com/document/d/1VqD0mfkIDyCxQBrrvDw5wEbhXBsmEYIhk6ahiX_fvco/edit#

We generally recommend that folks make their explainers available in plain text, Markdown or HTML; Google Docs is not globally accessible to web standards contributors.

Comment by @hober Jan 26, 2021 (See Github)

@LeaVerou and I looked at this during a breakout of our vF2F today, and we're happy with where the interpolation issue ended up in https://github.com/w3c/csswg-drafts/commit/a898cb0d6110b5c4ac20c1c63228e4c9c936d779 and https://github.com/w3c/csswg-drafts/commit/84a573d49fed1499efe44a065a36763a7acaaee7 .

Comment by @cbiesinger Jan 27, 2021 (See Github)

Hi,

Explainer¹ (minimally containing user needs and example code): https://docs.google.com/document/d/1VqD0mfkIDyCxQBrrvDw5wEbhXBsmEYIhk6ahiX_fvco/edit#

We generally recommend that folks make their explainers available in plain text, Markdown or HTML; Google Docs is not globally accessible to web standards contributors.

IMO an explainer for this property is not necessary. Also I don't have a good place to host Markdown/HTML docs.

Comment by @cbiesinger Feb 12, 2021 (See Github)

Discussed Feb 15, 2021 (See Github)

Lea: Tess & I discussed at vf2f. Some issues with the explaienr but in terms of the CSS property we are happy. SO maybe we should close this?

Tess: more general meta issue with explainers coming from CSS. Not unique to this issue. Don't think it's worth delaying this issue on that bigger question.

Lea: should I close?

resolved to close

Comment by @LeaVerou Feb 15, 2021 (See Github)

As previously stated, we are happy with the current state. In a breakout today, we resolved to close this issue, and will continue to monitor open issues.

There is a meta-issue about explainers which we noticed is present in many CSS WG review requests. Please include an explainer in Markdown, HTML, or plain text with all design review requests. We are going to modify our Explainer explainer to clarify this further (per https://github.com/w3ctag/w3ctag.github.io/issues/30 ).