Intent to Prototype: CSS primitives for foldable devices

148 views
Skip to first unread message

Daniel Libby

unread,
Feb 7, 2020, 5:23:46 PM2/7/20
to blink-dev
Contact emails

Explainer

Summary 
Add new CSS media features and environment variables for developers to reason about devices where a fold or hinge semantically splits web content.

Motivation
In order to enable web developers to build layouts that are optimized for foldable experiences declaratively using CSS, we consider the fundamental assumptions of CSS (i.e. a single contiguous rectangular space for laying out content) and introduce new primitives that - together with existing layout media queries - allow developers to create layouts that react to states where the root viewport spans across a device's fold or hinge. 

Risks
Interoperability and Compatibility
The main interoperability risk is if other browsers do not implement the API. However, there should not generally be any impact to sites: the media features won’t parse, and the environment variables will not be set (resolve to author specified default), which is the same state exposed when not in the specific ‘spanning’ mode. Similarly compatibility risk should be low, as new features won’t parse and throw out the entire @media block.

There has been good discussion in CSSWG, with recognition of validity of use cases and positive sentiment towards the initial proposal:

Firefox: No public signals
Safari: No public signals
Web developers: positive

Ergonomics
There is also a JavaScript API proposal (see the WindowSegments section of the explainer) that will expose similar information. Developers may end up using these in tandem. 
We will need to investigate and measure the performance of changing CSS environment variables dynamically, based on device posture. Currently these result in fairly large style invalidations.

Activation
It will be relatively easy for developers to extend their existing responsive design by adding a set of grouped rules within a media query, specifically targeting these devices and their fold geometry.
A polyfill is available, however it is for specific form factors, and thus not comprehensive.

Debuggability
This area is still in its early stages, and as such the underlying operating systems’ platforms are still under development, in terms of how this information is exposed (e.g. Android support library is planning on exposing a concept of DisplayFeature). Due to this, we are working with the Microsoft Edge DevTools team to provide an emulation solution 
integrated into the Chromium devtools, in order to initially light up this API for developers
 

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
No, currently with the set of hardware slated for release there will be support on Windows and Android. I would expect this to evolve if the other platforms start supporting devices with a fold/hinge.

Is this feature fully tested by web-platform-tests?
No, part of prototyping this feature will include coming up with a plan to integrate support for emulation into wpt.

Link to entry on the feature dashboard

PhistucK

unread,
Feb 7, 2020, 6:11:16 PM2/7/20
to Daniel Libby, blink-dev
Foldables are basically a subclass of "multiple screens", as I see it.
Can you generalize this implementation to fit multiple screens as well (and on the way, fix some multiple screen issues Chrome currently has, regarding window.screen.availFoo properties and I am sure there are more - search crbug.com)?

☆PhistucK


--
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/77158014-3270-4022-b638-01bce11ed3f3%40chromium.org.

Yoav Weiss

unread,
Feb 7, 2020, 6:24:57 PM2/7/20
to Daniel Libby, blink-dev
On Fri, Feb 7, 2020 at 2:23 PM 'Daniel Libby' via blink-dev <blin...@chromium.org> wrote:

Summary 
Add new CSS media features and environment variables for developers to reason about devices where a fold or hinge semantically splits web content.

Motivation
In order to enable web developers to build layouts that are optimized for foldable experiences declaratively using CSS, we consider the fundamental assumptions of CSS (i.e. a single contiguous rectangular space for laying out content) and introduce new primitives that - together with existing layout media queries - allow developers to create layouts that react to states where the root viewport spans across a device's fold or hinge. 

Risks
Interoperability and Compatibility
The main interoperability risk is if other browsers do not implement the API. However, there should not generally be any impact to sites: the media features won’t parse, and the environment variables will not be set (resolve to author specified default), which is the same state exposed when not in the specific ‘spanning’ mode. Similarly compatibility risk should be low, as new features won’t parse and throw out the entire @media block.

There has been good discussion in CSSWG, with recognition of validity of use cases and positive sentiment towards the initial proposal:

Firefox: No public signals
Safari: No public signals

Could you reach out to them?
 
Web developers: positive

Ergonomics
There is also a JavaScript API proposal (see the WindowSegments section of the explainer) that will expose similar information. Developers may end up using these in tandem. 
We will need to investigate and measure the performance of changing CSS environment variables dynamically, based on device posture. Currently these result in fairly large style invalidations.

Activation
It will be relatively easy for developers to extend their existing responsive design by adding a set of grouped rules within a media query, specifically targeting these devices and their fold geometry.
A polyfill is available, however it is for specific form factors, and thus not comprehensive.

