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

> > 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) screens 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.

If the nav is aligned left, and the left edge of the nav is positioned such that the distance from that edge to the left edge of the hinge falls within the range the author has contemplated, that the width of the nav will end up being exactly the distance to the left edge of the hinge. Same with align right and right edges. Center alignment is naturally more perilous. In all cases without a good solution, the nav will end up with the author's ideal width, which may not be ideal for the user of the device, but then there is no fully generic solution to creating a "great web experience" on all possible foldable displays. My syntax makes it quick and easy to support foldable devices that the web site's existing design intuitively should support.

This snap-to-natural-boundary behavior should be supported on at least left, right, width, top, bottom, height, margins, and paddings.

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


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

Received on Thursday, 22 October 2020 23:24:54 UTC