CSS Foldable Display Polyfill

Avatar of Chris Coyier
Chris Coyier on

Foldable phones are starting to be a thing. Early days, for sure, but some are already shipping, and they definitely have web browsers on them. Stands to reason that, as web designers, we are going to want to know where that fold is so we can design screens that fit onto the top half and bottom half… or left half and right half¹.

Looks like that’s going to make its way to us in the form of env() constants, just like all that notch stuff.

The code block in the polyfill repo is:

@media (spanning: single-fold-vertical) {
  body {
    flex-direction: row;
  }
  .map {
    flex: 1 1 env(fold-left)
  }
  .locations-list {
    flex: 1;
  }
}

I would also think it could be…

@media (spanning: single-fold-vertical) {
  .page-wrap {
    display: grid;
    grid-template-columns: env(fold-left) 1fr;
  }
}

Interesting how there is no fold-right, isn’t it? And aren’t we trying to stay away from directional terms like that and use logical properties? Why not fold-inline-start?

  1. It’ll be interesting to see how that sentence ages. Just watch the first really popular foldable phone will have three segments.
Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

  1. Colin Reci
    Permalink to comment#

    Awesome article, Chris. I Just saw a Galaxy foldable of some sort right in the store right before the pandemic started. I was curious as to how their grid was going to work. Thanks for sharing!

  2. Zouhir
    Permalink to comment#

    thank you for starting this conversation, I am the co-author of the spec and it helps us a lot to hear the web developers & experts feedback! Here are some updates to the spec and some other random thoughts I have on the topic (apologize for repeating some of what my friend Alexis already mentioned below):

    1- Regarding fold-right and fold-bottom: we added those to the explainer doc, here’s the link for the GH issue I filed with an example of how the additional rect properties improve ergonomics for RTL writing-mode as an example.

    /* before introducing fold-right*/
[dir="rtl"] .col-1 {
   flex: 0 0 calc( 100vw - ( env(fold-left) + env(fold-width) ) );
}


/* after introducing fold-right */
[dir="rtl"] .col-1 {
   flex: 0 0 env(fold-right);
}

    2- When you have 3-screens device (2 folds), which fold does env(fold-*) refer to? We are right now thinking of a solution for this unavoidable problem. Something that will help developers “select” the 1st, 2nd, etc.. environment variable to get the value of a specific item in a list of folds, notches, etc.. No concrete proposal yet. Hopefully soon though.

    3- Some thoughts on using logical properties for the fold env() variables: the usage of physical screen rects to represent the geometry of some hardware configuration (hinge, notch, etc) is quite common, this is also consistent with the DOMRects we expose on the JavaScript API side of things. Though I must say, I am personally not opposed to proposing logical ones if that’s what gives the developer more ergonomics & control. Something I keep thinking about: imagine we have to support a case where the viewport is spanning across 6 desktop external monitors (3col, 2rows), which style of variables helps you better reason about the “gap” position and geometry?

This comment thread is closed. If you have important information to share, please contact us.