::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
एलिमेंट अब ट्री पर लागू होने वाला एलिमेंट है. इसका मतलब है कि यह अपने मूल एलिमेंट की सभी इनहेरिट की जा सकने वाली प्रॉपर्टी को इनहेरिट कर लेता है.
ब्राउज़र सहायता
- 122
- 122
- 120
- 78 जीबी में से
इस बदलाव की वजह से खास एलिमेंट पर कस्टम प्रॉपर्टी वैल्यू को बदला जा सकता है और ::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);
}