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.
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.
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
- Viewport Segment API