Intent to Ship: CSS Values and Units Module Level 4: Small/Large/Dynamic/Logical viewport units

2,469 views

Skip to first unread message

Anders Hartvoll Ruud

unread,

Sep 26, 2022, 6:41:28 AM9/26/22

to blink-dev

Summary

Support for sv* units, lv* units, dv* units and the logical vi/vb units.

Blink component

Blink>CSS

Motivation

Mobile browsers today typically have UI elements which dynamically hide themselves when the user scrolls the page (e.g. the top URL bar on Android). This presents a challenge to authors wishing to size and position something relative to “the viewport”, since there can be multiple definitions of “the viewport” depending on the state of these dynamic UI elements.

The new viewport units allow authors to size/position elements according to the viewport appropriate for their use-case:

Small: the viewport as it would be with dynamic UI fully expanded.
Large: the viewport as it would be with dynamic UI fully contracted.
Dynamic: the viewport as it is according to the current state of the dynamic UI.

The new viewport units are also part of Interop 2022.

TAG review

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

TAG review status

Closed with no issues.

Risks

Interoperability and Compatibility

The viewport units are sized relative to the initial containing block, and different browsers resize the initial containing block in different situations. In particular, opening/closing the virtual keyboard will resize the ICB in Chrome for Android and Firefox for Android, but not in Safari for iOS nor in Chrome for ChromeOS.
See also Intent to Ship: Android OSK resizes visual viewport by default + <meta> opt-out.

