Editorial review: Device Posture API #37595

chrisdavidmills · 2025-01-10T17:49:37Z

Description

Chrome 132 supports the Device Posture API, which provides functionality to create user interfaces that adapt to a foldable device's posture and respond to posture changes.

Specifically, it adds:

The DevicePosture interface, which is accessed via the navigator.devicePosture property.
The device-posture media query feature.

This PR adds docs for all the features of the API.

See https://chromestatus.com/feature/5185813744975872 for the data source.

Also see https://developer.chrome.com/blog/foldable-apis-ot for a tutorial with some info.

Also see mdn/dom-examples#292 for my PR to add a demo to the dom-examples repo

Motivation

Additional details

Related issues and pull requests

github-actions · 2025-01-10T17:51:21Z

Preview URLs (10 pages)

Flaws (8)

Note! 7 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/API/Navigator
Title: Navigator
Flaw count: 1

macros:
- Can't resolve /en-US/docs/Web/API/Navigator/standalone

URL: /en-US/docs/Web/CSS/@media
Title: @media
Flaw count: 2

broken_links:
- Can't resolve /en-US/docs/Web/CSS/media-query-list
- Can't resolve /en-US/docs/Web/CSS/rule-list

URL: /en-US/docs/Web/CSS/CSS_media_queries
Title: CSS media queries
Flaw count: 5

macros:
- Can't resolve /en-US/docs/Web/CSS/@media/environment-blending
- Can't resolve /en-US/docs/Web/CSS/@media/horizontal-viewport-segments
- Can't resolve /en-US/docs/Web/CSS/@media/nav-controls
- Can't resolve /en-US/docs/Web/CSS/@media/vertical-viewport-segments
- Can't resolve /en-US/docs/Web/CSS/@media/video-color-gamut

External URLs (6)

URL: /en-US/docs/Web/API/DevicePosture
Title: DevicePosture

https://developer.chrome.com/blog/foldable-apis-ot (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/API/DevicePosture/type
Title: DevicePosture: type property

https://developer.chrome.com/blog/foldable-apis-ot (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/API/DevicePosture/change_event
Title: DevicePosture: change event

https://developer.chrome.com/blog/foldable-apis-ot (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/API/Device_Posture_API
Title: Device Posture API

https://developer.chrome.com/blog/foldable-apis-ot (1 time) (Note! This may be a new URL 👀)
https://mdn.github.io/dom-examples/device-posture-api/ (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/CSS/@media/device-posture
Title: device-posture

https://mdn.github.io/dom-examples/device-posture-api/ (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2025-02-07 10:50:13)

darktears · 2025-01-31T14:08:33Z

LGTM

chrisdavidmills · 2025-02-03T07:14:11Z

LGTM

Thanks for reviewing, @darktears!

@estelle, this is now ready for your editorial review.

Note that the dom-examples demo that I link to in this PR will 404 until mdn/dom-examples#292 is merged. You can see an example of the same demo at https://device-posture-test.glitch.me/.

estelle · 2025-02-04T23:29:17Z

Samsung Flip 6 running chrome 128 in default state.

edit: figured out the issue. 128 is origin trial, which this device is not part of

edit: reads as continuoius in chrome when emulating folded

