Prova dell'origine per le API pieghevoli

Alexis Menard

Thomas Steiner

Chrome sta sperimentando due API, l'API Device Posture e l'API Viewport segments Enumeration, disponibili come prova dell'origine di Chrome 125. Sono conosciute collettivamente come API per i dispositivi pieghevoli e sono progettate per aiutare gli sviluppatori a scegliere come target i dispositivi pieghevoli. Questo post introduce queste API e fornisce informazioni su come iniziare a testarle.

Nota: queste API sono state sviluppate negli ultimi anni in collaborazione con Microsoft, Intel, Samsung e Google.

Esistono principalmente due diversi fattori di forma fisici: dispositivi con un singolo schermo flessibile (senza soluzione di continuità) e dispositivi con due schermi (con soluzione di continuità, noti anche come dispositivi dual screen).

Questi dispositivi presentano sfide e opportunità per gli sviluppatori. Offrono modi aggiuntivi per visualizzare i contenuti. Ad esempio, un utente potrebbe tenere un dispositivo senza interruzioni come un libro e poi passare a utilizzarlo come un tablet con un schermo piatto. I dispositivi con due schermi hanno un join fisico tra gli schermi che potrebbe essere necessario tenere in considerazione.

Queste nuove API consentono agli sviluppatori di offrire esperienze utente migliori per questi dispositivi. Ogni API espone le primitive della piattaforma web necessarie in due modi, tramite CSS e JavaScript.

API Device Posture

I dispositivi pieghevoli hanno funzionalità che consentono di cambiare la loro_ postura_, ovvero lo stato fisico del dispositivo. Possono cambiare il proprio fattore di forma, consentendo agli autori di contenuti di offrire un'esperienza utente diversa. Queste nuove API garantiscono che i contenuti web possano reagire ai vari stati di chiusura.

Un dispositivo può essere in due posizioni:

• folded: Posture con laptop o libro.

• continuous: display piatti, da tablet o anche curvi senza interruzioni.

CSS

La specifica dell'API Device Posture definisce una nuova funzionalità media CSS: device-posture. Questa funzionalità multimediale si risolve in un insieme di posture fisse. Queste posizioni sono costituite da una serie di valori predefiniti che comprendono ciascuno uno stato fisico del dispositivo.

I valori della funzionalità device-posture corrispondono alla descrizione precedente delle possibili posture:

• folded
• continuous

In futuro potrebbero essere aggiunte nuove posizioni se verranno lanciati nuovi dispositivi sul mercato.

Esempi:

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

Per eseguire query sulla posizione di un dispositivo, è disponibile un nuovo oggetto DevicePosture.

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

Per reagire alle variazioni dell'orientamento del dispositivo, ad esempio quando un utente apre completamente un dispositivo e quindi passa da folded a continuous, iscriviti agli eventi change.

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

API Viewport Segments

I segmenti del viewport sono variabili di ambiente CSS che definiscono la posizione e le dimensioni di una regione del viewport separata in modo logico. I segmenti dell'area visibile vengono creati quando l'area visibile è divisa in base a una o più funzionalità hardware (ad esempio una piegatura o una cerniera tra display separati) che fungono da divisore. I segmenti sono le regioni del viewport che possono essere trattate come distintamente logiche dall'autore.

CSS

Il numero di suddivisioni logiche è esposto tramite due nuove funzionalità dei contenuti multimediali, definite nella specifica CSS Media Queries 5: vertical-viewport-segments e horizontal-viewport-segments. Si risolvono nel numero di segmenti in cui è suddivisa l'area visibile.

Inoltre, sono state aggiunte nuove variabili di ambiente per eseguire query sulle dimensioni di ogni suddivisione logica. Queste variabili sono:

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

Ogni variabile ha due dimensioni, che rappresentano rispettivamente la posizione x e y nella griglia bidimensionale creata dalle funzionalità hardware che separano i segmenti.

Il primo segmento orizzontale è x 0 e y 0, il secondo x 1 e y 0. Il primo segmento verticale è x 0 e y 0, il secondo x 0 e y 1.

Il seguente snippet di codice è un esempio semplificato della creazione di un'esperienza utente divisa in cui abbiamo due sezioni di contenuti (col1 e col2) su ciascun lato della piega.

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

Le seguenti foto mostrano l'esperienza su un dispositivo fisico.

JavaScript

Per ottenere il numero di segmenti del viewport, controlla la voce segments in visualViewport.

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

Nota: durante la prova dell'origine, window.visualViewport.segments funzionerà. La forma finale dell'API deve ancora essere determinata, come indicato nella discussione del gruppo di lavoro CSS.

Ogni voce dell'array segments rappresenta ogni segmento logico dell'area visibile con un DOMArray che descrive le coordinate e le dimensioni. Il campo segments è uno snapshot dello stato specificato quando viene eseguita una query. Per ricevere valori aggiornati, devi ascoltare le modifiche della postura o gli eventi di ridimensionamento ed eseguire nuovamente una query sulla proprietà segments.

Prova le API per dispositivi pieghevoli

Le API per i dispositivi pieghevoli sono disponibili in una prova dell'origine da Chrome 125 a Chrome 128. Consulta la sezione Iniziare a utilizzare le prove delle origini per informazioni di base sulle prove delle origini.

Per i test locali, le API pieghevoli possono essere abilitate con il flag delle funzionalità della piattaforma web sperimentale all'indirizzo chrome://flags/#enable-experimental-web-platform-features. Può essere attivata anche eseguendo Chrome dalla riga di comando con --enable-experimental-web-platform-features.

Demo

Per le demo, consulta il repository demos. Se non hai un dispositivo fisico per eseguire il test, puoi scegliere il dispositivo simulato Galaxy Z Fold 5 o Asus Zenbook Fold in Chrome DevTools e passare da Continuo a Piegato. Puoi anche visualizzare la cerniera, se applicabile.

Link correlati

• API Postura dispositivo
  • Posizione di Mozilla
  • Posizione WebKit
  • Voce dello stato di Chrome
  • Specifiche W3C
• API Viewport Segment
  • Posizione di Mozilla
  • Posizione WebKit
  • Voce dello stato di Chrome
  • Specifica delle query sui contenuti multimediali CSS del W3C e Specifica della variabile di ambiente CSS del W3C