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

Una Kravets

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

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

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

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

• 114
• 114
• 125
• 17

सोर्स

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

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