Chrome teste deux API, l'API Device Posture et l'API Viewport Segments Enumeration, disponibles en tant qu'évaluation origine dans Chrome 125. Ces API sont collectivement désignées sous le nom d'API Foldable, conçues pour aider les développeurs à cibler les appareils pliables. Cet article présente ces API et explique comment commencer à les tester.
Il existe principalement deux facteurs de forme physiques différents: les appareils avec un seul écran flexible (sans couture) et les appareils à deux écrans (avec jointure), également appelés appareils à double écran.
Ces appareils représentent des défis et des opportunités pour les développeurs. Elles offrent des moyens supplémentaires de regarder le contenu. Par exemple, un utilisateur peut tenir un appareil simple comme un livre, puis l'utiliser comme une tablette avec un écran plat. Les appareils dotés de deux écrans disposent d'une jointure physique entre les écrans, ce qui peut être nécessaire.
Ces nouvelles API permettent aux développeurs d'améliorer l'expérience utilisateur sur ces appareils. Chaque API présente les primitives de la plate-forme Web nécessaires de deux manières : via CSS et JavaScript.
API Device Posture
Les appareils pliables disposent de fonctionnalités qui leur permettent de modifier leur position ou l'état physique de l'appareil. Elles peuvent modifier leur facteur de forme afin que les auteurs de contenu puissent offrir une expérience utilisateur différente. Ces nouvelles API garantissent que le contenu Web peut réagir aux différents états de pliage.
Un appareil peut se trouver dans deux positions:
folded: positions sur ordinateur portable ou livre.
continuous: écrans plats, tablettes ou même incurvés pour un rendu fluide.
CSS
La spécification de l'API Device Posture définit une nouvelle caractéristique média CSS : device-posture. Cette fonctionnalité multimédia résout un ensemble de positions fixes. Ces positions sont constituées d'un certain nombre de valeurs prédéfinies qui englobent chacune un état physique de l'appareil.
Les valeurs de la caractéristique device-posture correspondent à la description précédente des stratégies possibles:
foldedcontinuous
De nouvelles stratégies pourraient être ajoutées à l'avenir si de nouveaux appareils étaient commercialisés.
Exemples :
/* 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
Un nouvel objet DevicePosture est disponible pour interroger la position d'un appareil.
const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);
Pour réagir aux changements de position de l'appareil, par exemple lorsqu'un utilisateur ouvre complètement un appareil et donc passe de folded à continuous, abonnez-vous aux événements change.
navigator.devicePosture.addEventListener('change', (e) => {
console.log(`The device posture changed to type ${e.type}`);
});
API Viewport Segments
Les segments de fenêtre d'affichage sont des variables d'environnement CSS qui définissent la position et les dimensions d'une région séparée logiquement de la fenêtre d'affichage. Les segments de fenêtre d'affichage sont créés lorsque la fenêtre d'affichage est divisée par une ou plusieurs caractéristiques matérielles (comme un pli ou une charnière entre des écrans distincts) qui servent de séparateur. Les segments sont les zones de la fenêtre d'affichage que l'auteur peut traiter comme étant logiquement distinctes.
CSS
Le nombre de divisions logiques est exposé via deux nouvelles fonctionnalités multimédias, définies dans la spécification de niveau 5 des requêtes média CSS : vertical-viewport-segments et horizontal-viewport-segments. Elles correspondent au nombre de segments entre lesquels la fenêtre d'affichage est divisée.
En outre, de nouvelles variables d'environnement ont été ajoutées pour interroger les dimensions de chaque division logique. Ces variables sont les suivantes:
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)
Chaque variable possède deux dimensions, qui représentent respectivement les positions x et y dans la grille à deux dimensions créée par les fonctionnalités matérielles séparant les segments.
L'extrait de code suivant est un exemple simplifié de création d'une expérience utilisateur fractionnée dans laquelle nous avons deux sections de contenu (col1 et col2) de chaque côté de la ligne de flottaison.
<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>
Les photos suivantes montrent à quoi ressemble l'expérience sur un appareil physique.
JavaScript
Pour obtenir le nombre de segments de fenêtre d'affichage, vérifiez l'entrée segments dans visualViewport.
const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);
Chaque entrée du tableau segments représente chaque segment logique de la fenêtre d'affichage, avec un élément DOMArray décrivant les coordonnées et la taille. Le champ segments est un instantané de l'état donné lorsqu'il est interrogé. Pour recevoir les valeurs mises à jour, vous devez écouter les changements de stratégie ou les événements de redimensionnement, et interroger à nouveau la propriété segments.
Essayer les API Foldable
Les API pliables sont disponibles en phase d'évaluation de Chrome 125 à Chrome 128. Pour en savoir plus, consultez la section Premiers pas avec les phases d'évaluation.
Pour les tests en local, les API pliables peuvent être activées avec l'indicateur des fonctionnalités expérimentales de la plate-forme Web sur chrome://flags/#enable-experimental-web-platform-features. Vous pouvez également l'activer en exécutant Chrome à partir de la ligne de commande avec --enable-experimental-web-platform-features.
Démonstrations
Pour voir des démonstrations, consultez le dépôt de démonstrations. Si vous ne disposez pas d'un appareil physique pour effectuer des tests, vous pouvez choisir l'appareil émulé Galaxy Z Fold 5 ou Asus Zenbook Fold dans les outils pour les développeurs Chrome, et basculer entre Continu et Folded. Vous pouvez également visualiser la charnière, le cas échéant.