Debuggability
This area is still in its early stages, and as such the underlying operating systems’ platforms are still under development, in terms of how this information is exposed (e.g. Android support library is planning on exposing a concept of DisplayFeature). Due to this, we are working with the Microsoft Edge DevTools team to provide an emulation solution 
integrated into the Chromium devtools, in order to initially light up this API for developers
 

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
No, currently with the set of hardware slated for release there will be support on Windows and Android. I would expect this to evolve if the other platforms start supporting devices with a fold/hinge.

Is this feature fully tested by web-platform-tests?
No, part of prototyping this feature will include coming up with a plan to integrate support for emulation into wpt.

Link to entry on the feature dashboard

Daniel Libby

unread,
Feb 7, 2020, 8:12:30 PM2/7/20
to blink-dev, dli...@microsoft.com


On Friday, February 7, 2020 at 3:11:16 PM UTC-8, PhistucK wrote:
Foldables are basically a subclass of "multiple screens", as I see it. 
Can you generalize this implementation to fit multiple screens as well (and on the way, fix some multiple screen issues Chrome currently has, regarding window.screen.availFoo properties and I am sure there are more - search crbug.com)?

Point taken - we're still exploring the idea of applying these CSS features to multiple screen scenarios. At the same time, it is not immediately clear that an arbitrarily positioned window spanning multiple monitors should be treated semantically the same way as a window spanning both screens on a foldable device. But given your feedback and feedback we received on the csswg-drafts issue, it's certainly something we need to consider more closely. Note that for the JavaScript API surface proposal, we're working with the folks implementing the ScreenEnumeration API to ensure the concepts complement each other.

I don't have access to that bug, mind cc'ing me so I can take a look?
 

☆PhistucK


To unsubscribe from this group and stop receiving emails from it, send an email to blin...@chromium.org.

Daniel Libby

unread,
Feb 7, 2020, 8:14:11 PM2/7/20
to blink-dev, dli...@microsoft.com


On Friday, February 7, 2020 at 3:24:57 PM UTC-8, Yoav Weiss wrote:


On Fri, Feb 7, 2020 at 2:23 PM 'Daniel Libby' via blink-dev <blin...@chromium.org> wrote:

Summary 
Add new CSS media features and environment variables for developers to reason about devices where a fold or hinge semantically splits web content.

Motivation
In order to enable web developers to build layouts that are optimized for foldable experiences declaratively using CSS, we consider the fundamental assumptions of CSS (i.e. a single contiguous rectangular space for laying out content) and introduce new primitives that - together with existing layout media queries - allow developers to create layouts that react to states where the root viewport spans across a device's fold or hinge. 

Risks
Interoperability and Compatibility
The main interoperability risk is if other browsers do not implement the API. However, there should not generally be any impact to sites: the media features won’t parse, and the environment variables will not be set (resolve to author specified default), which is the same state exposed when not in the specific ‘spanning’ mode. Similarly compatibility risk should be low, as new features won’t parse and throw out the entire @media block.

There has been good discussion in CSSWG, with recognition of validity of use cases and positive sentiment towards the initial proposal:

Firefox: No public signals
Safari: No public signals

Could you reach out to them?

Engineers from both Safari and Firefox participated in the CSSWG discussion, but I didn't want to represent their initial thoughts as public support (though sentiment was generally positive). We'll continue to work with them as the proposal evolves (both in the github issue and on future conf calls).
 
 
Web developers: positive

Ergonomics
There is also a JavaScript API proposal (see the WindowSegments section of the explainer) that will expose similar information. Developers may end up using these in tandem. 
We will need to investigate and measure the performance of changing CSS environment variables dynamically, based on device posture. Currently these result in fairly large style invalidations.

Activation
It will be relatively easy for developers to extend their existing responsive design by adding a set of grouped rules within a media query, specifically targeting these devices and their fold geometry.
A polyfill is available, however it is for specific form factors, and thus not comprehensive.

Debuggability
This area is still in its early stages, and as such the underlying operating systems’ platforms are still under development, in terms of how this information is exposed (e.g. Android support library is planning on exposing a concept of DisplayFeature). Due to this, we are working with the Microsoft Edge DevTools team to provide an emulation solution 
integrated into the Chromium devtools, in order to initially light up this API for developers
 

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
No, currently with the set of hardware slated for release there will be support on Windows and Android. I would expect this to evolve if the other platforms start supporting devices with a fold/hinge.

Is this feature fully tested by web-platform-tests?
No, part of prototyping this feature will include coming up with a plan to integrate support for emulation into wpt.

Link to entry on the feature dashboard

--
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 blin...@chromium.org.

Yoav Weiss

