Teste de origem para APIs dobráveis

O Chrome está testando duas APIs: a API Device Posture e os segmentos da janela de visualização. API Enumeration, que estão disponíveis como um teste de origem no Chrome. 125, Elas são conhecidas coletivamente como APIs dobráveis, projetadas para ajudar os desenvolvedores têm como alvo dispositivos dobráveis. Esta postagem apresenta essas APIs e fornece informações sobre como começar a testá-los.

Existem principalmente dois formatos físicos diferentes: dispositivos com um único tela flexível (sem costura) e dispositivos com duas telas (com emenda, também conhecida como dispositivos dual screen).

Desenho esquemático de um dispositivo com uma única tela flexível à esquerda e um dispositivo com duas telas à direita.

Esses dispositivos apresentam desafios e oportunidades para desenvolvedores. Elas oferecem outras formas de visualização do conteúdo. Por exemplo, um usuário pode ter um dispositivo simples, como um livro, e passar a usá-lo como um tablet com uma tela plana. Dispositivos com duas telas têm uma junção física entre elas que podem precisar ser considerados.

Com essas novas APIs, os desenvolvedores podem oferecer melhores experiências do usuário para esses dispositivos. Cada API expõe as primitivas necessárias da plataforma da Web em duas por meio de CSS e JavaScript.

API Device Posture

Os dispositivos dobráveis têm recursos que permitem mudar a_postura_, ou o estado físico do dispositivo. Eles podem mudar o formato, o que permite autores de conteúdo para fornecer uma experiência de usuário diferente, e essas novas APIs tornam garantir que o conteúdo da Web possa reagir aos vários estados de dobra.

Há duas posições em que um dispositivo pode estar:

  • folded: posições de laptops ou livros.

Desenho esquemático de dispositivos nas posições plana ou de tablet e uma tela curva perfeita.

  • continuous: telas planas, de tablet ou até mesmo curvas.

Desenho esquemático de dispositivos nas posições de laptop ou livro.

CSS

A especificação da API Device Posture define um novo CSS de mídia: postura do dispositivo. Esse recurso de mídia se resolve para um conjunto de posturas fixas. Essas posturas consistem em um número de valores predefinidos que abrangem um estado físico da dispositivo.

Os valores do recurso device-posture correspondem à descrição anterior do possíveis posturas:

  • folded
  • continuous

Novas posturas poderão ser adicionadas no futuro se novos dispositivos chegarem ao mercado.

Exemplos:

/* 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 a posição de um dispositivo, um novo objeto DevicePosture é disponibilizado.

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

Para reagir a mudanças de posição do dispositivo, como quando o usuário abre o dispositivo completamente e portanto, mudando de folded para continuous, inscreva-se em eventos change.

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

API Viewport segmentos

Os segmentos da janela de visualização são variáveis de ambiente CSS que definem a posição e dimensões de uma região logicamente separada da janela de visualização. Os segmentos da janela de visualização são é criado quando a janela de visualização é dividida por um ou mais recursos de hardware (como uma dobra ou articulação entre telas separadas) que atua como um divisor. Os segmentos são as regiões da janela de visualização que podem ser tratadas como logicamente distintas pelo autor.

CSS

O número de divisões lógicas é exposto por meio de dois novos recursos de mídia: definido na especificação de nível 5 das consultas de mídia CSS: vertical-viewport-segments e horizontal-viewport-segments. Eles resolvem o número de segmentos em que a janela de visualização está dividida.

Além disso, novas variáveis de ambiente foram adicionadas para consultar as dimensões de cada divisão lógica. Essas variáveis são:

  • 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 variável tem duas dimensões, que representam as posições x e y, respectivamente, na grade bidimensional criada pelos atributos de hardware separando os segmentos.

Diagrama mostrando segmentos horizontais e verticais. O primeiro segmento horizontal é x 0 e y 0, o segundo é x 1 e y 0. O primeiro segmento vertical é x 0 e y 0, o segundo x 0 e y 1.
O primeiro segmento horizontal é x 0 e y 0, e o segundo é x 1 e y. 0. O primeiro segmento vertical é x 0 e y 0, o segundo x 0 e y 1.

O snippet de código a seguir é um exemplo simplificado de criação de uma UX dividida em que temos duas seções de conteúdo (col1 e col2) em cada lado da dobra.

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

As fotos a seguir mostram como é a experiência em um dispositivo físico.

Smartphone dobrável na postura de livro na vertical.

Smartphone dobrável na postura de livro na horizontal.

Tablet dobrável na postura de livro horizontal.

JavaScript

Para saber o número de segmentos da janela de visualização, verifique a entrada segments no visualViewport.

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

Cada entrada na matriz segments representa cada segmento lógico da janela de visualização com um DOMArray descrevendo as coordenadas e o tamanho. O segments é um resumo do estado determinado quando consultado para receber valores necessários para detectar alterações de posição ou redimensionar eventos e consultar novamente o segments.

Teste as APIs dobráveis

As APIs dobráveis estão disponíveis em um teste de origem do Chrome 125 ao 128. Consulte Introdução aos testes de origem para informações contextuais sobre testes de origem.

Para testes locais, as APIs dobráveis podem ser ativadas com a versão experimental da Web flag de recursos da plataforma em chrome://flags/#enable-experimental-web-platform-features: Também pode ser ativado executando o Chrome na linha de comando com --enable-experimental-web-platform-features:

Demonstrações

Para ver as demonstrações, consulte a página de demonstrações repositório. Se você não tiver um dispositivo físico para testar, escolha o Galaxy Z Fold 5 ou a Asus Dispositivo emulado Zenbook Fold no Chrome DevTools e alterne entre Contínuo e Folded. Também é possível visualizar a articulação quando aplicável.

Chrome DevTools emulando um dispositivo dobrável.