Foldable Device CSS Primitives

[scottlow]

Braw mornin' TAG!

I'm requesting a TAG review of Foldable Device CSS Primitives after taking into account feedback (w3c/csswg-drafts#5621 and w3c/csswg-drafts#5622) on our original Foldables CSS proposal (initial TAG review here: #472)

In order to enable web developers to build layouts that are optimized for foldable experiences declaratively using CSS, we must consider fundamental assumptions of CSS (i.e. a single contiguous rectangular space for laying out content) and introduce new primitives that -together with existing layout media queries- allow developers to create layouts that react to states where the root viewport spans multiple displays.

• Explainer¹ (minimally containing user needs and example code): https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Foldables/explainer.md
• Specification URLs:
  • Media Queries: https://drafts.csswg.org/mediaqueries-5/#mf-horizontal-viewport-segments
  • Environment Variables: https://drafts.csswg.org/css-env-1/#viewport-segments
• Tests: https://wpt.fyi/results/css/css-env/indexed-env.tentative.html
• Security and Privacy self-review²: [Foldable] CSS - TAG Security and Privacy questionnaire MicrosoftEdge/MSEdgeExplainers#187
• GitHub repo (if you prefer feedback filed there):
• Primary contacts (and their relationship to the specification):
  • Daniel Libby, @dlibby-, Microsoft
  • Stephanie Stimac, @ststimac, Microsoft
  • Scott Low, @scottlow, Microsoft
• Organization/project driving the design: Microsoft
• External status/issue trackers for this feature (publicly visible, e.g. Chrome Status):

Further details:

• I have reviewed the TAG's Web Platform Design Principles
• The group where the work on this specification is currently being done: CSSWG
• Major unresolved issues with or opposition to this specification: N/A
• This work is being funded by: Microsoft

We'd prefer the TAG provide feedback as (please delete all but the desired option):

💬 leave review feedback as a comment in this issue and @-notify [github usernames]

[kenchris]

I am pretty happy with this. I originally suggested using CSS environmental variables at BlinkON so really happy to see that that has happened. I also worked on the polyfill and created demos with @darktears so from developer point of view, the API is easy to use.

[JensenPaul]

It seems like this API might expose hardware characteristics to the web.  Would it make sense to add text to the explainer's "Security & Privacy" section discussing how identifying these characteristics are, quantifying the fingerprinting risks, whether they're exposed by other APIs, and what mitigations you've considered?

[torgo]

@JensenPaul do you have a suggestion what additional info they could provide other than what they've described in their response to the security & privacy questionnaire?

[plinss]

We took another look at this today and are generally happy with it.

One question that came up is if it makes sense to expose the number of viewport segments as environment variables (and if so, maybe not have both the high-level MQ properties and the environment variables).