unread,
Feb 7, 2020, 8:51:13 PM2/7/20
to Daniel Libby, blink-dev
On Fri, Feb 7, 2020 at 5:14 PM 'Daniel Libby' via blink-dev <blin...@chromium.org> wrote:


On Friday, February 7, 2020 at 3:24:57 PM UTC-8, Yoav Weiss wrote:


On Fri, Feb 7, 2020 at 2:23 PM 'Daniel Libby' via blink-dev <blin...@chromium.org> wrote:

Summary 
Add new CSS media features and environment variables for developers to reason about devices where a fold or hinge semantically splits web content.

Motivation
In order to enable web developers to build layouts that are optimized for foldable experiences declaratively using CSS, we consider the fundamental assumptions of CSS (i.e. a single contiguous rectangular space for laying out content) and introduce new primitives that - together with existing layout media queries - allow developers to create layouts that react to states where the root viewport spans across a device's fold or hinge. 

Risks
Interoperability and Compatibility
The main interoperability risk is if other browsers do not implement the API. However, there should not generally be any impact to sites: the media features won’t parse, and the environment variables will not be set (resolve to author specified default), which is the same state exposed when not in the specific ‘spanning’ mode. Similarly compatibility risk should be low, as new features won’t parse and throw out the entire @media block.

There has been good discussion in CSSWG, with recognition of validity of use cases and positive sentiment towards the initial proposal:

Firefox: No public signals
Safari: No public signals

Could you reach out to them?

Engineers from both Safari and Firefox participated in the CSSWG discussion, but I didn't want to represent their initial thoughts as public support (though sentiment was generally positive). We'll continue to work with them as the proposal evolves (both in the github issue and on future conf calls).

Sounds good! :)
 
 
 
Web developers: positive

Ergonomics
There is also a JavaScript API proposal (see the WindowSegments section of the explainer) that will expose similar information. Developers may end up using these in tandem. 
We will need to investigate and measure the performance of changing CSS environment variables dynamically, based on device posture. Currently these result in fairly large style invalidations.

Activation
It will be relatively easy for developers to extend their existing responsive design by adding a set of grouped rules within a media query, specifically targeting these devices and their fold geometry.
A polyfill is available, however it is for specific form factors, and thus not comprehensive.

Debuggability
This area is still in its early stages, and as such the underlying operating systems’ platforms are still under development, in terms of how this information is exposed (e.g. Android support library is planning on exposing a concept of DisplayFeature). Due to this, we are working with the Microsoft Edge DevTools team to provide an emulation solution 
integrated into the Chromium devtools, in order to initially light up this API for developers
 

Will this feature be supported on all six Blink platforms (Windows, Mac, Linux, Chrome OS, Android, and Android WebView)?
No, currently with the set of hardware slated for release there will be support on Windows and Android. I would expect this to evolve if the other platforms start supporting devices with a fold/hinge.

Is this feature fully tested by web-platform-tests?
No, part of prototyping this feature will include coming up with a plan to integrate support for emulation into wpt.

Link to entry on the feature dashboard

--
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 blin...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/77158014-3270-4022-b638-01bce11ed3f3%40chromium.org.

--
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/315a0dda-3b46-4e82-bd66-fd64e6532734%40chromium.org.

PhistucK

unread,
Feb 8, 2020, 2:07:37 AM2/8/20
to Daniel Libby, blink-dev
Huh, interesting... I guess it used to be public, because I have e-mail records of it. I cannot access it as well. Weird.

Anyway, I remember there are certain positioning issues with multiple screens, either at the browser window creation level (the positioning command line flags do not work as expected), or at popup window creation level (you cannot position the window on the second screen, or properly).
It is great that you are looking into including this scenario as well.

☆PhistucK


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/90b21dc0-830f-4c5a-a38e-caa9924542e0%40chromium.org.

Yoav Weiss

unread,
Feb 8, 2020, 2:49:25 AM2/8/20
to PhistucK, David Bokan, Daniel Libby, blink-dev

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CABc02_KMZsU-7DyoTi9UD9WYRunw07OY2iXQc6L876%3DwZ7%3DkhQ%40mail.gmail.com.

David Bokan

unread,
Feb 12, 2020, 6:02:34 PM2/12/20
to Yoav Weiss, PhistucK, Daniel Libby, blink-dev
We discussed this at BlinkON. I agree it's an important use case to solve and I think the proposal is fairly solid. My only feedback, as was already made in the csswg issue, is that we should think about how these APIs would/could apply to other exotic devices that e.g. have a hinge that's rendered onto or curved but untouchable curved sides; these kinds of cases seem closely related and seem to be getting more popular. Not necessarily to solve/implement at this time but to make sure we don't preclude them in the future. 
Reply all
Reply to author
Forward
0 new messages