Popover API के माध्यम से पॉपओवर फीचर लागू करना

 (developer.mozilla.org)
2 पॉइंट द्वारा GN⁺ 2024-05-11 | 1 टिप्पणियां | WhatsApp पर शेयर करें

Popover API की मुख्य बातें संक्षेप में

Popover API का परिचय

  • Popover API डेवलपर्स को पेज कंटेंट के ऊपर पॉपओवर कंटेंट दिखाने के लिए एक मानकीकृत, सुसंगत और लचीला मैकेनिज़्म प्रदान करता है
  • पॉपओवर कंटेंट को HTML attributes का उपयोग करके declarative तरीके से या JavaScript के माध्यम से नियंत्रित किया जा सकता है

Popover की विशेषताएँ और उपयोग का तरीका

  • पॉपओवर दो प्रकार के होते हैं: Modal और Non-modal, और Popover API से बनाए गए पॉपओवर हमेशा Non-modal होते हैं
    • Modal का मतलब है कि पॉपओवर दिखने के दौरान पेज का बाकी हिस्सा non-interactive रूप में render होता है
    • Non-modal का मतलब है कि पॉपओवर दिखने के दौरान भी पेज के बाकी हिस्से के साथ interact किया जा सकता है
  • पॉपओवर के सामान्य उपयोग मामलों में action menu, custom "toast" notifications, form element suggestions, content picker, या educational UI शामिल हैं
  • पॉपओवर को HTML attributes के जरिए declarative रूप से या JavaScript API के माध्यम से बनाया जा सकता है

Popover API से संबंधित HTML attributes

  • popover: किसी element को पॉपओवर element में बदलने वाला global attribute
  • popovertarget: <button> या <input> element को पॉपओवर control button में बदलता है
  • popovertargetaction: control <button> या <input> द्वारा नियंत्रित पॉपओवर element पर किए जाने वाले action को निर्दिष्ट करता है

Popover API से संबंधित CSS फीचर्स

  • ::backdrop: पॉपओवर element के ठीक पीछे रखा जाने वाला full-screen element, जिससे आवश्यकता होने पर पॉपओवर के पीछे के पेज कंटेंट पर प्रभाव जोड़ा जा सकता है
  • :popover-open: एक pseudo-class जो केवल तब match करता है जब पॉपओवर element visible state में हो, और इसका उपयोग पॉपओवर दिखने पर styles लागू करने के लिए किया जा सकता है

Popover API से संबंधित interfaces और extensions

  • ToggleEvent: वह event जो उपयोगकर्ता को सूचित करता है जब पॉपओवर element की state show और hide के बीच toggle होती है
  • HTMLElement.popover, HTMLButtonElement.popoverTargetElement, HTMLInputElement.popoverTargetElement, HTMLButtonElement.popoverTargetAction, HTMLInputElement.popoverTargetAction जैसी instance properties जोड़ी गई हैं
  • HTMLElement.hidePopover(), HTMLElement.showPopover(), HTMLElement.togglePopover() जैसी instance methods जोड़ी गई हैं
  • beforetoggle, toggle events जोड़े गए हैं

GN⁺ की राय

  • Popover API इस मायने में महत्वपूर्ण है कि यह web developers को पॉपओवर UI आसानी से लागू करने का एक standard तरीका देता है। पहले इसके लिए library का उपयोग करना पड़ता था या इसे खुद implement करना पड़ता था
  • हालांकि, यह भी ध्यान में रखना चाहिए कि Popover API अभी experimental feature है और browser support सीमित है। production environment में उपयोग के लिए polyfill या मौजूदा libraries के साथ इसका संयुक्त उपयोग विचार करने योग्य है
  • समान फीचर देने वाली libraries में Bootstrap का Popover component, Tippy.js आदि शामिल हैं
  • Popover API का उपयोग करते समय accessibility पहलू भी ध्यान में रखना चाहिए। पॉपओवर को keyboard से नियंत्रित किया जा सके, और screen reader उपयोगकर्ताओं के लिए alternative text भी उपलब्ध कराया जाना चाहिए

संबंधित पढ़ाई

1 टिप्पणियां

 
GN⁺ 2024-05-11
Hacker News राय

संक्षेप में बात यह है.

  • जब CSS Anchor Positioning आ जाएगा, तो Popover API के साथ मिलाकर custom tooltip या context menu को declarative तरीके से implement किया जा सकेगा, जिससे PopperJS जैसी लाइब्रेरी की ज़रूरत नहीं रहेगी.
  • अगर modal dialog चाहिए, तो <dialog> element भी इस्तेमाल किया जा सकता है.
  • अभी popover की implementation में सीमाएँ हैं, जैसे यह browser window की सीमा से बाहर नहीं जा सकता, यानी host OS windowing system के साथ इसका integration अच्छा नहीं है. इसे ठीक से implement करने के लिए Win32 में हर popover के लिए अलग HWND और macOS में NSView की ज़रूरत होगी.
  • Browser में popup blocker होते हुए भी ऐसा API बनाना थोड़ा विडंबनापूर्ण लगता है. इससे 90 के दशक के अंत से 2000 के शुरुआती वर्षों तक चले popup/popunder विज्ञापन युद्ध याद आते हैं.
  • Popover API का इस्तेमाल होने पर extensions के ज़रिए इन्हें target करके block करना आसान हो जाएगा. इसका ज़्यादातर इस्तेमाल marketing CTA या intrusive support chat जैसी चीज़ों में होगा, जिन्हें उपयोगकर्ता पसंद नहीं करते.
  • अगर Popover को modal बनाना है, तो <dialog> element इस्तेमाल करने को कहा जाता है, लेकिन background blur जैसी स्थिति में popover को modal बनाना ही सही use case है. क्या <popover modal=true> बेहतर तरीका नहीं होगा?
  • Stimulus + Popper के साथ custom implementation का example code साझा किया गया.
  • इस बात की ओर इशारा किया गया कि पेज पर ऐसा कोई image नहीं है जो दिखाए कि popover आखिर है क्या.
  • Popover API आने पर हैरानी और प्रशंसा वाली प्रतिक्रिया.