Gecko: Shipped/Shipping (https://www.mozilla.org/en-US/firefox/101.0/releasenotes/)

WebKit: Shipped/Shipping (https://webkit.org/blog/12669/new-webkit-features-in-safari-15-5)

Web developers: “Difficulties dealing with viewport sizing are prominent in both the MDN Browser Compatibility Report 2020 and the new State of CSS 2021 survey.” [1]

Other signals:

WebView application risks

N/A

Debuggability

No special DevTools support is needed.

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

Everything that can be tested with WPTs is covered. However, it’s impossible to control dynamic UI elements from a WPT.

Flag name

CSSViewportUnits4

Requires code in //chrome?

False

Tracking bug

https://bugs.chromium.org/p/chromium/issues/detail?id=1093055

Estimated milestones

M108

Link to entry on the Chrome Platform Status

https://chromestatus.com/feature/5170718078140416

Mike West

unread,

Sep 27, 2022, 2:09:22 AM9/27/22

to blink-dev, Anders Hartvoll Ruud

LGTM1.

It's great to see us following along with WebKit and Gecko's implementations of these viewport units. The coverage in WPT looks reasonably solid (https://wpt.fyi/results/css/css-values?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&view=interop&q=label%3Ainterop-2022-viewport), and developer need is clearly demonstrated. Thanks for getting this out the door!

-mike

Yoav Weiss

unread,

Sep 27, 2022, 2:35:16 AM9/27/22

to Mike West, blink-dev, Anders Hartvoll Ruud

LGTM2

Yay for interop!!

--
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/dcc0f4aa-a1ca-4c24-a959-209dc8249f77n%40chromium.org.

Manuel Rego Casasnovas

unread,

Sep 27, 2022, 2:43:51 AM9/27/22

to Yoav Weiss, Mike West, blink-dev, Anders Hartvoll Ruud

LGTM3

On 27/09/2022 08:34, Yoav Weiss wrote:
> LGTM2
>
> Yay for interop!!
>
> On Tue, Sep 27, 2022 at 8:09 AM Mike West <mk...@chromium.org
> <mailto:mk...@chromium.org>> wrote:
>
> LGTM1.
>
> It's great to see us following along with WebKit and Gecko's
> implementations of these viewport units. The coverage in WPT looks
> reasonably solid

> (https://wpt.fyi/results/css/css-values?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&view=interop&q=label%3Ainterop-2022-viewport <https://wpt.fyi/results/css/css-values?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&view=interop&q=label%3Ainterop-2022-viewport>), and developer need is clearly demonstrated. Thanks for getting this out the door!

>
> -mike
>
> On Monday, September 26, 2022 at 12:41:28 PM UTC+2 Anders Hartvoll
> Ruud wrote:
>
>
> Contact emails
>

> and...@chromium.org <mailto:and...@chromium.org>
>
>
> Explainer
>
> https://github.com/w3ctag/design-reviews/issues/706#issuecomment-1082421111 <https://github.com/w3ctag/design-reviews/issues/706#issuecomment-1082421111>
>
> https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/ <https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/>

>
>
> Specification
>
> https://drafts.csswg.org/css-values-4/#viewport-relative-lengths
> <https://drafts.csswg.org/css-values-4/#viewport-relative-lengths>
>
>
> Summary
>
> Support for sv* units, lv* units, dv* units and the logical
> vi/vb units.
>
>
> Blink component
>
> Blink>CSS

> <https://bugs.chromium.org/p/chromium/issues/list?q=component:Blink%3ECSS>

>
>
> Motivation
>
> Mobile browsers today typically have UI elements which
> dynamically hide themselves when the user scrolls the page (e.g.
> the top URL bar on Android). This presents a challenge to
> authors wishing to size and position something relative to “the
> viewport”, since there can be multiple definitions of “the
> viewport” depending on the state of these dynamic UI elements.
>
>
> The new viewport units allow authors to size/position elements
> according to the viewport appropriate for their use-case:
>
>

> *

>
> Small: the viewport as it would be with dynamic UI fully
> expanded.
>

> *

>
> Large: the viewport as it would be with dynamic UI fully
> contracted.
>

> *

>
> Dynamic: the viewport as it is according to the current
> state of the dynamic UI.
>
>
> The new viewport units are also part of Interop 2022

> <https://web.dev/interop-2022/#new-viewport-units>.
>
>
> TAG review
>
> https://github.com/w3ctag/design-reviews/issues/706

> <https://github.com/w3ctag/design-reviews/issues/706>
>
>
> TAG review status
>
> Closed with no issues.
>
>
> Risks
>
>
>
> Interoperability and Compatibility
>
>

> *

>
> The viewport units are sized relative to the initial
> containing block

> <https://www.w3.org/TR/CSS21/visudet.html#containing-block-details>, and different browsers resize the initial containing block in different situations. In particular, opening/closing the virtual keyboardwill resize the ICB in Chrome for Android and Firefox for Android, but not in Safari for iOS nor in Chrome for ChromeOS.

> See also Intent to Ship: Android OSK resizes visual viewport
> by default + <meta> opt-out

> <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/32f2f64f-c49c-4208-b9b9-bd480e64d523n%40chromium.org?utm_medium=email&utm_source=footer>.
>
>
> Gecko: Shipped/Shipping
> (https://www.mozilla.org/en-US/firefox/101.0/releasenotes/
> <https://www.mozilla.org/en-US/firefox/101.0/releasenotes/>)
>
>
> WebKit: Shipped/Shipping
> (https://webkit.org/blog/12669/new-webkit-features-in-safari-15-5 <https://webkit.org/blog/12669/new-webkit-features-in-safari-15-5>)

>
>
> Web developers: “Difficulties dealing with viewport sizing are
> prominent in both the MDN Browser Compatibility Report 2020 and
> the new State of CSS 2021 survey.” [1]

> <https://web.dev/interop-2022/#new-viewport-units>

>
>
> Other signals:
>
>
> WebView application risks
>
> N/A
>
>
>
> Debuggability
>
> No special DevTools support is needed.
>
>
> Is this feature fully tested by web-platform-tests

> <https://chromium.googlesource.com/chromium/src/+/main/docs/testing/web_platform_tests.md>?

>
> Everything that can be tested with WPTs is covered. However,
> it’s impossible to control dynamic UI elements from a WPT.
>
>
> Flag name
>
> CSSViewportUnits4
>
>
> Requires code in //chrome?
>
> False
>
>
> Tracking bug
>
> https://bugs.chromium.org/p/chromium/issues/detail?id=1093055
> <https://bugs.chromium.org/p/chromium/issues/detail?id=1093055>
>
>
> Estimated milestones
>
> M108
>
>
> Link to entry on the Chrome Platform Status
>
> https://chromestatus.com/feature/5170718078140416
> <https://chromestatus.com/feature/5170718078140416>
>
>
> --
> 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

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

> To view this discussion on the web visit

> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/dcc0f4aa-a1ca-4c24-a959-209dc8249f77n%40chromium.org <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/dcc0f4aa-a1ca-4c24-a959-209dc8249f77n%40chromium.org?utm_medium=email&utm_source=footer>.

>
> --
> 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

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

> To view this discussion on the web visit

> https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAL5BFfWxA4FWwed8eSMTVrX7aJNdzSMX_wqFrRkD9FsxVoZd6A%40mail.gmail.com <https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAL5BFfWxA4FWwed8eSMTVrX7aJNdzSMX_wqFrRkD9FsxVoZd6A%40mail.gmail.com?utm_medium=email&utm_source=footer>.

Reply all

Reply to author

Forward

0 new messages