WebKittens

No response

Title of the spec

CSS Viewport Segments

URL to the spec

https://drafts.csswg.org/css-env-1 https://www.w3.org/TR/mediaqueries-5/#mf-horizontal-viewport-segments

URL to the spec's repository

No response

Issue Tracker URL

No response

Explainer URL

https://github.com/WICG/visual-viewport/blob/gh-pages/segments-explainer/SEGMENTS-EXPLAINER.md

TAG Design Review URL

w3ctag/design-reviews#689

Mozilla standards-positions issue URL

mozilla/standards-positions#883

WebKit Bugzilla URL

No response

Radar URL

No response

Description

Specification or proposal URLs:

CSS : https://drafts.csswg.org/css-env-1/#viewport-segments and https://www.w3.org/TR/mediaqueries-5/#mf-horizontal-viewport-segments

JavaScript : https://wicg.github.io/visual-viewport/#dom-visualviewport-segments (Proposal to merge it into VisualViewport w3c/csswg-drafts#9285)

The Viewport Segments API allows developers to adapt their website/webapp layout to target foldable devices. The viewport segments defines the position and dimensions of a logically separate region of the viewport. Viewport segments are created when the viewport is split by one or more hardware features (such as a fold or a hinge between separate displays) that act as a divider; segments are the regions of the viewport that can be treated as logically distinct by the author.

As this time this API applies only to Android and Windows OSes. Android provides the necessary OS APIs over here. Windows doesn't have an official API yet but instead relies on OEMs implementing the following specification in their middleware pre-installed software.

This API is to complimentary of the Device Posture API which also helps targeting foldable devices.

This API is enabled by default on Samsung Internet.
This API is enabled by default on some Microsoft Edge platforms.

TAG review w3ctag/design-reviews#689 and w3ctag/design-reviews#690.