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

Alexis Menard

Thomas Steiner

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

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

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

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

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

Device Posture API

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

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

• folded: लैपटॉप या किताब पढ़ने के पोज़िशन.

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

सीएसएस

Device Posture API स्पेसिफ़िकेशन में, एक नई CSS मीडिया-फ़ीचर—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}`);
});

Viewport Segments API

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

सीएसएस

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

नीचे दिया गया कोड स्निपेट, स्प्लिट यूज़र एक्सपीरियंस बनाने का आसान उदाहरण है. इसमें, फ़ोल्ड की हर तरफ़ दो कॉन्टेंट सेक्शन (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 प्रॉपर्टी से फिर से क्वेरी करनी होगी.

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

फ़ोल्ड किए जा सकने वाले डिवाइसों के लिए बने एपीआई, 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 वाले एमुलेट किए गए डिवाइस को चुना जा सकता है. साथ ही, कंटिन्यूअस और फ़ोल्ड किए गए मोड के बीच स्विच किया जा सकता है. जब यह लागू हो, तब हिंज को विज़ुअलाइज़ भी किया जा सकता है.

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

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