Polyfill de pantalla plegable CSS

Los teléfonos plegables están empezando a ser una realidad. Es temprano, seguro, pero algunos ya se están enviando y definitivamente tienen navegadores web. Es lógico que, como diseñadores web, queramos saber dónde está ese pliegue para poder diseñar pantallas que encajen en la mitad superior y la mitad inferior… o en la mitad izquierda y la mitad derecha¹ .

Parece que eso llegará a nosotros en forma de env()constantes, al igual que todas esas cosas de la muesca.

El bloque de código en el repositorio de polyfill es:

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

Yo también pensaría que podría ser…

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

Es interesante que no la haya fold-right, ¿no? ¿Y no estamos tratando de alejarnos de términos direccionales como ese y utilizar propiedades lógicas? ¿Por qué no fold-inline-start?

1. Será interesante ver cómo envejece esa frase. Solo mire que el primer teléfono plegable realmente popular tendrá tres segmentos.