Intent to Ship: CSS aspect-ratio property

[Christian Biesinger]

Contact emails

cbies...@chromium.org, chri...@chromium.org, ikilp...@chromium.org

Explainer


https://docs.google.com/document/d/1VqD0mfkIDyCxQBrrvDw5wEbhXBsmEYIhk6ahiX_fvco/edit#

Specification

https://drafts.csswg.org/css-sizing-4/#aspect-ratio

Summary

Normally, only certain replaced elements have an aspect ratio,
particularly images. For them, if only one of width and height is
specified, the other can be computed from it using the intrinsic
aspect ratio. This property allows explicitly specifying an aspect
ratio for any other element to get similar behavior.



Blink component

Blink>Layout

Search tags

aspect-ratio, aspect, ratio

TAG review

https://github.com/w3ctag/design-reviews/issues/559

TAG review status

Pending

Risks



Interoperability and Compatibility

The risk (for both compat and interop) is that the layout will be
wrong in browsers that do not support this property. This can be
mitigated by web developers using polyfills.



Gecko: In development
(https://bugzilla.mozilla.org/show_bug.cgi?id=aspect-ratio)

WebKit: No signal
(https://lists.webkit.org/pipermail/webkit-dev/2020-September/031393.html)

Web developers: Positive

Ergonomics

n/a



Activation

n/a



Security

n/a



Debuggability

Same as any other CSS property



Will this feature be supported on all six Blink platforms (Windows,
Mac, Linux, Chrome OS, Android, and Android WebView)?

Yes



Is this feature fully tested by web-platform-tests?

Yes

Tracking bug

https://crbug.com/1045668

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5738050678161408

Links to previous Intent discussions

Intent to prototype:
https://groups.google.com/a/chromium.org/d/msg/blink-dev/pD4UW52y8Uk/CPWozoVmBAAJ


This intent message was generated by Chrome Platform Status.

[Yoav Weiss]

On Wed, Oct 7, 2020 at 6:34 PM Christian Biesinger <cbies...@chromium.org> wrote:

Contact emails

cbies...@chromium.org, chri...@chromium.org, ikilp...@chromium.org

Explainer


https://docs.google.com/document/d/1VqD0mfkIDyCxQBrrvDw5wEbhXBsmEYIhk6ahiX_fvco/edit#

Specification

https://drafts.csswg.org/css-sizing-4/#aspect-ratio

Summary

Normally, only certain replaced elements have an aspect ratio,
particularly images. For them, if only one of width and height is
specified, the other can be computed from it using the intrinsic
aspect ratio. This property allows explicitly specifying an aspect
ratio for any other element to get similar behavior.

Will the aspect-ratio property also override the intrinsic aspect ratio in replaced elements?

The explainer is not very detailed on that front...

Blink component

Blink>Layout

Search tags

aspect-ratio, aspect, ratio

TAG review

https://github.com/w3ctag/design-reviews/issues/559

TAG review status

Pending

Risks



Interoperability and Compatibility

The risk (for both compat and interop) is that the layout will be
wrong in browsers that do not support this property. This can be
mitigated by web developers using polyfills.

How polyfillable is this? Is there a known polyfill we can point developers towards?

--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAPTJ0XFnhxD2NTZ7jm6sGGddpyFQQFhVLibsMz8KOCkbydzZsA%40mail.gmail.com.

[Christian Biesinger]

On Thu, Oct 8, 2020 at 1:28 PM Yoav Weiss <yo...@yoav.ws> wrote:
>
>
>
> On Wed, Oct 7, 2020 at 6:34 PM Christian Biesinger <cbies...@chromium.org> wrote:
>>
>> Contact emails
>>
>> cbies...@chromium.org, chri...@chromium.org, ikilp...@chromium.org
>>
>> Explainer
>>
>>
>> https://docs.google.com/document/d/1VqD0mfkIDyCxQBrrvDw5wEbhXBsmEYIhk6ahiX_fvco/edit#
>>
>> Specification
>>
>> https://drafts.csswg.org/css-sizing-4/#aspect-ratio
>>
>> Summary
>>
>> Normally, only certain replaced elements have an aspect ratio,
>> particularly images. For them, if only one of width and height is
>> specified, the other can be computed from it using the intrinsic
>> aspect ratio. This property allows explicitly specifying an aspect
>> ratio for any other element to get similar behavior.
>
>
> Will the aspect-ratio property also override the intrinsic aspect ratio in replaced elements?
> The explainer is not very detailed on that front...

The spec is clear on that. You told me that the explainer is more
about use cases and less about being a dumbed down spec :p

(The answer is that it will override it if using the "aspect-ratio:
1/1" syntax, but not if using the "aspect-ratio: auto 1/1" syntax.)

>
>>
>>
>>
>> Blink component
>>
>> Blink>Layout
>>
>> Search tags
>>
>> aspect-ratio, aspect, ratio
>>
>> TAG review
>>
>> https://github.com/w3ctag/design-reviews/issues/559
>>
>> TAG review status
>>
>> Pending
>>
>> Risks
>>
>>
>>
>> Interoperability and Compatibility
>>
>> The risk (for both compat and interop) is that the layout will be
>> wrong in browsers that do not support this property. This can be
>> mitigated by web developers using polyfills.
>
>
> How polyfillable is this? Is there a known polyfill we can point developers towards?

I have not looked into this. I assume it can be polyfilled using
ResizeObserver. The AMP team has workarounds that work in specific
cases but is not completely general.

Christian

[Yoav Weiss]

On Thu, Oct 8, 2020 at 2:04 PM Christian Biesinger <cbies...@google.com> wrote:

On Thu, Oct 8, 2020 at 1:28 PM Yoav Weiss <yo...@yoav.ws> wrote:
>
>
>
> On Wed, Oct 7, 2020 at 6:34 PM Christian Biesinger <cbies...@chromium.org> wrote:
>>
>> Contact emails
>>
>> cbies...@chromium.org, chri...@chromium.org, ikilp...@chromium.org
>>
>> Explainer
>>
>>
>> https://docs.google.com/document/d/1VqD0mfkIDyCxQBrrvDw5wEbhXBsmEYIhk6ahiX_fvco/edit#
>>
>> Specification
>>
>> https://drafts.csswg.org/css-sizing-4/#aspect-ratio
>>
>> Summary
>>
>> Normally, only certain replaced elements have an aspect ratio,
>> particularly images. For them, if only one of width and height is
>> specified, the other can be computed from it using the intrinsic
>> aspect ratio. This property allows explicitly specifying an aspect
>> ratio for any other element to get similar behavior.
>
>
> Will the aspect-ratio property also override the intrinsic aspect ratio in replaced elements?
> The explainer is not very detailed on that front...

The spec is clear on that. You told me that the explainer is more
about use cases and less about being a dumbed down spec :p

:D

 

(The answer is that it will override it if using the "aspect-ratio:
1/1" syntax, but not if using the "aspect-ratio: auto 1/1" syntax.)

OK, thanks!

[Una Kravets]

For cross-browser implementation, I would recommend using negated @supports -- i.e. `@supports not (aspect-ratio: 16 / 9) { ...fallback... }`. This way, the supported browsers won't get code from the clunkier workaround and non-supported browsers will just ignore the line. Here is a demo: https://codepen.io/una/pen/BazyaOM

- Una

[Manuel Rego Casasnovas]

Hi Christian,

I remember some discussion in the intent to prototype about 2 topics:
* Some aspect ratio bugs in Chromium already present before this work.
* The test suite and how comprehensive it is.

Do you have any update on those?

On 08/10/2020 16:34, 'Una Kravets' via blink-dev wrote:
> For cross-browser implementation, I would recommend using negated
> @supports -- i.e. `@supports not (aspect-ratio: 16 / 9) { ...fallback...
> }`. This way, the supported browsers won't get code from the clunkier
> workaround and non-supported browsers will just ignore the line. Here is
> a demo: https://codepen.io/una/pen/BazyaOM

Really nice example, we should link it from the chromestatus entry.

Thanks,
Rego

> <mailto:blink-dev+...@chromium.org>.

> To view this discussion on the web visit

> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/8bd9bf1c-46ad-4464-af9e-7e8076e849fen%40chromium.org
> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/8bd9bf1c-46ad-4464-af9e-7e8076e849fen%40chromium.org?utm_medium=email&utm_source=footer>.

[Christian Biesinger]

On Thu, Oct 8, 2020 at 9:03 PM Manuel Rego Casasnovas <re...@igalia.com> wrote:
>
> Hi Christian,
>
> I remember some discussion in the intent to prototype about 2 topics:
> * Some aspect ratio bugs in Chromium already present before this work.
> * The test suite and how comprehensive it is.
>
> Do you have any update on those?

Several of those bugs have since been fixed by David Grogan (and me,
in one case). The remaining ones seem mostly SVG-specific:
https://bugs.chromium.org/p/chromium/issues/list?q=Hotlist%3DAspectRatio&can=2

As for the test suite, both Mozilla and me have written a lot of tests:
https://wpt.fyi/results/css/css-sizing/aspect-ratio?label=experimental&label=master&aligned

I believe these to be pretty comprehensive. Five of them are failing
right now; the first two because do not support flex-basis: content
(ie. unrelated); the last three because of a previously-ambiguous spec
section that I will fix before shipping.

> On 08/10/2020 16:34, 'Una Kravets' via blink-dev wrote:
> > For cross-browser implementation, I would recommend using negated
> > @supports -- i.e. `@supports not (aspect-ratio: 16 / 9) { ...fallback...
> > }`. This way, the supported browsers won't get code from the clunkier
> > workaround and non-supported browsers will just ignore the line. Here is
> > a demo: https://codepen.io/una/pen/BazyaOM
>
> Really nice example, we should link it from the chromestatus entry.

Added it as a sample link.

Christian

[Daniel Bratell]

LGTM1

/Daniel

[Manuel Rego Casasnovas]

On 09/10/2020 15:00, Christian Biesinger wrote:
> On Thu, Oct 8, 2020 at 9:03 PM Manuel Rego Casasnovas <re...@igalia.com> wrote:
>>
>> Hi Christian,
>>
>> I remember some discussion in the intent to prototype about 2 topics:
>> * Some aspect ratio bugs in Chromium already present before this work.
>> * The test suite and how comprehensive it is.
>>
>> Do you have any update on those?
>
> Several of those bugs have since been fixed by David Grogan (and me,
> in one case). The remaining ones seem mostly SVG-specific:
> https://bugs.chromium.org/p/chromium/issues/list?q=Hotlist%3DAspectRatio&can=2

Great.

> As for the test suite, both Mozilla and me have written a lot of tests:
> https://wpt.fyi/results/css/css-sizing/aspect-ratio?label=experimental&label=master&aligned

Nice, I have a question though, why are they using ".tentative" suffix?
Shouldn't them be renamed now that the feature is getting ready to be
shipped?

Thanks,
Rego

[Yoav Weiss]

LGTM2 % the WPT rename that Rego pointed out.

[Alex Russell]

LGTM3

[Christian Biesinger]

Thanks all.

Tests have been renamed in https://crrev.com/c/2485571 and I am
enabling the feature in
https://chromium-review.googlesource.com/c/chromium/src/+/2485582

Christian