पेश है पॉपओवर एपीआई

Una Kravets

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

इस समस्या को हल करने के लिए, ब्राउज़र में पॉपओवर बनाने के लिए, एलान वाले एचटीएमएल एपीआई का एक नया सेट उपलब्ध कराया जा रहा है. यह सेट, Chromium 114 में popover एपीआई से शुरू होगा.

पॉपओवर एट्रिब्यूट

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

• 114
• 114
• 125
• 17

सोर्स

सभी जटिलताओं को खुद मैनेज करने के बजाय, popover एट्रिब्यूट और इसके बाद की सुविधाओं के सेट की मदद से, ब्राउज़र को इसे मैनेज करने की अनुमति दी जा सकती है. एचटीएमएल पॉपओवर के साथ काम करता है:

• टॉप लेयर में प्रमोशन. पॉपओवर, पेज के बाकी हिस्से के ऊपर अलग लेयर पर दिखेंगे. इसलिए, आपको z-index से परेशान होने की ज़रूरत नहीं है.
• लाइट को बंद करने की सुविधा. पॉपओवर के बाहर क्लिक करने से, पॉपओवर बंद हो जाएगा और फ़ोकस वापस आ जाएगा.
• फ़ोकस मैनेजमेंट की डिफ़ॉल्ट सेटिंग. पॉपओवर खोलने पर, अगला टैब स्टॉप पॉपओवर में दिखता है.
• सुलभ कीबोर्ड बाइंडिंग. esc बटन दबाने पर, पॉपओवर बंद हो जाएगा और फ़ोकस वापस आ जाएगा.
• ऐक्सेस किए जा सकने वाले कॉम्पोनेंट बाइंडिंग. किसी पॉपओवर एलिमेंट को, पॉपओवर ट्रिगर से सेमेटिक तरीके से कनेक्ट करना.

अब JavaScript का इस्तेमाल किए बिना, इन सभी सुविधाओं के साथ पॉपओवर बनाए जा सकते हैं. किसी बुनियादी पॉपओवर के लिए, ये तीन चीज़ें ज़रूरी हैं:

• पॉपओवर वाले एलिमेंट पर popover एट्रिब्यूट.
• पॉपओवर वाले एलिमेंट पर मौजूद id.
• पॉपओवर खोलने वाले एलिमेंट पर, पॉपओवर के id की वैल्यू वाला popovertarget.

<button popovertarget="my-popover"> Open Popover </button>

<div id="my-popover" popover>
  <p>I am a popover with more information.</p>
</div>

अब आपके पास पूरी तरह से काम करने वाला बुनियादी पॉपओवर है.

देखें

इस पॉपओवर का इस्तेमाल, ज़्यादा जानकारी देने या ज़ाहिर की गई जानकारी वाले विजेट के तौर पर किया जा सकता है.

डिफ़ॉल्ट और बदले गए वैल्यू

डिफ़ॉल्ट रूप से, जैसे कि पिछले कोड स्निपेट में, popovertarget के साथ पॉपओवर सेट अप करने का मतलब है कि पॉपओवर खोलने वाला बटन या एलिमेंट, उसे खोलने और बंद करने के लिए टॉगल करेगा. हालांकि, popovertargetaction का इस्तेमाल करके भी साफ़ तौर पर दिखने वाले पॉपओवर बनाए जा सकते हैं. इससे डिफ़ॉल्ट टॉगल ऐक्शन बदल जाता है. popovertargetaction के विकल्पों में ये शामिल हैं:

popovertargetaction="show": पॉपओवर दिखाता है. popovertargetaction="hide": पॉपओवर को छिपाता है.

popovertargetaction="hide" का इस्तेमाल करके, पॉपओवर में “बंद करें” बटन बनाया जा सकता है. जैसे, यहां दिए गए स्निपेट में:

<button popovertarget="my-popover" popovertargetaction="hide">
    <span aria-hidden="true">❌</span>
    <span class="sr-only">Close</span>
</button>

देखें

अपने-आप खुलने वाले पॉपओवर बनाम मैन्युअल पॉपओवर

