CSS para plegables: media queries y variables para maquetar en dos pantallas

El CSS tiene mecanismos para maquetar en un dispositivo de doble pantalla sin detectar el modelo concreto. Son dos media queries y un puñado de variables de entorno, y el planteamiento es el de siempre en responsive: describir el comportamiento, no el aparato.

La primera es @media (horizontal-viewport-segments: <n>), que se activa cuando el dispositivo se sostiene como un libro y las dos pantallas quedan lado a lado. La segunda, @media (vertical-viewport-segments: <n>), apunta al caso en que los paneles están apilados y el cacharro se pliega como un portátil. Ese segundo modo es el que sirve, por ejemplo, para dejar las notas del ponente en la pantalla inferior y la presentación en la superior.

Variables de entorno y geometría

Para colocar cosas hay que saber cuánto mide cada segmento. De ahí este juego de variables:

env(viewport-segment-width <x> <y>);
env(viewport-segment-height <x> <y>);
env(viewport-segment-top <x> <y>);
env(viewport-segment-left <x> <y>);
env(viewport-segment-bottom <x> <y>);
env(viewport-segment-right <x> <y>);

Las coordenadas x e y describen una rejilla bidimensional marcada por el hardware que separa los segmentos, con el 0,0 en el segmento superior izquierdo. La ventaja es que el navegador calcula las dimensiones según el equipo, así que no hay que mantener una hoja de estilos por cada plegable del mercado, con sus bisagras y sus pantallas de medidas distintas.

Con eso, un layout de dos columnas sale directo con Grid:

@media (horizontal-viewport-segments: 2) {
  .container {
    grid-template-columns: env(viewport-segment-width 0 0) 1fr;
  }
}

La primera columna ocupa la pantalla izquierda entera y la segunda se queda con el resto del espacio disponible.

Cuándo compensa

No todo sitio necesita un modo de doble pantalla, y nadie obliga a construirlo. Un navegador abierto en un solo panel de un Surface Duo renderiza la web responsive de siempre, y para mucha gente eso basta. La decisión debería salir de los datos: mirar qué dispositivos usan los clientes antes de invertir en una variante de layout. El volumen de plegables enviados en 2023 superó los 21 millones de unidades, según el informe de IDC. Es una porción pequeña del mercado móvil, pero son 21 millones de dispositivos.

El otro motivo para hacerlo es distinguirse, y el anuncio del Pixel Fold dejó claro que el formato no va a desaparecer. Para quien quiera el detalle completo, hay un recorrido más largo con la demo de una receta.

Soporte

Las media queries y las variables funcionan en la rama estable de Microsoft Edge. En Chrome estable todavía no están, algo llamativo tratándose del navegador que acompaña al Pixel Fold. Se pueden probar activando la flag de plataforma web experimental en chrome://flags y usando el emulador de Surface Duo.

Ahí está el nudo del asunto: la especificación va por delante de los navegadores. Mientras Chrome y el resto no lo implementen, pocos equipos van a dedicar tiempo a una versión del producto que solo una parte de sus usuarios puede aprovechar.