The Device Posture API

The “big” news yesterday was the new foldable iPhone. I haven’t held it, but seeing the announcement videos show how the screen changes context in several different ways: folded (portrait and landscape), unfolded (portrait and landscape). that made me wonder how CSS might respond to each context.

I mean, the portrait and landscape orientations are nothing new. But this “folded” and “unfolded” thing sorta is. There are other foldable phone, but I never really thought about those orientations until the iPhone Duo marketing push.

Turns out there’s already a feature for this. And turns out that “folded” and “unfolded” are even orientations, but are called “postures” instead. It’s all detailed in the Device Posture API, still experimental as of now. There two existing postures are folded and continuous, which we can query in CSS like any other @media feature, under the device-posture feature:

/* When folded or "closed" */
@media (device-posture: folded) {
  .grid { gap: --gap-small; }
}

I’m not really sure what continuous exactly means, as it can still mean “open” or “closed”:

Indicates a flat screen state. Foldable devices are continuous while they are flat; either fully opened or fully closed. Non-foldable devices are considered flat and therefore always continuous — this includes seamless curved displays and standard desktop, laptop, tablet, and mobile screens.

So maybe it’s a sorta catch-all for non-foldable devices? Makes sense if we’re talking about “posture” instead of “orientation.” We’ll certainly be able to target unfolded phones with not, I imagine:

/* When *not* folded */
@media not (device-posture: folded) {
  .grid { gap: --gap-small; }
}

But it doesn’t seem like there’d be a whole lot of use cases for continuous either way. Just declare styles specifically for foldable devices and let default styles take over at all other times.

Oh, and need to target styles specifically to when that folded device is either in a portrait or landscape orientation? We can chain those on:

/* When folded or "closed" */
@media (device-posture: folded) and (orientation: portrait) {
  .grid { gap: --gap-small; }
}

Again, still very much experimental as and still just an editor’s draft spec. Support is limited to Chromium browsers with no signals from Safari or Firefox from what I can tell.

And wouldn’t you know it, Jhey is already playing with it.