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

Bramus

::backdrop का इतिहास

Fullscreen API में नए कॉन्सेप्ट शामिल किए गए हैं, जैसे कि टॉप लेयर और ::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);
}