टोस्ट नोटिफ़िकेशन बनाना

वेब सुविधाएं: पॉपओवर ऐंकर पोज़िशनिंग sibling-count() और sibling-index() transition-behavior

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

लागू करने से जुड़े दिशा-निर्देश

  • ज़रूरी: popover="manual" का इस्तेमाल करें, ताकि सूचना तब तक दिखती रहे, जब तक उसे साफ़ तौर पर बंद न किया जाए या स्क्रिप्ट के ज़रिए टाइम आउट न किया जाए.
  • एक से ज़्यादा टोस्ट को स्टैक करने के लिए, कंटेनर का इस्तेमाल करें. टॉप लेयर में मौजूद पॉपओवर, पैरंट z-इंडेक्स को अनदेखा करते हैं. इसलिए, आपको उन्हें अलग-अलग या किसी सामान्य लेआउट ग्रुप में रखना होगा.
  • टोस्ट नोटिफ़िकेशन के बीच मार्जिन जोड़ने के लिए, sibling-index() का इस्तेमाल करें, ताकि स्टैक में नीचे मौजूद आइटम दिखें.
  • टोस्ट में "बंद करें" बटन ज़रूर दें. इसके लिए, popovertargetaction="hide" का इस्तेमाल करें.
  • अपने-आप खारिज होने वाले टाइमर के लिए, JavaScript का इस्तेमाल ज़रूर करें. उदाहरण के लिए, 3,000 मि॰से॰ के बाद hidePopover() को कॉल करना.
  • DO utilize transition-behavior: allow-discrete to animate the entry and exit from the Top Layer.

फ़ॉलबैक रणनीतियां

पॉपओवर के लिए फ़ॉलबैक और ब्राउज़र की सुविधा

Popover API ज़्यादातर प्रोग्रेसिव एन्हांसमेंट है. हालांकि, इसके मुख्य व्यवहार — टॉप-लेयर प्रमोशन, लाइट-डिसमिस, और popovertarget को शुरू करना — सिर्फ़ सीएसएस के बराबर नहीं हैं. पुराने ब्राउज़र के लिए, polyfill की ज़रूरत होती है. अगर आपको polyfill का इस्तेमाल नहीं करना है, तो मैन्युअल फ़ॉलबैक की ज़रूरत होती है.

पॉलीफ़िल: पुराने ब्राउज़र में popover एट्रिब्यूट का इस्तेमाल करने के लिए, शर्त के मुताबिक @oddbird/popover-polyfill लोड करें. ज़रूरी: HTMLElement.prototype पर popover प्रॉपर्टी की जांच करके, सुविधा का पता लगाएं. साथ ही, पॉलीफ़िल को सिर्फ़ तब लोड करें, जब नेटिव सपोर्ट मौजूद न हो. इसे बिना किसी शर्त के लोड न करें.

बंडलर या इंपोर्ट मैप के साथ:

// MANDATORY: Feature detect 'popover' on HTMLElement.prototype.
if (!("popover" in HTMLElement.prototype)) {
  import("@oddbird/popover-polyfill");
}

बंडलर के बिना, <script type="module"> में सीडीएन से इंपोर्ट करें:

<script type="module">
  if (!("popover" in HTMLElement.prototype)) {
    import("https://unpkg.com/@oddbird/popover-polyfill@latest/dist/popover.min.js");
  }
</script>

स्टाइलिंग से जुड़ी चेतावनी: polyfill, असल :popover-open स्यूडो-क्लास को तय नहीं कर सकता. इसलिए, यह इसके बजाय .\:popover-open क्लास लागू करता है. ज़रूरी: दोनों को :is() या :where() के साथ जोड़ें. ऐसा न करने पर, जिन ब्राउज़र में :popover-open नहीं है वे पूरे नियम को खारिज कर देते हैं:

[popover]:is(:popover-open, .\:popover-open) {
  display: block;
}

इसके अलावा, बिना polyfill के लेगसी फ़ॉलबैक के लिए, position: fixed का इस्तेमाल करें और getBoundingClientRect() की मदद से मैन्युअल तरीके से निर्देशांकों का हिसाब लगाएं. इसके अलावा, अगर इस्तेमाल के उदाहरण के लिए यह स्वीकार्य है, तो inset: auto के साथ डिफ़ॉल्ट पोज़िशनिंग का इस्तेमाल करें.

sibling-index()

  • सलाह: अगर sibling-index() काम नहीं करता है, तो मार्जिन को मैन्युअल तरीके से जोड़ने के लिए, + ऑपरेटर का इस्तेमाल करें. उदाहरण के लिए, popover + popover { margin-top: 1rem }

anchor-positioning

  • सलाह: सीएसएस ऐंकर पोज़िशनिंग पॉलीफ़िल का इस्तेमाल करें. नॉन-पॉलीफ़िल फ़ॉलबैक के लिए, @supports not (anchor-name: --foo) का इस्तेमाल करके टूलटिप को व्यूपोर्ट के सबसे नीचे एक तय जगह पर डिफ़ॉल्ट रूप से सेट करें.

transition-behavior

  • सलाह: अगर transition-behavior काम नहीं करता है, तो JavaScript का इस्तेमाल करके क्लास के ज़रिए ऐनिमेशन जोड़ें. ऐसा इसलिए, क्योंकि टोस्ट एलिमेंट ट्रांज़िशन इन और आउट होता है.