Bu sayfa, Cloud Translation API ile çevrilmiştir.

Katlanabilir API'ler için kaynak deneme

Alexis Menard

Thomas Steiner

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

Sol tarafında tek bir esnek ekran (kusursuz) ve sağ tarafında iki ekranlı (dikey ekran olarak da bilinir) bir cihazın şematik çizimi.

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

Düz veya tablet duruşları olan cihazların şemasal çizimi ve kesintisiz kavisli bir ekran.

continuous: Düz, tablet veya hatta kesintisiz kavisli ekranlar.

Dizüstü bilgisayar veya kitap duruşlarındaki cihazların şematik çizimi.

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.

Yatay ve dikey segmentleri gösteren şema. İlk yatay segment x 0 ve y 0, ikinci x 1 ve y 0'dır. İlk dikey segment x 0 ve y 0, ikinci x 0 ve y 1'dir. — İlk yatay segment x 0 ve y 0, ikinci x 1 ve y 0'dır. İlk dikey segment x 0 ve y 0, ikinci x 0 ve y 1'dir.

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.

Dikey kitap duruşunda katlanabilir telefon.

Yatay kitap duruşunda katlanabilir telefon.

Yatay kitap duruşunda katlanabilir tablet.

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.

Chrome Geliştirici Araçları, katlanabilir bir cihazı taklit ediyor.

İlgili bağlantılar

Device Posture API
Viewport Segmentleri API'si