Post

Jhey ʕ·ᴥ·　ʔ

CSS for detecting device posture 🥼 @media (device-posture: folded) { h1 span:first-of-type { opacity: 0.25; } } some cool future opportunities 🤙

Seb ⚛️ ThisWeekInReact.com@sebastienlorber.com

TIL about the DevicePosture API Useful to know from JS/CSS if a device is folded: "folded" | "continuous" W3C just moved this to Candidate Recommendation

26/11/24, 7:01 pm46 reposts249 likes

@muratcorlu.com

Bonus: You don't need to wait for Safari support. 😃

The actual reflection I see in the phone is the first thing I'd want to try to simulate with it haha.

Jayvic San Antonio

@jayvicsanantonio.dev

Whoa, that’s wild! 🤯

sick

Larry Williamson (L422Y)

doesn’t work on my iphone

@denvercoder.com

You probably didn’t fold it hard enough. It takes 2 chevys per cubic Buicks of pressure to fold an iPhone.

Jhey ʕ·ᴥ·　ʔ

lol at how polarising this is for people on the other platform 💀 > "I hate this so much", "oh no"

@deanleigh.bsky.social

I'm old enough to remember when @seaotta.dev wrote: blog.stephaniestimac.com/posts/2023/0... and I'm still pissed about the Surface Neo not surfacing…

blog.stephaniestimac.comDesigning for Dual Screen and Foldable Devices With CSS - Stephanie Stimac's BlogRevisiting the CSS media queries and environment variables for foldable devices.

Web Witch 🔮 Stephanie Stimac

I need to write an update with the new media query and Jhey's demo 😀

@deanleigh.bsky.social

I would defo be interested in more dual screen CSS demoes. Also did you get to mountain bike here yet? I'm living vicariously through everyone's off-roading :-)

Jhey ʕ·ᴥ·　ʔ

haha - not that long ago 🥲 Steph has some demos that might be worth giving a little extra love to with these new ones cool thing is you can emulate the "folded" mode but funny enough it seems to be working better on device

@deanleigh.bsky.social

I don't think we have even scratched the surface (no pun intended) with dual screen devices yet. Look at the trouble we go to with collapsing, slide in, expanding navigation, filters etc… for single screen websites.

@donnie.damato.design

Looks like they made a media query just for us! 🤲

Jhey ʕ·ᴥ·　ʔ

you know it 🤜🤛

@ryanfurrer.bsky.social

Oh this is sick

Now I want a foldable phone....

Jack Harner 🚀 Web Developer

@jackharner.com

CSS is so cool 😂🤯

@vaibhavkhulbe.bsky.social

oh need to test this now!!

@ravimohan.bsky.social

ohh great, one more responsive design to consider 😥

@denvercoder.com

What do you have for “DevicePosture: broken”? 🤔