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

Alexis Menard

Thomas Steiner

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

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

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

ये नए एपीआई, डेवलपर को इन डिवाइसों पर बेहतर उपयोगकर्ता अनुभव देने के तरीके उपलब्ध कराते हैं. हर एपीआई, सीएसएस और 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}.`);

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

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 की पोज़िशन दिखाते हैं. ये पोज़िशन, सेगमेंट को अलग करने वाली हार्डवेयर सुविधाओं से बनाई गई द्वि-डाइमेंशन ग्रिड में होते हैं.

नीचे दिया गया कोड स्निपेट, स्प्लिट 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);

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

फ़ोल्ड किए जा सकने वाले एपीआई आज़माएं

फ़ोल्ड किए जा सकने वाले एपीआई, Chrome 125 से Chrome 128 तक के ऑरिजिन ट्रायल में उपलब्ध हैं. ऑरिजिन ट्रायल के बारे में बैकग्राउंड की जानकारी के लिए, ऑरिजिन ट्रायल के साथ शुरू करना देखें.

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

डेमो

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

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

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