popover एट्रिब्यूट का इस्तेमाल करना, असल में popover="auto" के लिए एक शॉर्टकट है. डिफ़ॉल्ट popover को खोलने पर, अपने-आप खुलने वाले अन्य पॉपओवर बंद हो जाएंगे. हालांकि, पैरंट पॉपओवर बंद नहीं होंगे. इसे लाइट-डिसमिज़ या बंद करने के बटन की मदद से खारिज किया जा सकता है.

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

देखें

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

अंतर की समीक्षा करने के लिए:

popover=auto वाले पॉपओवर:

• खुलने पर, अन्य पॉपओवर को जबरदस्ती बंद करें.
• लाइट-डिसमिस की जा सकती है.

popover=manual वाले पॉपओवर:

• किसी दूसरे टाइप के एलिमेंट को ज़बरदस्ती बंद न करें.
• लाइट को बंद न करें. टॉगल या बंद करने की कार्रवाई का इस्तेमाल करके उन्हें बंद करें.

पॉपओवर को स्टाइल करना

अब तक, आपने एचटीएमएल में बुनियादी पॉपओवर के बारे में जाना है. हालांकि, popover में स्टाइल से जुड़ी कुछ अच्छी सुविधाएं भी हैं. इनमें से एक, ::backdrop को स्टाइल करने की सुविधा है.

auto पॉपओवर में, यह लेयर सबसे ऊपर मौजूद लेयर (जहां पॉपओवर मौजूद होता है) के ठीक नीचे होती है. यह लेयर, पेज के बाकी हिस्सों के ऊपर होती है. नीचे दिए गए उदाहरण में, ::backdrop को सेमी-ट्रांसफ़रेंट रंग दिया गया है:

#size-guide::backdrop {
  background: rgb(190 190 190 / 50%);
}

देखें

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

popover और dialog के बीच का अंतर

ध्यान रखें कि popover एट्रिब्यूट अपने-आप सेमेटिक्स नहीं देता. अब popover="auto" का इस्तेमाल करके, मॉडल डायलॉग जैसे अनुभव बनाए जा सकते हैं. हालांकि, इन दोनों के बीच कुछ मुख्य अंतर हैं:

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

देखें

ऊपर दिया गया डेमो, पॉपओवर व्यवहार वाला सेमेंटिक डायलॉग है. इसका मतलब है कि पेज का बाकी हिस्सा इनऐक्टिव नहीं है और डायलॉग पॉपओवर को हटाने के लिए, लाइट-डिसमिज़ बटन का इस्तेमाल किया जा सकता है. इस डायलॉग को पॉपओवर के व्यवहार के साथ बनाने के लिए, नीचे दिए गए कोड का इस्तेमाल करें:

<button popovertarget="candle-01">
  Quick Shop
</button>
<dialog popover id="candle-01">
  <button class="close-btn" popovertarget="candle-01" popovertargetaction="hide">...</button>
  <div class="product-preview-container">
    ...
  </div>
</dialog>

ध्यान दें: WhatWG और OpenUI कम्यूनिटी ग्रुप, फ़िलहाल एचटीएमएल के हिसाब से डायलॉग एलिमेंट खोलने की सुविधा पर चर्चा कर रहे हैं. यह पॉपओवर जैसा ही होगा, लेकिन इसमें पहले बताई गई डायलॉग की सुविधाएं बनी रहेंगी. जैसे, पेज के बाकी हिस्से को इनऐक्टिव करना. popover, dialog, और selectmenu जैसे नए एलिमेंट के बारे में जानने के लिए, इन ग्रुप को देखते रहें.

यह सुविधा जल्द ही उपलब्ध होगी

इंटरैक्टिव एंट्री और एग्ज़िट

अलग-अलग प्रॉपर्टी को ऐनिमेट करने की सुविधा, ब्राउज़र में अभी उपलब्ध नहीं है. इसमें display: none से और उसमें वापस जाने के साथ-साथ, टॉप लेयर से और उसमें वापस जाने के लिए ऐनिमेशन की सुविधा भी शामिल है. हालांकि, इन सुविधाओं को Chromium के आने वाले वर्शन में शामिल किया जाएगा.

