Katlanabilir API'ler için kaynak deneme

Alexis Menard
Alexis Menard
X GitHub
Thomas Steiner

Chrome, iki API'yi denemektedir: Device Posture API ve Viewport Segmentleri Sıralama API'si. Bunlar Chrome 125'te kaynak denemesi olarak kullanılabilir. Katlanabilir API'ler, geliştiricilerin katlanabilir cihazları hedeflemesine yardımcı olmak amacıyla tasarlanan Katlanabilir API'ler olarak bilinir. Bu yayında söz konusu API'ler tanıtılmakta ve test edilmeye nasıl başlanacağı konusunda bilgiler verilmektedir.

Esas olarak iki farklı fiziksel form faktörü vardır: tek bir esnek ekrana sahip (kesintisiz) ve iki ekranı olan (dik konuma sahip, çift ekranlı cihazlar olarak da bilinir) cihazlar.

Sol tarafında tek bir esnek ekran (sorunsuz), sağ tarafında ise iki ekran (dikişli, çift ekran olarak da bilinir) bulunan bir cihazın şematik çizimi.

Bu cihazlar geliştiricilere zorluklar ve fırsatlar sunar. Bunlar, içeriğin görüntülenebileceği başka yollar sağlar. Örneğin, kullanıcı kitap gibi sorunsuz bir cihazı tutabilir ve sonra bu cihazı düz ekranlı bir tablet gibi kullanmaya geçebilir. İki ekranı olan cihazların ekranlar arasında dikkat edilmesi gereken fiziksel bir bağlantı bulunur.

Bu yeni API'ler, geliştiricilerin bu cihazlar için daha iyi kullanıcı deneyimleri sağlamaları için yollar sunar. Her API, gerekli web platformu temel öğelerini CSS ve JavaScript aracılığıyla iki şekilde sunar.

Cihaz Posture API'sı

Katlanabilir cihazlar, cihazın konumunu veya fiziksel durumunu değiştirme olanağı sunar. İçerik yazarlarının farklı bir kullanıcı deneyimi sağlamasına izin vermek için form faktörlerini değiştirebilirler. Bu yeni API'ler, web içeriğinin çeşitli katlama durumlarına tepki verebilmesini sağlar.

Bir cihazın bulunabileceği iki cihaz durumu vardır:

  • folded: Dizüstü bilgisayar veya kitap duruşları.

Cihazların düz veya tablet duruşundaki şematik çizimi ve kesintisiz kavisli ekran.

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

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

CSS

Device Posture API spesifikasyonu, yeni bir CSS medya özelliği olan device-posture'u tanımlar. Bu medya özelliği bir dizi sabit duruşa çözümlenir. 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, önceki olası durum açıklamasıyla eşleşir:

  • folded
  • continuous

Pazara yeni cihazlar gelirse gelecekte 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çıp folded tarihinden continuous adlı ürüne geçmesi gibi cihaz durumu 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üntü Alanı 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ği (katlama veya ayrı ekranlar arasındaki menteşe gibi) tarafından bölündüğünde oluşturulur. Segmentler, görüntü alanının yazar tarafından mantıksal olarak farklı sayılabilecek bölgeleridir.

CSS

Mantıksal bölümlerin sayısı, CSS Medya Sorguları Düzey 5 spesifikasyonunda tanımlanmış iki yeni medya özelliği aracılığıyla gösterilir: vertical-viewport-segments ve horizontal-viewport-segments. Görüntü alanının ayrıldığı segment sayısına çözümlenirler.

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 özellikleri tarafından oluşturulan iki boyutlu ızgarada sırasıyla x ve y konumunu temsil eden iki boyutu vardır.

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

Aşağıdaki kod snippet'i, ekranın her iki tarafında iki içerik bölümü (col1 ve col2) bulunan bölünmüş bir kullanıcı deneyimi oluşturmanın basitleştirilmiş bir örneğidir.

<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 cihazlarda nasıl göründüğü gösterilmektedir.

Dikey kitap pozisyonunda katlanabilir telefon.

Yatay kitap pozisyonunda katlanabilir telefon.

Yatay kitap görünümündeki 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 bir mantıksal segmentini temsil eder. segments alanı, sorgulandığında belirtilen durumun anlık görüntüsüdür. Güncellenmiş 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 deneme sürümünde kullanılabilir. Kaynak denemeleriyle ilgili arka plan bilgileri için Kaynak denemelerini kullanmaya başlama bölümüne bakın.

Yerel testler için katlanabilir API'ler, chrome://flags/#enable-experimental-web-platform-features adresindeki Deneysel Web Platformu özellikleri işaretiyle etkinleştirilebilir. Bu özelliği, Chrome'u --enable-experimental-web-platform-features ile komut satırından çalıştırarak da etkinleştirilebilir.

Demolar

Demolar için demo deposuna göz atın. Test yapabileceğiniz 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 Continuous ile Folded arasında geçiş yapabilirsiniz. Uygun olduğunda menteşeyi de görselleştirebilirsiniz.

Katlanabilir cihazı emüle eden Chrome Geliştirici Araçları.