Chrome sta sperimentando due API, l'API Device Posture e l'API Viewport Segment Enumeration, disponibili come prova dell'origine di Chrome 125. note collettivamente come API pieghevoli, progettate per aiutare gli sviluppatori a scegliere come target i dispositivi pieghevoli. Questo post presenta queste API e fornisce informazioni su come iniziare a testarle.
Esistono principalmente due diversi fattori di forma fisica: dispositivi con un singolo schermo flessibile (senza cuciture) e dispositivi con due schermi (con cucitura, noti anche come dispositivi Dual Screen).
Questi dispositivi presentano sfide e opportunità agli sviluppatori. Forniscono altri modi per visualizzare i contenuti. Ad esempio, un utente potrebbe tenere in mano un dispositivo fluido come un libro e poi passare a utilizzarlo come un tablet con uno 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 loro di cambiare la propria postura o lo stato fisico del dispositivo. Possono modificare il proprio fattore di forma consentendo agli autori di contenuti di fornire un'esperienza utente diversa e queste nuove API assicurano che i contenuti web possano reagire ai vari stati di piegatura.
Un dispositivo può trovarsi in due posizioni:
folded: posture del laptop o dei libri.
continuous: display piatti, tablet o persino curvi.
CSS
La specifica dell'API Device Posture definisce una nuova caratteristica media CSS: device-posture. Questa funzionalità multimediale si risolve in un insieme di posture fisse. Queste posture sono costituite da una serie di valori predefiniti, ognuno dei quali include uno stato fisico del dispositivo.
I valori della funzionalità device-posture corrispondono alla descrizione precedente delle
possibili posture:
foldedcontinuous
Se sul mercato verranno commercializzati nuovi dispositivi, potrebbero essere aggiunte nuove posture.
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 postura di un dispositivo, è disponibile un nuovo oggetto DevicePosture.
const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);
Per reagire ai cambiamenti della postura del dispositivo, ad esempio quando un utente apre completamente il dispositivo e passa quindi 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 Segment
I segmenti dell'area visibile sono variabili di ambiente CSS che definiscono la posizione e le dimensioni di una regione logicamente separata dell'area visibile. 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 aree dell'area visibile che possono essere trattate come logicamente distinte dall'autore.
CSS
Il numero di divisioni logiche viene esposto tramite due nuove funzionalità multimediali,
definite nella specifica di livello 5 delle query multimediali CSS:
vertical-viewport-segments e horizontal-viewport-segments. Si risolvono con il numero di segmenti in cui è suddivisa l'area visibile.
Inoltre, sono state aggiunte nuove variabili di ambiente per eseguire query sulle dimensioni di ogni divisione 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.
Lo snippet di codice riportato di seguito è un esempio semplificato della creazione di un'esperienza utente divisa in cui sono presenti due sezioni di contenuti (col1 e col2) su ciascun lato della piegatura.
<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 dell'area visibile, controlla la voce segments in
visualViewport.
const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);
Ogni voce nell'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 alla postura o ridimensionare gli eventi ed eseguire nuovamente query sulla
proprietà segments.
Prova le API pieghevoli
Le API Foldable sono disponibili in una prova dell'origine da Chrome 125 a Chrome 128. Consulta la guida introduttiva alle prove dell'origine per informazioni di base sulle prove dell'origine.
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ò anche essere
attivato 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 con cui eseguire il test, puoi scegliere il dispositivo emulato Galaxy Z Fold 5 o Asus Zenbook Fold in Chrome DevTools e passare dalla modalità Continuo a quella Piegata e viceversa. Puoi anche visualizzare la cerniera, se possibile.
