Uji coba origin untuk Foldable API

Alexis Menard

Thomas Steiner

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

Catatan: API ini dikembangkan selama beberapa tahun terakhir melalui kolaborasi dengan Microsoft, Intel, Samsung, dan Google.

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

Perangkat ini memberikan tantangan dan peluang bagi developer. Dasbor ini menyediakan cara tambahan untuk melihat konten. Misalnya, pengguna mungkin memegang perangkat yang lancar seperti buku, lalu berubah menggunakannya seperti tablet dengan layar datar. Perangkat dengan dua layar memiliki gabungan fisik di antara layar yang mungkin perlu diperhitungkan.

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

API Postur Perangkat

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

Perangkat dapat memiliki dua postur:

• folded: Postur laptop atau buku.

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

CSS

Spesifikasi Device Posture API menentukan fitur media CSS yang baru—device-posture. 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 sebelumnya dari kemungkinan postur:

• 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 sepenuhnya membuka perangkat sehingga beralih dari folded ke continuous, berlanggananlah ke 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 tampilan yang terpisah secara logis. Segmen area pandang dibuat saat area pandang dibagi oleh satu atau beberapa fitur hardware (seperti lipatan atau engsel di antara tampilan terpisah) yang berfungsi sebagai pemisah. Segmen adalah area area pandang yang dapat diperlakukan sebagai berbeda secara logis oleh penulis.

CSS

Jumlah pembagian logis yang diekspos melalui dua fitur media baru, yang ditentukan dalam spesifikasi Kueri Media CSS Level 5: vertical-viewport-segments dan horizontal-viewport-segments. Metode ini me-resolve sesuai jumlah segmen yang dipecah pada area pandang.

Selain itu, variabel lingkungan baru telah ditambahkan untuk membuat kueri dimensi setiap divisi logis. Variabel tersebut 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.

Segmen horizontal pertama adalah x 0 dan y 0, 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 paruh.

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

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 tertentu saat dikueri, agar dapat menerima nilai yang diperbarui, Anda harus memproses perubahan postur atau peristiwa pengubahan ukuran dan mengkueri ulang properti segments.

Mencoba Foldable API

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

Untuk pengujian lokal, Foldable API dapat diaktifkan dengan tanda fitur Platform Web Eksperimental di chrome://flags/#enable-experimental-web-platform-features. Fitur 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 diuji, Anda dapat memilih perangkat emulasi Galaxy Z Fold 5 atau Asus Zenbook Fold di Chrome DevTools dan beralih antara Continuous dan Folded. Anda juga dapat memvisualisasikan engsel jika sesuai.

Link terkait

• Device Posture API
  • Posisi Mozilla
  • Posisi WebKit
  • Entri Status Chrome
  • Spesifikasi W3C
• Viewport Segment API
  • Posisi Mozilla
  • Posisi WebKit
  • Entri Status Chrome
  • Spesifikasi Kueri Media CSS W3C dan Spesifikasi Variabel Lingkungan CSS W3C
  • Spesifikasi W3C JS