[csswg-drafts] [cssom] Bring the segments property into visual viewport (#9237)

darktears has just created a new issue for https://github.com/w3c/csswg-drafts:

== [cssom] Bring the segments property into visual viewport  ==
The `segments` property allows developers to target dual screens and foldable devices by giving information about the segments (or zones) when the browser window is spanned across the screen(s). There is a good set of pictures to demonstrate what we are trying to achieve here : https://github.com/foldable-devices/demos.

Work was started by Microsoft in WICG to bring a JavaScript API, link [here](https://wicg.github.io/visual-viewport/#dom-visualviewport-segments). The proposed specification adds a `segments` property to the `visualViewport` object. `segments` are only defined when the browser window is maximized. They are also defined in CSS pixels. When the browser window state changes (maximized/resized) one needs to listen for the `resize` events to query the updated `segments`.

Please note that the `segments` property is intended mostly to mirror in JavaScript what’s being available in CSS (see [MQs](https://www.w3.org/TR/mediaqueries-5/#mf-horizontal-viewport-segments)). 

Both APIs, CSS and JavaScript went through TAG reviews [here](https://github.com/w3ctag/design-reviews/issues/689) and [here](https://github.com/w3ctag/design-reviews/issues/690). 

In terms of implementation status, Android and Windows are supported in Chromium based browser (with some caveats). Microsoft Edge does ship the CSS and the JavaScript APIs enabled by default on all platforms. Samsung Internet also is shipping both APIs by default on Android (the only OS they target).


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9237 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 24 August 2023 18:39:03 UTC