Chrome teste deux API : l'API Device Posture et l'API Viewport Segments Enumeration, disponibles en phase d'évaluation à partir de Chrome 125. Elles sont collectivement appelées "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 couture, également appelés appareils à double écran).
Ces appareils présentent des défis et des opportunités pour les développeurs. Elles offrent d'autres moyens d'afficher le contenu. Par exemple, un utilisateur peut tenir un appareil fluide tel qu'un livre, puis l'utiliser comme une tablette avec un écran plat. Les appareils dotés de deux écrans ont une jointure physique entre les écrans qui peut nécessiter une prise en compte.
Ces nouvelles API permettent aux développeurs d'améliorer l'expérience utilisateur sur ces appareils. Chaque API expose les primitives de 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, c'est-à-dire l'état physique de l'appareil. Ils peuvent modifier leur facteur de forme, ce qui permet aux auteurs de contenu d'offrir une expérience utilisateur différente, et ces nouvelles API garantissent que le contenu Web peut réagir aux différents états de pliage.
Un appareil peut être dans deux positions:
folded: position d'un ordinateur portable ou d'un livre
continuous: écrans plats, pour tablette ou même incurvés parfaitement fluides.
CSS
La spécification de l'API Device Posture définit une nouvelle fonctionnalité multimédia CSS : device-posture. Cette fonctionnalité multimédia permet de définir un ensemble de positions fixes. Ces positions sont constituées d'un certain nombre de valeurs prédéfinies, chacune englobant un état physique de l'appareil.
Les valeurs de la caractéristique device-posture correspondent à la description précédente des positions possibles:
foldedcontinuous
De nouvelles stratégies 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
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 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 la fenêtre d'affichage sont des variables d'environnement CSS qui définissent la position et les dimensions d'une région logiquement séparée 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 en fonction d'une ou de plusieurs caractéristiques matérielles (telles qu'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 qui peuvent être traitées de manière logique 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 des requêtes média CSS de niveau 5 : vertical-viewport-segments et horizontal-viewport-segments. Elles 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. 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 comporte deux dimensions, qui représentent les positions X et Y, respectivement, dans la grille à deux dimensions 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 dans laquelle nous avons 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 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é. Afin de recevoir les valeurs mises à jour, vous devez écouter les changements de position ou redimensionner les événements, puis interroger à nouveau la propriété segments.
Essayer les API Foldable
Les API Foldable sont disponibles en phase d'évaluation de Chrome 125 à Chrome 128. Pour en savoir plus sur ces phases, consultez Premiers pas avec les phases d'évaluation.
Pour les tests en local, les API pliables peuvent être activées à l'aide de l'indicateur de 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 accéder aux démonstrations, consultez le dépôt des 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 Continue et Fold. Vous pouvez également visualiser la charnière, le cas échéant.
Liens associés
- API Device Posture
- API Viewport Segments