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).
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.
continuous: telas planas, de tablet ou até mesmo curvas.
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:
foldedcontinuous
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.
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.
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.
