Prueba de origen para las APIs de Foldable

Alexis Menard

Thomas Steiner

Chrome está probando dos APIs, la API de Device Posture y la API de Viewport Segments Enumeration, que están disponibles como una prueba de origen desde Chrome 125. Estas se conocen en conjunto como las APIs de dispositivos plegables, diseñadas para ayudar a los desarrolladores a segmentarse para dispositivos plegables. En esta entrada, se presentan estas APIs y se proporciona información para comenzar a probarlas.

Nota: Estas APIs se desarrollaron durante los últimos años en colaboración con Microsoft, Intel, Samsung y Google.

Principalmente, hay dos factores de forma físicos diferentes: dispositivos con una sola pantalla flexible (sin inconvenientes) y dispositivos con dos pantallas (con costura, también conocidos como dispositivos con pantalla doble).

Estos dispositivos presentan desafíos y oportunidades a los desarrolladores. Ofrecen formas adicionales de visualizar el contenido. Por ejemplo, un usuario puede sostener un dispositivo fluido, como un libro, y, luego, pasar a usarlo como una tablet con pantalla plana. Los dispositivos con dos pantallas tienen una unión física entre ellas que puede ser necesario tener en cuenta.

Estas nuevas APIs permiten que los desarrolladores proporcionen mejores experiencias del usuario para estos dispositivos. Cada API expone las primitivas necesarias de la plataforma web de dos maneras: mediante CSS y JavaScript.

API de postura del dispositivo

Los dispositivos plegables tienen capacidades que les permiten cambiar su posición o el estado físico del dispositivo. Pueden cambiar su factor de forma para que los autores de contenido proporcionen una experiencia del usuario diferente, y estas nuevas APIs garantizan que el contenido web pueda reaccionar a los diferentes estados de plegado.

El dispositivo puede estar en dos posiciones:

• folded: Posiciones de laptop o libro.

• continuous: Pantallas planas, para tablets o incluso curvas fluidas.

CSS

La especificación de la API de Device Posture define una nueva función multimedia de CSS: device-posture. Esta función multimedia se resuelve en un conjunto de posiciones fijas. Estas posiciones constan de una serie de valores predefinidos que incluyen un estado físico del dispositivo.

Los valores del componente device-posture coinciden con la descripción anterior de posiciones posibles:

• folded
• continuous

En el futuro, podrían agregarse nuevas posturas si llegan nuevos dispositivos al mercado.

Ejemplos:

/* Using the device in a 'book' posture. */
@media (device-posture: folded) { ... }

/* Using the device in a 'flat' posture, or any typical device like a laptop or
desktop device. */
@media (device-posture: continuous) { ... }

JavaScript

Para consultar la posición de un dispositivo, hay un nuevo objeto DevicePosture disponible.

const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);

Para reaccionar a los cambios de posición del dispositivo, como cuando un usuario abre por completo un dispositivo y, por lo tanto, pasa de folded a continuous, suscríbete a eventos change.

navigator.devicePosture.addEventListener('change', (e) => {
  console.log(`The device posture changed to type ${e.type}`);
});

API de segmentos de viewport

Los segmentos de viewport son variables de entorno de CSS que definen la posición y las dimensiones de una región del viewport separada de forma lógica. Los segmentos del viewport se crean cuando este se divide por una o más funciones de hardware (como un pliegue o una bisagra entre pantallas separadas) que actúan como divisor. Los segmentos son las regiones del viewport que el autor puede tratar como distintas lógicamente.

CSS

La cantidad de divisiones lógicas se expone a través de dos funciones multimedia nuevas, definidas en la especificación de las consultas de medios de CSS de nivel 5: vertical-viewport-segments y horizontal-viewport-segments. Se resuelven a la cantidad de segmentos en los que se divide el viewport.

Además, se agregaron nuevas variables de entorno para consultar las dimensiones de cada división lógica. Estas variables son las siguientes:

• 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)

Cada variable tiene dos dimensiones, que representan la posición x e y, respectivamente, en la cuadrícula bidimensional que crean las funciones de hardware que separan los segmentos.

El primer segmento horizontal es x 0 e y 0, y el segundo x 1 y, además, y 0. El primer segmento vertical es x 0 e y 0, mientras que el segundo x 0 y y 1.

El siguiente fragmento de código es un ejemplo simplificado de la creación de una UX dividida en la que tenemos dos secciones de contenido (col1 y col2) a cada lado de la mitad superior.

<style>
  /* Segments are laid out horizontally. */
  @media (horizontal-viewport-segments: 2) {
    #segment-css-container {
      flex-direction: row;
    }

    #col1 {
      display: flex;
      flex: 0 0 env(viewport-segment-right 0 0);
      background-color: steelblue;
    }

    #fold {
      width: calc(env(viewport-segment-left 1 0) - env(viewport-segment-right 0 0));
      background-color: black;
      height: 100%;
    }

    #col2 {
      display: flex;
      background-color: green;
    }
  }

  /* Segments are laid out vertically. */
  @media (vertical-viewport-segments: 2) {
    #segment-css-container {
      flex-direction: column;
    }

    #col1 {
      display: flex;
      flex: 0 0 env(viewport-segment-bottom 0 0);
      background-color: pink;
    }

    #fold {
      width: 100%;
      height: calc(env(viewport-segment-top 0 1) - env(viewport-segment-bottom 0 0));
      background-color: black;
    }

    #col2 {
      display: flex;
     background-color: seagreen;
    }
  }
</style>

<div id="segment-css-container">
   <div id="col1"></div>
   <div id="fold"></div>
   <div id="col2"></div>
 </div>

En las siguientes fotos, se muestra cómo se ve la experiencia en un dispositivo físico.

JavaScript

Para obtener la cantidad de segmentos de viewport, verifica la entrada segments en visualViewport.

const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);

Cada entrada en el array segments representa cada segmento lógico del viewport con una DOMArray que describe las coordenadas y el tamaño. El campo segments es una instantánea del estado dado cuando se consulta. Para recibir los valores actualizados, debes detectar los cambios de posición o cambiar el tamaño de los eventos y volver a consultar la propiedad segments.

Prueba las APIs de Foldable

Las APIs de dispositivos plegables están disponibles en una prueba de origen de Chrome 125 a Chrome 128. Consulta Comienza a usar las pruebas de origen para obtener información general sobre las pruebas de origen.

Para las pruebas locales, las APIs de Foldable se pueden habilitar con la marca de funciones de la plataforma web experimental en chrome://flags/#enable-experimental-web-platform-features. También se puede habilitar mediante la ejecución de Chrome desde la línea de comandos con --enable-experimental-web-platform-features.

Demostraciones

Para ver demostraciones, consulta el repositorio de demostraciones. Si no tienes un dispositivo físico para realizar la prueba, puedes elegir el dispositivo emulado Galaxy Z Fold 5 o Asus Zenbook Fold en las Herramientas para desarrolladores de Chrome y cambiar entre Continuo y Plegado. También puedes visualizar la bisagra cuando corresponda.

Vínculos relacionados

• API de Device Posture
  • Posición de Mozilla
  • Posición de WebKit
  • Entrada de estado de Chrome
  • Especificaciones del W3C
• API de segmentos de viewport
  • Posición de Mozilla
  • Posición de WebKit
  • Entrada de estado de Chrome
  • Especificación de consultas de medios CSS de W3C y Especificación de variables de entorno de CSS W3C
  • Especificación de W3C JS