Chrome teste deux API, l'API Device Posture et l'API Viewport Segments Enumeration, disponibles en tant qu'évaluation origine dans Chrome 125. On les appelle collectivement les API pliables, 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 présentent des défis et des opportunités pour les développeurs. Ils offrent des façons supplémentaires de visionner des contenus. Par exemple, un utilisateur peut tenir un appareil homogène comme un livre, puis l'utiliser comme une tablette à écran plat. Les appareils à deux écrans présentent une jonction physique entre les écrans qui peut nécessiter d'être prise en compte.
Ces nouvelles API permettent aux développeurs d'offrir de meilleures expériences utilisateur sur ces appareils. Chaque API expose les primitives de plate-forme Web requises 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. Ils peuvent modifier leur facteur de forme, ce qui permet aux auteurs de contenu de proposer une expérience utilisateur différente. Ces nouvelles API permettent de s'assurer 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 fonctionnalité multimédia CSS : device-posture. Cette fonctionnalité multimédia résout un ensemble de postures fixes. Ces postures consistent en un certain nombre de valeurs prédéfinies qui englobent chacune un état physique de l'appareil.
Les valeurs de la fonctionnalité device-posture correspondent à la description précédente des postures possibles :
foldedcontinuous
De nouvelles postures pourraient être ajoutées à l'avenir si de nouveaux appareils sont 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
Pour interroger la position d'un appareil, un nouvel objet DevicePosture est disponible.
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 passe donc 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 distincte de la fenêtre d'affichage. Les segments de vue sont créés lorsque la vue est divisée par une ou plusieurs fonctionnalités matérielles (comme un pli ou une charnière entre des écrans distincts) qui servent de séparateur. Les segments sont les régions de la fenêtre d'affichage qui peuvent être traitées comme distinctes par l'auteur.
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 multimédias CSS : vertical-viewport-segments et horizontal-viewport-segments. Ils correspondent au nombre de segments dans lesquels la fenêtre d'affichage est divisée.
De plus, de nouvelles variables d'environnement ont été ajoutées pour interroger les dimensions de chaque division logique. Voici ces variables :
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 la position X et la position Y dans la grille bidimensionnelle créée par les caractéristiques 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 avec deux sections de contenu (col1 et col2) de chaque côté du pli.
<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 vue, consultez 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 DOMArray décrivant les coordonnées et la taille. Le champ segments est un instantané de l'état donné lors de la requête. Pour recevoir des valeurs mises à jour, vous devez écouter les changements de position ou les événements de redimensionnement, puis réinterroger la propriété segments.
Essayer les API pliables
Les API pliables sont disponibles en phase d'évaluation de Chrome 125 à Chrome 128. Pour en savoir plus sur les essais d'origine, consultez la section Premiers pas avec les essais d'origine.
Pour les tests en local, les API pliables peuvent être activées avec l'indicateur de fonctionnalités expérimentales de la plate-forme Web à l'adresse 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 en savoir plus sur les démonstrations, consultez le dépôt de démonstrations. Si vous ne disposez pas d'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, puis basculer entre Continuous (En continu) et Folded (Plié). Vous pouvez également visualiser la charnière, le cas échéant.
