Uji coba origin untuk Foldable API

Alexis Menard
Alexis Menard
Thomas Steiner
Thomas Steiner

Chrome sedang menguji coba dua API, yaitu Device Posture API dan Viewport Segment Enumeration API, yang tersedia sebagai uji coba origin dari Chrome 125. Secara kolektif, API ini dikenal sebagai API Foldable, yang dirancang untuk membantu developer menargetkan perangkat foldable. Postingan ini memperkenalkan API ini, dan memberikan informasi tentang cara mulai mengujinya.

Ada dua faktor bentuk fisik utama yang berbeda: perangkat dengan satu layar fleksibel (mulus), dan perangkat dengan dua layar (dengan sambungan, juga dikenal sebagai perangkat dua layar).

Gambar skema perangkat dengan satu layar fleksibel (mulus) di sebelah kiri, dan perangkat dengan dua layar (dengan sambungan, juga dikenal sebagai dual screen) di sebelah kanan.

Perangkat ini memberikan tantangan dan peluang bagi para developer. Format ini memberikan cara lain untuk menonton konten. Misalnya, pengguna mungkin memegang perangkat yang mulus seperti buku, lalu beralih menggunakannya seperti tablet dengan layar datar. Perangkat dengan dua layar memiliki gabungan fisik antara layar-layar yang mungkin perlu diperhitungkan.

API baru ini memberikan cara bagi developer untuk memberikan pengalaman pengguna yang lebih baik bagi perangkat ini. Setiap API mengekspos primitif platform web yang diperlukan dalam dua cara, melalui CSS dan JavaScript.

API Posture Perangkat

Perangkat foldable memiliki kemampuan yang memungkinkannya mengubah_ postur_, atau status fisik perangkat. API baru ini dapat mengubah faktor bentuk sehingga penulis konten dapat memberikan pengalaman pengguna yang berbeda, dan API baru ini memastikan konten web dapat bereaksi terhadap berbagai status lipat.

Ada dua postur perangkat yang dapat digunakan perangkat:

  • folded: Postur laptop atau buku.

Gambar skema perangkat dalam postur datar atau tablet, dan layar melengkung yang mulus.

  • continuous: Layar datar, tablet, atau bahkan lengkung yang mulus.

Gambar skema perangkat di postur laptop atau buku.

CSS

Spesifikasi Device Posture API menentukan fitur media CSS baru—postur perangkat. Fitur media ini me-resolve ke serangkaian postur tetap. Postur ini terdiri dari sejumlah nilai yang telah ditentukan yang masing-masing mencakup status fisik perangkat.

Nilai fitur device-posture cocok dengan deskripsi kemungkinan postur sebelumnya:

  • folded
  • continuous

Postur baru dapat ditambahkan di masa mendatang jika perangkat baru diluncurkan ke pasar.

Contoh:

/* 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

Untuk membuat kueri postur perangkat, objek DevicePosture baru tersedia.

const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);

Untuk bereaksi terhadap perubahan postur perangkat, seperti pengguna membuka perangkat sepenuhnya sehingga beralih dari folded ke continuous, berlangganan peristiwa change.

navigator.devicePosture.addEventListener('change', (e) => {
  console.log(`The device posture changed to type ${e.type}`);
});

API Segmen Area Pandang

Segmen area pandang adalah variabel lingkungan CSS yang menentukan posisi dan dimensi area area pandang yang terpisah secara logis. Segmen area pandang dibuat saat area pandang dibagi oleh satu atau beberapa fitur hardware (seperti lipatan atau engsel di antara layar yang terpisah) yang berfungsi sebagai pemisah. Segmen adalah wilayah area pandang yang dapat diperlakukan berbeda secara logis oleh penulis.

CSS

Jumlah pembagian logis yang diekspos melalui dua fitur media baru, yang ditentukan dalam spesifikasi Level 5 Kueri Media CSS: vertical-viewport-segments dan horizontal-viewport-segments. Dia menentukan jumlah segmen yang dibagi area pandang.

Selain itu, variabel lingkungan baru telah ditambahkan untuk mengkueri dimensi setiap pembagian logis. Variabel-variabel ini adalah:

  • 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)

Setiap variabel memiliki dua dimensi, yang masing-masing mewakili posisi x dan y dalam petak dua dimensi yang dibuat oleh fitur hardware yang memisahkan segmen.

Diagram yang menampilkan segmen horizontal dan vertikal. Segmen horizontal pertama adalah x 0 dan y 0, yang kedua x 1 dan y 0. Segmen vertikal pertama adalah x 0 dan y 0, yang kedua x 0 dan y 1.
Segmen horizontal pertama adalah x 0 dan y 0, yang kedua x 1 dan y 0. Segmen vertikal pertama adalah x 0 dan y 0, yang kedua x 0 dan y 1.

Cuplikan kode berikut adalah contoh sederhana untuk membuat UX terpisah dengan dua bagian konten (col1 dan col2) di setiap sisi lipatan.

<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>

Foto berikut menunjukkan tampilan pengalaman di perangkat fisik.

Ponsel foldable dalam postur buku vertikal.

Ponsel foldable dalam postur buku horizontal.

Tablet foldable dalam postur buku horizontal.

JavaScript

Untuk mendapatkan jumlah segmen area tampilan, periksa entri segments di visualViewport.

const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);

Setiap entri dalam array segments mewakili setiap segmen logis dari area pandang dengan DOMArray yang menjelaskan koordinat dan ukuran. Kolom segments adalah snapshot dari status yang ditentukan saat dikueri. Agar dapat menerima nilai terbaru, Anda perlu memproses perubahan postur atau mengubah ukuran peristiwa dan mengkueri ulang properti segments.

Mencoba API Foldable

API Foldable tersedia dalam uji coba origin dari Chrome 125 hingga Chrome 128. Lihat Memulai uji coba origin untuk mengetahui informasi latar belakang tentang uji coba origin.

Untuk pengujian lokal, API Foldable dapat diaktifkan dengan flag fitur Web Platform Eksperimental di chrome://flags/#enable-experimental-web-platform-features. Fungsi ini juga dapat diaktifkan dengan menjalankan Chrome dari command line dengan --enable-experimental-web-platform-features.

Demo

Untuk demo, lihat repositori demo. Jika tidak memiliki perangkat fisik untuk melakukan pengujian, Anda dapat memilih perangkat emulasi Galaxy Z Fold 5 atau Asus Zenbook Fold di Chrome DevTools lalu beralih antara Continuous dan Folded. Anda juga dapat memvisualisasikan engsel jika memungkinkan.

Chrome DevTools mengemulasi perangkat foldable.