अलग-अलग प्रॉपर्टी को ऐनिमेट करने की सुविधा और :popover-open और @starting-style का इस्तेमाल करके, बदलाव से पहले और बदलाव के बाद के स्टाइल सेट अप किए जा सकते हैं. इससे, पॉपओवर खोलने और बंद करने के दौरान आसानी से ट्रांज़िशन किया जा सकता है. पिछले उदाहरण पर ध्यान दें. इसे ऐनिमेशन के साथ दिखाने पर, यह ज़्यादा बेहतर दिखता है और उपयोगकर्ता को बेहतर अनुभव मिलता है:

देखें

ध्यान दें: फ़िलहाल, इस सुविधा को लागू करने की प्रक्रिया जारी है. हालांकि, नए सिंटैक्स के लिए, codepen के डेमो पर क्लिक करें और Chrome Canary में #experimental-web-platform-features फ़्लैग चालू करके इसे आज़माएं.

ऐंकर की पोज़िशनिंग

जब आपको व्यूपोर्ट के आधार पर सूचना, मॉडल या सूचना को पोज़िशन करना हो, तब पॉपओवर का इस्तेमाल करना बेहतर होता है. हालांकि, पॉपओवर मेन्यू, टूलटिप, और दूसरे एलिमेंट के लिए भी काम के होते हैं. इन एलिमेंट को दूसरे एलिमेंट के हिसाब से पोज़िशन करना ज़रूरी होता है. ऐसे में, सीएसएस ऐंकरिंग की सुविधा काम आती है.

यहां दिए गए रेडियल मेन्यू के डेमो में, सीएसएस ऐंकर पोज़िशनिंग के साथ-साथ पॉपओवर एपीआई का इस्तेमाल किया गया है. इससे यह पक्का किया जा सकता है कि पॉपओवर #menu-items हमेशा अपने टॉगल ट्रिगर, #menu-toggle बटन पर ऐंकर हो.

ऐंकर सेट अप करने का तरीका, पॉपओवर सेट अप करने के तरीके से मिलता-जुलता है:

<button id="menu-toggle" popovertarget="menu-items">
  Open Menu
</button>
<ul id="menu-items" popover anchor="menu-toggle">
  <li class="item">...</li>
  <li class="item">...</li>
</ul>

किसी एलिमेंट को id (इस उदाहरण में, #menu-toggle) देकर, उसे ऐंकर के तौर पर सेट अप किया जाता है. इसके बाद, दोनों एलिमेंट को कनेक्ट करने के लिए anchor="menu-toggle" का इस्तेमाल किया जाता है. अब, पॉपओवर को स्टाइल करने के लिए anchor() का इस्तेमाल किया जा सकता है. ऐंकर टॉगल के बेसलाइन से ऐंकर किए गए, बीच में मौजूद पॉपओवर मेन्यू को इस तरह से स्टाइल किया जा सकता है:

#menu-items {
  bottom: anchor(bottom);
  left: anchor(center);
  translate: -50% 0;
}

देखें

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

ध्यान दें: सीएसएस ऐंकरिंग की और भी ज़्यादा दिलचस्प नई सुविधाएं हैं. जैसे, @try स्टेटमेंट, जो व्यूपोर्ट के उपलब्ध स्पेस के आधार पर मेन्यू की पोज़िशन बदलते हैं. हालांकि, ऐसा हो सकता है कि यह सुविधा आपके खाते पर लागू न हो. ज़्यादा जानकारी के लिए, ऊपर दिया गया Codepen डेमो देखें. इसके लिए, Chrome Canary में #experimental-web-platform-features फ़्लैग चालू करें.

नतीजा

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

आपकी मदद के लिए लेख

• डायलॉग और पॉपओवर एक जैसे लगते हैं. इनमें क्या अंतर है?
• सेमांटिक्स और पॉपओवर एट्रिब्यूट
• पॉपओवर के बारे में MDN दस्तावेज़
• OpenUI पॉपओवर के बारे में जानकारी