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…