सीएसएस ::बैकड्रॉप इनहेरिटेंस में बदलाव

Bramus

::backdrop का इतिहास

फ़ुलस्क्रीन एपीआई में, टॉप लेयर और ::backdrop एलिमेंट जैसे नए कॉन्सेप्ट जोड़े गए हैं.

• टॉप लेयर, एक नई स्टैकिंग लेयर है. इसे व्यूपोर्ट में उपयोगकर्ता के सबसे करीब रेंडर किया जाता है. इसका साइज़ व्यूपोर्ट के बराबर होता है और यह अन्य सभी लेयर के ऊपर दिखता है.
• ::backdrop सीएसएस स्यूडो-एलिमेंट, व्यूपोर्ट के साइज़ का एक बॉक्स होता है. यह टॉप लेयर में मौजूद किसी भी एलिमेंट के ठीक नीचे रेंडर होता है.

::backdrop के लिए मूल स्पेसिफ़िकेशन की एक सुविधा यह थी:

यह किसी भी एलिमेंट से इनहेरिट नहीं होता और न ही किसी एलिमेंट से इनहेरिट किया जाता है.

हालांकि, ::backdrop की स्टाइल को अलग करने के लिए यह तरीका कारगर था, लेकिन इसका मतलब यह भी था कि ::backdrop के पास :root पर बताई गई किसी भी कस्टम प्रॉपर्टी का ऐक्सेस नहीं था. इस वजह से, वेब डेवलपर को कुछ परेशानी हुई.

इस समस्या को हल करने के लिए, आपको ::backdrop और :root, दोनों पर अपनी कस्टम प्रॉपर्टी के बारे में साफ़ तौर पर बताना पड़ता था, ताकि वे उपलब्ध हो सकें:

/* Pre-Chrome 122 */
:root, ::backdrop {
  --back-color: #333;
}

::backdrop {
  background-color: var(--back-color);
}

::backdrop के बारे में अपडेट

::backdrop से जुड़ी समस्याओं को ठीक करने के लिए, सीएसएस वर्किंग ग्रुप ने इन कॉन्सेप्ट को अपनाया है. साथ ही, अब इन्हें सीएसएस के लिए पोज़िशन किए गए लेआउट की स्पेसिफ़िकेशन में शामिल किया गया है.

परिभाषाओं को नए स्पेसिफ़िकेशन पर ले जाने के साथ-साथ, उनमें सुधार भी किया गया है.

वेब डेवलपर पर सीधे तौर पर असर डालने वाली एक बात यह है कि ::backdrop एलिमेंट अब ट्री के हिसाब से काम करता है. इसका मतलब है कि यह अपने ओरिजिन एलिमेंट से, इनहेरिट की जा सकने वाली सभी प्रॉपर्टी इनहेरिट करता है.

इस बदलाव की मदद से, खास एलिमेंट पर कस्टम प्रॉपर्टी वैल्यू को बदला जा सकता है. साथ ही, ::backdrop के पास इनका ऐक्सेस होगा. उदाहरण के लिए, किसी ओपन <dialog> एलिमेंट से जुड़ा ::backdrop, अब उस <dialog> में उपलब्ध कस्टम प्रॉपर्टी को ऐक्सेस कर सकता है.

/* Chrome 122 and up */
:root {
  --backdrop-color: #333; /* Any ::backdrop can access this custom property */
}

dialog {
  --backdrop-color: #6300ff33; /* The ::backdrop for dialog can access this custom property */
}

::backdrop {
  background-color: var(--backdrop-color);
}