Re: [csswg-drafts] Proposing new CSS primitives to enable great web experiences on foldable & dual-screen devices (#4736)

> This stuff does not seem at all easy to use. I can't imagine that adoption by web developers would ever be all that high.
> 

It's a media query opt-in, I don't find particularly complicated to use. See examples here: https://github.com/foldable-devices/demos

> Is there any plan for something simple, like a css function that adjusts a size or coordinate to snap to a natural boundary position? Something like:
> 
> ```
> nav {
>     --smallest-acceptable-width: 300px;
>     --ideal-width: 40vw;
>     --largest-acceptable-width: 60vw;
>     width: natural(var(--smallest-acceptable-width), var(--ideal-width), var(--largest-acceptable-width));
> }
> ```

How you would handle the physical hinge covering content with that proposal? Typically, when designing for dual screen or foldable in split mode, the idea when spanning is not to have your content be the width of the 2 (or n) screen because the hinge may cover content or the fold could create an interaction issue (think if the device is half folded). The screen estate being bigger and the expected interaction being different typically would require the developers to rethink the layout slightly. Matching the MQs make the developer think that there are now 2 segments of content that can be displayed and thus enable a new layout (often a two pane or reflow the current one to take the hinge into account). This is an opt-in which is good.

Microsoft put up some nice videos that showcase some new layout patterns. See https://www.youtube.com/user/surface/videos




-- 
GitHub Notification of comment by darktears
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4736#issuecomment-675624990 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 18 August 2020 17:53:47 UTC