Phase d'évaluation pour les API pliables

Alexis Menard

Thomas Steiner

Chrome teste deux API : l'API Device Posture et les segments de fenêtre d'affichage L'API Enumeration, disponible en tant qu'évaluation de l'origine dans Chrome 125. Ces API sont collectivement désignées sous le nom d'API Foldable, conçues pour aider les entreprises les développeurs ciblent les appareils pliables. Cet article présente ces API fournit des informations sur la façon de commencer à les tester.

Il existe principalement deux facteurs de forme physiques différents: les appareils dotés d'un seul écran flexible (sans couture) et les appareils à deux écrans (avec la jointure, également appelés que les appareils à double écran).

Ces appareils représentent des défis et des opportunités pour les développeurs. Ils offrent d'autres façons de regarder des contenus. Par exemple, un utilisateur peut détenir un comme un livre, puis de l'utiliser comme une tablette avec un un écran plat. Les appareils avec deux écrans ont une jointure physique entre les écrans que vous devrez peut-être prendre en compte.

Ces nouvelles API permettent aux développeurs d'améliorer l'expérience utilisateur pour ces appareils. Chaque API expose les primitives de la plate-forme Web nécessaires dans deux à l'aide des langages 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 aux auteurs de contenu pour offrir une expérience utilisateur différente, et ces nouvelles API rendent 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 un nouveau CSS media-feature : device-posture. Cette fonctionnalité multimédia résout un ensemble de positions fixes. Ces postures consistent un certain nombre de valeurs prédéfinies englobant chacune un état physique appareil.

Les valeurs de la caractéristique device-posture correspondent à la description précédente de postures possibles:

• folded
• continuous

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 l'appareil Par conséquent, passez 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 d'une zone logiquement séparée de la fenêtre d'affichage. Les segments de fenêtre d'affichage sont créée 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 séparés) qui servent de séparateur. Les segments sont les zones de la fenêtre d'affichage qui peuvent être traitées comme des éléments logiquement distincts par auteur.

CSS

Le nombre de divisions logiques est exposé grâce à deux nouvelles fonctionnalités multimédias : défini dans la spécification du niveau 5 des requêtes média CSS: vertical-viewport-segments et horizontal-viewport-segments. Ils sont déterminés à le nombre de segments dans lesquels la fenêtre d'affichage est divisée.

En outre, de nouvelles variables d'environnement ont été ajoutées pour interroger les dimensions 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 a deux dimensions, qui représentent les positions x et y, respectivement dans la grille bidimensionnelle créée par les caractéristiques matérielles séparer les segments.

</ph> <ph type="x-smartling-placeholder">

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 la 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 du fenêtre d'affichage avec un élément DOMArray décrivant les coordonnées et la taille. segments est un instantané de l'état donné lorsqu'il est interrogé, afin de recevoir dont vous avez besoin pour écouter les changements de position, redimensionner les événements et interroger à nouveau segments.

Essayer les API Foldable

Les API Foldable sont disponibles dans un phase d'évaluation de Chrome 125 à Chrome 128. Voir Premiers pas avec les phases d'évaluation pour obtenir des informations générales sur les phases d'évaluation.

Pour les tests en local, les API pliables peuvent être activées avec la version expérimentale Option des fonctionnalités de la plate-forme à l'adresse chrome://flags/#enable-experimental-web-platform-features Il peut aussi être en exécutant Chrome depuis la ligne de commande avec --enable-experimental-web-platform-features

Démonstrations

Pour voir les démonstrations, consultez les un dépôt de clés. Si vous ne disposez pas d'un un appareil physique à tester, vous pouvez opter pour le Galaxy Z Fold 5 ou le Asus appareil émulé Zenbook Fold dans les outils pour les développeurs Chrome et basculer entre Continue et Plié. Vous pouvez également visualiser la charnière lorsque applicables.

Liens associés

• API Device Posture <ph type="x-smartling-placeholder">
  </ph>
  • Position de Mozilla
  • Position WebKit
  • Saisie de l'état de Chrome
  • Spécification W3C
• API Viewport Segments <ph type="x-smartling-placeholder">
  </ph>
  • Position de Mozilla
  • Position WebKit
  • Saisie de l'état de Chrome
  • Spécification W3C CSS Media Query et Spécification des variables d'environnement CSS du W3C