edit: samsung internet has it on by default, so it works in the @browserstack emulator, but always says continuous (only options on emulator and browserstack are to have it fully flat (180deg) or folded (360deg), not folded at any other angle

estelle

I think "device posture" needs to be defined.
we can either define it in the intro of all of these pages, or create a glossary and link to it.

estelle · 2025-02-05T01:09:21Z

files/en-us/web/css/css_media_queries/index.md

@@ -37,6 +37,7 @@ When designing reusable HTML components, you may also use [container queries](/e
 - {{cssxref("@media/color-index", "color-index")}}
 - {{cssxref("@media/device-aspect-ratio", "device-aspect-ratio")}}
 - {{cssxref("@media/device-height", "device-height")}}
+- {{cssxref("@media/device-posture", "device-posture")}}


because this is not in the css media queries specification, this gets added under "related concepts" rather than here.

I appreciate why you are saying this, but I worry that this will make the device-posture descriptor hard to find on the page. It would surely be more useful to put it in the list.

The CSS media queries are defined in the Device Posture spec. In that regard in makes no difference than "being defined in the CSS spec". It's just so that the feature is defined in the spec it belongs to. It doesn't make it "less official".

these module landing pages are about the module - the spec - not about any individual features.
Those looking for a list of descriptors would go to the @media page.
those wanting to learn about the spec would to to this page. That is why this link has to be moved.

files/en-us/web/css/@media/index.md

files/en-us/web/css/@media/device-posture/index.md

files/en-us/web/api/device_posture_api/index.md

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

estelle

a few edits and we're good to go

estelle · 2025-02-05T23:40:42Z

files/en-us/web/api/deviceposture/type/index.md

+## Examples
+
+```js
+const postureOutput = document.querySelector("p");


Suggested change

const postureOutput = document.querySelector("p");

const postureOutput = document.querySelector("#currentPosture");

estelle · 2025-02-05T23:46:29Z

files/en-us/web/css/@media/device-posture/index.md

+}
+```
+
+To see the above code in action, view the [Device Posture API demo](https://mdn.github.io/dom-examples/device-posture-api/) on a foldable device.


Suggested change

To see the above code in action, view the [Device Posture API demo](https://mdn.github.io/dom-examples/device-posture-api/) on a foldable device.

To see the above code in action, view the [Device Posture API demo](https://mdn.github.io/dom-examples/device-posture-api/) on a foldable device. Your browser developer tools enable emulating foldable devices, but current tools don't include emulating partially folded devices, only fully open or closed devices, so they will always return `continuous`.

i am pretty confident this is true. (tested dev tools and browserStack)

Yup, this sounds plausible. I have rewritten it a bit and included it here and on the Examples section of the main Device Posture API landing page.

estelle

Just need to address https://github.com/mdn/content/pull/37595/files#r1942113759 and this PR is good to go.

chrisdavidmills · 2025-02-07T10:49:02Z

Just need to address https://github.com/mdn/content/pull/37595/files#r1942113759 and this PR is good to go.

OK, done

estelle

Thanks! 🎉

Device Posture API

69c4b7e

chrisdavidmills requested review from a team as code owners January 10, 2025 17:49

chrisdavidmills requested review from sideshowbarker, estelle and pepelsbey and removed request for a team January 10, 2025 17:49

github-actions bot added Content:CSS Cascading Style Sheets docs Content:WebAPI Web API docs labels Jan 10, 2025

chrisdavidmills marked this pull request as draft January 10, 2025 17:49

github-actions bot added the size/m [PR only] 51-500 LoC changed label Jan 10, 2025

sideshowbarker removed their request for review January 18, 2025 13:47

estelle removed their request for review January 27, 2025 19:19

Merge branch 'main' into device-posture-api

542bfa9

chrisdavidmills mentioned this pull request Jan 31, 2025

Add Device Posture API demo mdn/dom-examples#292

Merged

Fill in TBD links with what will be the demo URL

562cd18

chrisdavidmills changed the title ~~Device Posture API~~ Technical review: Device Posture API Jan 31, 2025

chrisdavidmills marked this pull request as ready for review January 31, 2025 10:47

chrisdavidmills changed the title ~~Technical review: Device Posture API~~ Editorial review: Device Posture API Feb 3, 2025

chrisdavidmills requested a review from estelle February 3, 2025 07:18

estelle self-assigned this Feb 4, 2025

Merge branch 'main' into device-posture-api

af03872

estelle reviewed Feb 5, 2025

View reviewed changes

chrisdavidmills and others added 12 commits February 5, 2025 11:50

Update files/en-us/web/css/@media/index.md

c168a1f

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

Update files/en-us/web/css/@media/device-posture/index.md

ee5a79a

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

Update files/en-us/web/api/navigator/deviceposture/index.md

21c00b6

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

Update files/en-us/web/api/navigator/deviceposture/index.md

e960c7c

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

Update files/en-us/web/api/deviceposture/type/index.md

1d9a880

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

Update files/en-us/web/api/deviceposture/index.md

34266b7

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

Update files/en-us/web/api/device_posture_api/index.md

dfccd08

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

Update files/en-us/web/api/device_posture_api/index.md

89d7b57

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

Update files/en-us/web/api/device_posture_api/index.md

33748bf

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

Update files/en-us/web/api/device_posture_api/index.md

d47dd99

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

Fixes for estelle review comments

a5731b9

Merge branch 'main' into device-posture-api

36c4247

chrisdavidmills requested a review from estelle February 5, 2025 13:49

estelle reviewed Feb 5, 2025

View reviewed changes

Last few updates

e17d9ed

chrisdavidmills requested a review from estelle February 6, 2025 10:45

estelle reviewed Feb 6, 2025

View reviewed changes

move device-posture descriptor

de7e253

chrisdavidmills requested a review from estelle February 7, 2025 10:49

estelle approved these changes Feb 7, 2025

View reviewed changes

chrisdavidmills merged commit a3d19af into mdn:main Feb 7, 2025
9 checks passed

chrisdavidmills deleted the device-posture-api branch February 7, 2025 18:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Editorial review: Device Posture API #37595

Editorial review: Device Posture API #37595

chrisdavidmills commented Jan 10, 2025 •

edited

Loading

github-actions bot commented Jan 10, 2025 •

edited

Loading

darktears commented Jan 31, 2025

chrisdavidmills commented Feb 3, 2025 •

edited

Loading

estelle commented Feb 4, 2025 •

edited

Loading

estelle left a comment

estelle Feb 5, 2025

chrisdavidmills Feb 5, 2025

darktears Feb 5, 2025

estelle Feb 5, 2025

estelle left a comment

estelle Feb 5, 2025

chrisdavidmills Feb 6, 2025

estelle Feb 5, 2025

estelle Feb 5, 2025

chrisdavidmills Feb 6, 2025

estelle left a comment

chrisdavidmills commented Feb 7, 2025

estelle left a comment

	const postureOutput = document.querySelector("p");
	const postureOutput = document.querySelector("#currentPosture");

	To see the above code in action, view the [Device Posture API demo](https://mdn.github.io/dom-examples/device-posture-api/) on a foldable device.
	To see the above code in action, view the [Device Posture API demo](https://mdn.github.io/dom-examples/device-posture-api/) on a foldable device. Your browser developer tools enable emulating foldable devices, but current tools don't include emulating partially folded devices, only fully open or closed devices, so they will always return `continuous`.

Editorial review: Device Posture API #37595

Editorial review: Device Posture API #37595

Conversation

chrisdavidmills commented Jan 10, 2025 • edited Loading

Description

Motivation

Additional details

Related issues and pull requests

github-actions bot commented Jan 10, 2025 • edited Loading

darktears commented Jan 31, 2025

chrisdavidmills commented Feb 3, 2025 • edited Loading

estelle commented Feb 4, 2025 • edited Loading

estelle left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

estelle left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

estelle left a comment

Choose a reason for hiding this comment

chrisdavidmills commented Feb 7, 2025

estelle left a comment

Choose a reason for hiding this comment

chrisdavidmills commented Jan 10, 2025 •

edited

Loading

github-actions bot commented Jan 10, 2025 •

edited

Loading

chrisdavidmills commented Feb 3, 2025 •

edited

Loading

estelle commented Feb 4, 2025 •

edited

Loading