Chrome, iki API'yi deniyor: Device Posture API ve Viewport Segmentleri Enumeration API, Chrome 125'ten kaynak denemesi olarak mevcuttur. Bunlar, geliştiricilerin katlanabilir cihazları hedeflemesine yardımcı olmak için tasarlanmış Katlanabilir API'ler olarak bilinir. Bu gönderide söz konusu API'ler tanıtılmakta ve nasıl test edilmeye başlanacağı açıklanmaktadır.
Temel olarak iki farklı fiziksel form faktörü vardır: tek esnek ekranlı (kusursuz ekran) ve iki ekranlı cihazlar (diyaloğu olan, çift ekranlı cihazlar olarak da bilinir).
Bu cihazlar, geliştiricilere bazı zorluklar ve fırsatlar sunar. Bunlar, içeriğin görüntülenebileceği ek yöntemler sunar. Örneğin, kullanıcı kitap gibi sorunsuz bir cihaz tuttuktan sonra bunu düz ekranlı bir tablet gibi kullanmaya geçebilir. İki ekranı olan cihazlarda, ekranlar arasında hesaba katılması gerekebilecek fiziksel bir bağlantı bulunur.
Bu yeni API'ler, geliştiricilerin bu cihazlarda daha iyi kullanıcı deneyimi sağlamaları için yöntemler sunar. Her API, gerekli web platformu temel öğelerini CSS ve JavaScript üzerinden iki şekilde sunar.
Cihaz Posture API'si
Katlanabilir cihazlarda duruşlarını veya fiziksel durumunu değiştirebilecekleri özellikler bulunur. Form faktörlerini değiştirerek içerik yazarlarının farklı bir kullanıcı deneyimi sunmasını sağlayabilirler. Bu yeni API'ler, web içeriğinin çeşitli katlama durumlarına tepki vermesini sağlar.
Bir cihaz iki farklı duruşta olabilir:
folded
: Dizüstü bilgisayar veya kitap duruşları.
continuous
: Düz, tablet veya hatta kesintisiz kavisli ekranlar.
CSS
Device Posture API spesifikasyonu yeni bir CSS medya özelliği (device-posture) tanımlar. Bu medya özelliği, bir dizi sabit duruşa çözüm getirir. Bu duruşlar, her biri cihazın fiziksel durumunu kapsayan önceden tanımlanmış bir dizi değerden oluşur.
device-posture
özelliğinin değerleri, olası duruşlarla ilgili önceki açıklamayla eşleşir:
folded
continuous
İlerleyen zamanlarda piyasaya yeni cihazlar gelirse yeni duruşlar eklenebilir.
Örnekler:
/* 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
Cihazın duruşunu sorgulamak için yeni bir DevicePosture
nesnesi kullanılabilir.
const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);
Kullanıcının cihazı tamamen açması ve dolayısıyla folded
konumundan continuous
konumuna geçmesi gibi cihaz duruşu değişikliklerine tepki vermek için change
etkinliklerine abone olun.
navigator.devicePosture.addEventListener('change', (e) => {
console.log(`The device posture changed to type ${e.type}`);
});
Görünüm Segmentleri API'si
Görüntü alanı segmentleri, görüntü alanının mantıksal olarak ayrı bir bölgesinin konumunu ve boyutlarını tanımlayan CSS ortamı değişkenleridir. Görüntü alanı segmentleri, görüntü alanı, ayırıcı görevi gören bir veya daha fazla donanım özelliğiyle (ayrı ekranlar arasındaki katlama veya menteşe gibi) bölündüğünde oluşturulur. Segmentler, yazar tarafından mantıksal olarak farklı şekilde işlenebilecek görüntü alanı bölgeleridir.
CSS
Mantıksal bölümlerin sayısı, CSS Medya Sorguları Düzey 5 spesifikasyonunda tanımlanan iki yeni medya özelliği aracılığıyla gösterilir: vertical-viewport-segments
ve horizontal-viewport-segments
. Bunlar, görüntü alanının ayrıldığı segment sayısına çözümlenir.
Ayrıca, her mantıksal bölümün boyutlarını sorgulamak için yeni ortam değişkenleri eklendi. Bu değişkenler şunlardır:
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)
Her değişkenin, segmentleri ayıran donanım özelliklerinin oluşturduğu iki boyutlu ızgarada sırasıyla x ve y konumunu temsil eden iki boyutu vardır.
Aşağıdaki kod snippet'i, ekranın her iki tarafında iki içerik bölümünün (col1 ve col2) bulunduğu bölünmüş bir kullanıcı deneyimi oluşturmaya dair basitleştirilmiş bir örnektir.
<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>
Aşağıdaki fotoğraflarda, deneyimin fiziksel bir cihazda nasıl göründüğü gösterilmektedir.
JavaScript
Görüntü alanı segmentlerinin sayısını öğrenmek için visualViewport
içindeki segments
girişini kontrol edin.
const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);
segments
dizisindeki her giriş, koordinatları ve boyutu açıklayan bir DOMArray
ile görüntü alanının her mantıksal segmentini temsil eder. segments
alanı, sorgu yapıldığında belirtilen durumun anlık görüntüsüdür. Güncel değerleri almak için duruş değişikliklerini dinlemeniz veya etkinlikleri yeniden boyutlandırmanız ve segments
özelliğini yeniden sorgulamanız gerekir.
Katlanabilir API'leri deneyin
Katlanabilir API'ler Chrome 125 ile Chrome 128 arasındaki kaynak denemesinde mevcuttur. Kaynak denemeleri hakkında arka plan bilgileri için Kaynak denemelerini kullanmaya başlama bölümüne bakın.
Yerel test için Katlanabilir API'ler, chrome://flags/#enable-experimental-web-platform-features
adresindeki Deneysel Web Platformu özellikleri işaretiyle etkinleştirilebilir. Bu özellik, Chrome'u --enable-experimental-web-platform-features
ile komut satırından çalıştırarak da etkinleştirilebilir.
Demolar
Demolar için demolar deposuna göz atın. Test yapacağınız fiziksel bir cihazınız yoksa Chrome Geliştirici Araçları'nda Galaxy Z Fold 5 veya Asus Zenbook Fold emülasyonlu cihazı seçebilir ve Sürekli ile Katlanmış modlar arasında geçiş yapabilirsiniz. Uygun olduğunda menteşeyi de görselleştirebilirsiniz.
İlgili bağlantılar
- Device Posture API
- Viewport Segmentleri API'si