फ़ोल्ड किए जा सकने वाले एपीआई का ऑरिजिन ट्रायल

Alexis Menard

Thomas Steiner

Chrome, दो एपीआई को टेस्ट कर रहा है: Device Posture API और व्यूपोर्ट सेगमेंट Enumeration API, जो Chrome 125 के ऑरिजिन ट्रायल के तौर पर उपलब्ध हैं. इन्हें फ़ोल्ड किए जा सकने वाले एपीआई कहा जाता है. इन्हें इस तरह से डिज़ाइन किया गया है कि डेवलपर, फ़ोल्ड किए जा सकने वाले डिवाइसों को टारगेट कर सकें. इस पोस्ट में इन एपीआई के बारे में बताया गया है. साथ ही, इन एपीआई की जांच शुरू करने के तरीके के बारे में जानकारी दी गई है.

ध्यान दें: इन एपीआई को पिछले कुछ सालों में Microsoft, Intel, Samsung, और Google के साथ मिलकर बनाया गया है.

डिवाइस का नाप या आकार मुख्य रूप से दो अलग-अलग होता है: एक फ़्लेक्सिबल स्क्रीन वाले डिवाइस (बेहद आसान) और दो स्क्रीन वाले डिवाइस (सीम वाले डिवाइस, जिसे ड्यूअल स्क्रीन डिवाइस भी कहा जाता है).

ये डिवाइस डेवलपर के लिए चुनौतियां और अवसर उपलब्ध कराते हैं. इनसे कॉन्टेंट को देखने के और भी तरीके मिलते हैं. उदाहरण के लिए, कोई उपयोगकर्ता किसी किताब जैसे बिना रुकावट के डिवाइस को पकड़ सकता है और फिर उसे फ़्लैट स्क्रीन वाले टैबलेट की तरह इस्तेमाल कर सकता है. दो स्क्रीन वाले डिवाइसों में उन स्क्रीन के बीच फ़िज़िकल जॉइन होता है जिन्हें ध्यान में रखना पड़ सकता है.

ये नए एपीआई, डेवलपर को इन डिवाइसों के लिए बेहतर उपयोगकर्ता अनुभव देने के तरीके उपलब्ध कराते हैं. हर एपीआई, ज़रूरी वेब प्लैटफ़ॉर्म प्रिमिटिव को सीएसएस और JavaScript के ज़रिए दो तरीकों से दिखाता है.

डिवाइस पॉस्चर एपीआई

फ़ोल्ड किए जा सकने वाले डिवाइसों में ऐसी सुविधाएं होती हैं जिनकी मदद से, डिवाइस की पोज़िशन बदली जा सकती है. वे अपने डिवाइस का नाप या आकार बदल सकते हैं, ताकि कॉन्टेंट लिखने वालों को अलग-अलग उपयोगकर्ता अनुभव मिल सके. ये नए एपीआई यह पक्का करते हैं कि वेब कॉन्टेंट, फ़ोल्ड होने की अलग-अलग स्थितियों के हिसाब से काम करे.

डिवाइस को इन दो पोज़िशन में इस्तेमाल किया जा सकता है:

• folded: लैपटॉप या बुक पॉस्चर.

• continuous: फ़्लैट, टैबलेट या किसी भी तरह के आसान वक्र डिसप्ले.

सीएसएस

Device Posture API की खास जानकारी में, एक नई सीएसएस मीडिया-फ़ीचर device-posture के बारे में बताया गया है. यह मीडिया सुविधा, तय आस-पास की पोज़िशन पर ले जाती है. इन पॉस्चर में पहले से तय की गई कई वैल्यू होती हैं, जिनमें से हर वैल्यू में डिवाइस की भौतिक स्थिति शामिल होती है.

device-posture सुविधा की वैल्यू, पोज़िशन के पिछले ब्यौरे से मेल खाती हैं:

• folded
• continuous

अगर आने वाले समय में नए डिवाइस मार्केट में लॉन्च किए जाते हैं, तो आने वाले समय में नए पॉस्चर जुड़ सकते हैं.

उदाहरण:

/* 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

किसी डिवाइस के पॉस्चर के बारे में क्वेरी करने के लिए, एक नया DevicePosture ऑब्जेक्ट उपलब्ध है.

const { type } = navigator.devicePosture;
console.log(`The current device is of type ${type}.`);

डिवाइस के पॉस्चर में होने वाले बदलावों पर प्रतिक्रिया देने के लिए, change इवेंट की सदस्यता लें. इन बदलावों में, उपयोगकर्ता को डिवाइस को पूरी तरह से खोलना और folded से continuous की ओर बढ़ना शामिल है.

navigator.devicePosture.addEventListener('change', (e) => {
  console.log(`The device posture changed to type ${e.type}`);
});

व्यूपोर्ट सेगमेंट एपीआई

व्यूपोर्ट सेगमेंट, सीएसएस एनवायरमेंट वैरिएबल होते हैं. ये व्यूपोर्ट के लॉजिक के हिसाब से अलग-अलग इलाके की जगह और डाइमेंशन को तय करते हैं. व्यूपोर्ट सेगमेंट तब बनाए जाते हैं, जब व्यूपोर्ट को एक या उससे ज़्यादा हार्डवेयर सुविधाओं (जैसे कि एक फ़ोल्ड या अलग-अलग डिसप्ले के बीच एक, ऐंबियंट मोड) से बांटा जाता है. ये सुविधाएं, डिवाइडर की तरह काम करती हैं. सेगमेंट, व्यूपोर्ट के वे क्षेत्र होते हैं जिन्हें लेखक, लॉजिकल रूप से अलग-अलग समझ सकता है.

सीएसएस

लॉजिकल डिवीज़न की संख्या, दो नई मीडिया सुविधाओं से दिखती है. इनकी जानकारी, सीएसएस मीडिया क्वेरी लेवल 5 की खास जानकारी में दी गई है: vertical-viewport-segments और horizontal-viewport-segments. वे उन सेगमेंट की संख्या तय करते हैं जिनमें व्यूपोर्ट शामिल किया गया है.

इसके अलावा, हर लॉजिकल डिवीज़न के डाइमेंशन की क्वेरी करने के लिए, नए एनवायरमेंट वैरिएबल जोड़े गए हैं. ये वैरिएबल हैं:

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

हर वैरिएबल में दो डाइमेंशन होते हैं, जो x और y की पोज़िशन को दिखाते हैं. यह क्रम से, हार्डवेयर सुविधाओं की मदद से बने दो-डाइमेंशन वाले ग्रिड में होता है.

पहला हॉरिज़ॉन्टल सेगमेंट x 0 और y 0 है, दूसरा x 1, और y 0 है. पहला वर्टिकल सेगमेंट x 0 और y 0 है, दूसरा x 0, और y 1 है.

नीचे दिया गया कोड स्निपेट, अलग-अलग UX बनाने का आसान उदाहरण है. यहां पेज के हर हिस्से में कॉन्टेंट के दो सेक्शन (col1 और col2) हैं.

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

नीचे दी गई फ़ोटो से यह पता चलता है कि किसी डिवाइस पर अनुभव कैसा दिखता है.

JavaScript

व्यूपोर्ट सेगमेंट की संख्या जानने के लिए, visualViewport में segments एंट्री देखें.

const segments = window.visualViewport.segments;
console.log('The viewport has the following segments:', segments);

ध्यान दें: ऑरिजिन ट्रायल के दौरान, window.visualViewport.segments काम करेगा. सीएसएस वर्किंग ग्रुप की चर्चा के मुताबिक, एपीआई को किस तरह का बनाया जा सकता है, यह तय करना अब भी बाकी है.

segments कलेक्शन की हर एंट्री, व्यूपोर्ट के हर लॉजिकल सेगमेंट को दिखाती है. इसमें निर्देशांक और साइज़ की जानकारी देने वाला DOMArray होता है. segments फ़ील्ड, क्वेरी किए जाने पर दी गई स्थिति का स्नैपशॉट होता है. अपडेट की गई वैल्यू पाने के लिए, आपको पॉस्चर में होने वाले बदलावों को सुनना होगा या इवेंट का साइज़ बदलना होगा. साथ ही, segments प्रॉपर्टी के लिए फिर से क्वेरी करनी होगी.

Foldable API आज़माएं

Foldable API, Chrome 125 से लेकर Chrome 128 तक के ऑरिजिन ट्रायल के लिए उपलब्ध हैं. ऑरिजिन ट्रायल के बारे में बैकग्राउंड की जानकारी के लिए, ऑरिजिन ट्रायल का इस्तेमाल शुरू करना देखें.

लोकल टेस्टिंग के लिए, Foldable API को chrome://flags/#enable-experimental-web-platform-features पर एक्सपेरिमेंट के तौर पर उपलब्ध वेब प्लैटफ़ॉर्म की सुविधाओं के फ़्लैग के साथ चालू किया जा सकता है. इसे --enable-experimental-web-platform-features की मदद से, कमांड लाइन से Chrome को चलाकर भी चालू किया जा सकता है.

डेमो

डेमो के लिए, डेमो डेटा स्टोर करने की जगह देखें. अगर आपके पास टेस्ट करने के लिए कोई फ़िज़िकल डिवाइस नहीं है, तो Chrome DevTools में Galaxy Z Fold5 या Asus Zenbook Fold की नकल वाला डिवाइस चुना जा सकता है. इसके बाद, लगातार और फ़ोल्ड किए गए डिवाइस के बीच स्विच किया जा सकता है. जब यह लागू हो, तब हिंज को विज़ुअलाइज़ भी किया जा सकता है.

इसी विषय से जुड़े कुछ लिंक

• डिवाइस पॉस्चर एपीआई
  • Mozilla पोज़िशन
  • वेबकिट पोज़िशन
  • Chrome के स्टेटस की जानकारी
  • W3C की खास बातें
• व्यूपोर्ट सेगमेंट एपीआई
  • Mozilla पोज़िशन
  • वेबकिट पोज़िशन
  • Chrome के स्टेटस की जानकारी
  • W3C सीएसएस मीडिया क्वेरी स्पेसिफ़िकेशन और W3C सीएसएस एनवायरमेंट वैरिएबल की खास बातें