एडमिन के तय किए गए सीएसएस नेम और शैडो डीओएम, एक साथ काम करते हैं. हालांकि, ब्राउज़र इस स्पेसिफ़िकेशन के मुताबिक काम नहीं करते. कभी-कभी, एक-दूसरे के साथ भी काम नहीं करते. साथ ही, हर सीएसएस का नाम अलग-अलग तरीके से काम करता है.
इस लेख में, लेखक के तय किए गए सीएसएस नामों के व्यवहार के बारे में बताया गया है. यह जानकारी, शैडो स्कोप में मौजूद है. उम्मीद है कि यह लेख, आने वाले समय में इंटरऑपरेबिलिटी को बेहतर बनाने के लिए गाइड के तौर पर काम करेगा.
लेखक के तय किए गए सीएसएस नाम क्या होते हैं?
लेखक के तय किए गए सीएसएस नाम, सीएसएस सिंटैक्स का एक पुराना तरीका है. इसे मूल रूप से @keyframes नियम के लिए शुरू किया गया था. यह <keyframe-name> को कस्टम-आईडी या स्ट्रिंग के तौर पर तय करता है. इस सिद्धांत का मकसद स्टाइलशीट के एक हिस्से में किसी चीज़ के बारे में बताना और दूसरे हिस्से में उसके बारे में बताना है.
/* "fade-in" is a CSS name, representing a set of keyframes */
@keyframes fade-in {
from { opacity: 0 };
to { opacity: 1 }
}
.card {
/* "fade-in" is a reference to the above keyframes */
animation-name: fade-in;
}
सीएसएस के नामों का इस्तेमाल करने वाली अन्य सीएसएस सुविधाओं में फ़ॉन्ट, प्रॉपर्टी के एलान, कंटेनर क्वेरी, और हाल ही में व्यू ट्रांज़िशन, ऐंकर पोज़िशनिंग, और स्क्रोल-ड्रिवन ऐनिमेशन शामिल हैं. यहां दी गई टेबल में, उन नामों की जानकारी दी गई है जिनकी स्थिति Chrome जांचता है. हालांकि, इसमें सभी नाम शामिल नहीं हैं.
| सुविधा | नाम का एलान | नाम का रेफ़रंस |
|---|---|---|
| मुख्य-फ़्रेम | @keyframes |
animation-name |
| फ़ॉन्ट | @font-face { }
@font-palette-values |
font-family
font-palette |
| प्रॉपर्टी के एलान | @propertyरजिस्टर नहीं की गई कोई भी कस्टम प्रॉपर्टी का एलान |
var() |
| ट्रांज़िशन देखना | view-transition-name
view-transition-class |
::view-transition-* स्यूडो एलिमेंट |
| ऐंकर की पोज़िशनिंग | anchor-name |
position-anchor |
| स्क्रोल की मदद से बनाया गया ऐनिमेशन | view-timeline-name
scroll-timeline-name |
animation-timeline |
| सूची की स्टाइल | @counter-style |
list-style |
| काउंटर | counter-reset
counter-set
counter-increment |
|
| कंटेनर से जुड़ी क्वेरी | container-name |
@container |
| पेज | page |
@page |
जैसा कि टेबल में देखा जा सकता है, आम तौर पर सीएसएस के नाम के साथ सीएसएस का रेफ़रंस होता है. उदाहरण के लिए, animation-name, @keyframes के नाम का रेफ़रंस है. सीएसएस के नाम, एट्रिब्यूट और टैग के नाम जैसे डीओएम में तय किए गए नामों से अलग होते हैं. ऐसा इसलिए होता है, क्योंकि इन नामों को स्प्रेडशीट के संदर्भ में बताया जाता है और फिर उनका रेफ़रंस दिया जाता है.
नाम, शैडो डीओएम से कैसे जुड़े होते हैं
सीएसएस के नाम, किसी दस्तावेज़ या स्टाइलशीट के अलग-अलग हिस्सों के बीच संबंध बनाने के लिए बनाए जाते हैं. वहीं, शैडो डीओएम को इसके उलट काम करने के लिए बनाया गया है. यह रिलेशनशिप को एन्कैप्सुलेट करता है, ताकि वे उन वेब कॉम्पोनेंट में लीक न हों जिनका अपना नेमस्पेस होना चाहिए.
सीएसएस नेम और शैडो डीओएम को एक साथ लाने से, वेब कॉम्पोनेंट को कॉम्पोज़ करने का अनुभव बेहतर हो जाता है. इससे, वेब कॉम्पोनेंट को आसानी से बदला जा सकता है. हालांकि, वेब कॉम्पोनेंट को स्थिर रखने के लिए, उनमें बदलाव करने की सीमा तय होती है.
सिद्धांत के तौर पर, यह सही है. आम तौर पर, ब्राउज़र में सीएसएस के नाम, शैडो डीओएम के साथ अलग-अलग तरीके से काम करते हैं. ऐसा एक ही ब्राउज़र में मौजूद सुविधाओं के बीच, सभी ब्राउज़र में, और सुविधाओं और स्पेसिफ़िकेशन के बीच होता है.
नाम और शैडो DOM एक साथ कैसे काम करते हैं
इस समस्या को समझने के लिए, यह समझना ज़रूरी है कि सीएसएस के इन हिस्सों को थ्योरी के तौर पर एक साथ कैसे काम करना चाहिए.
सामान्य नियम
सीएसएस स्कोपिंग लेवल 1 स्पेसिफ़िकेशन में, यह बताया गया है कि शैडो ट्री में सीएसएस के नाम कैसे काम करते हैं. खास जानकारी: सीएसएस का नाम, उस दायरे में ग्लोबल होता है जिसमें इसे तय किया गया है. इसका मतलब है कि इसे वंश के शैडो ट्री से ऐक्सेस किया जा सकता है, लेकिन भाई-बहन या पूर्वजों के शैडो ट्री से नहीं. ध्यान दें कि यह वेब प्लैटफ़ॉर्म के नामों से अलग है, जैसे कि एलिमेंट आईडी. ये एक ही ट्री स्कोप में शामिल होते हैं.
नियम का अपवाद: @property
अन्य सीएसएस के नामों से अलग, सीएसएस प्रॉपर्टी को शैडो डीओएम के ज़रिए एनकैप्सुलेट नहीं किया जाता.
इसके बजाय, ये अलग-अलग शैडो ट्री में पैरामीटर पास करने के सामान्य तरीके हैं.
इस वजह से, @property डिस्क्रिप्टर को खास माना जाता है: यह दस्तावेज़-ग्लोबल टाइप के एलान की तरह काम करता है, जो यह तय करता है कि किसी खास नाम वाली प्रॉपर्टी कैसे काम करती है. प्रॉपर्टी को सभी शैडो ट्री में मैच करना होता है. इसलिए, प्रॉपर्टी के एलान के मैच न होने पर अनचाहे नतीजे मिल सकते हैं. इसलिए, @property एलान को दस्तावेज़ के क्रम के हिसाब से फ़्लैट किया जाता है और हल किया जाता है.
::part के साथ नियम कैसे काम करना चाहिए
शैडो पार्ट, किसी शैडो ट्री में मौजूद एलिमेंट को उसके पैरंट ट्री में दिखाते हैं. ऐसा करने पर, पैरंट ट्री उस एलिमेंट को ऐक्सेस कर सकता है और ::part एलिमेंट का इस्तेमाल करके उसे स्टाइल भी कर सकता है.
::part, एक ही एलिमेंट को स्टाइल करने के लिए दो ट्री स्कोप की अनुमति देता है. इसलिए, यह
कैस्केड ऑर्डर दिया गया है:
- सबसे पहले, शैडो कॉन्टेक्स्ट में स्टाइल की जांच करें. यह पार्ट की "डिफ़ॉल्ट" स्टाइल है.
- इसके बाद,
::partमें बताए गए तरीके से बाहरी स्टाइल लागू करें. यह पार्ट की "पसंद के मुताबिक" स्टाइल है. - इसके बाद,
!importantके साथ तय की गई किसी भी इंटरनल स्टाइल को लागू करें. इससे कस्टम एलिमेंट यह बता सकता है कि किसी खास हिस्से की किसी खास प्रॉपर्टी को::partकी मदद से पसंद के मुताबिक नहीं बनाया जा सकता.
इसका मतलब है कि शैडो डीओएम में मौजूद नामों का रेफ़रंस, ::part से नहीं दिया जा सकता. ऐसा इसलिए, क्योंकि ::part, शैडो-स्कोप वाली स्टाइल के बजाय होस्ट-स्कोप वाली स्टाइल है. उदाहरण के लिए:
// inside the shadow DOM:
@keyframes fade-in {
from { opacity: 0}
}
// This shouldn't work!
// The host style shouldn't know the name "fade-in"
::part(slider) {
animation-name: fade-in;
}
इन-लाइन स्टाइल के साथ नियम कैसे काम करना चाहिए
::part के उलट, style एट्रिब्यूट वाली इनलाइन स्टाइल या स्क्रिप्ट का इस्तेमाल करके स्टाइल को प्रोग्राम के हिसाब से सेट करने वाले इन स्टाइल का दायरा, एलिमेंट के दायरे में आता है. ऐसा इसलिए है, क्योंकि किसी एलिमेंट पर स्टाइल लागू करने के लिए, आपके पास एलिमेंट हैंडल और शैडो रूट का ऐक्सेस होना चाहिए.
असल में सीएसएस के नाम और शैडो डीओएम एक साथ कैसे काम करते हैं
हालांकि, पहले के नियमों को अच्छी तरह से तय किया गया है और वे एक जैसे हैं, लेकिन मौजूदा लागू किए गए नियमों में ऐसा हमेशा नहीं दिखता.
व्यावहारिक तौर पर, @property सभी ब्राउज़र में स्पेसिफ़िकेशन से अलग तरीके से काम करता है और बाकी ज़्यादातर सुविधाओं में ओपन गड़बड़ियां होती हैं (इनमें से कुछ सुविधाओं को अब तक रिलीज़ नहीं किया गया है, इसलिए उन्हें ठीक करने का समय है).
इन सुविधाओं के काम करने के तरीके की जांच करने और उन्हें दिखाने के लिए, हमने यह पेज बनाया है: https://css-names-in-the-shadow.glitch.me/. इस पेज में कई iframe हैं, जिनमें हर एक सुविधा और परीक्षण छह स्थितियों पर फ़ोकस किया गया है:
- किसी बाहरी नाम का बाहरी रेफ़रंस: कोई शैडो डीओएम शामिल नहीं होता है. इसलिए, यह काम करेगा.
- इंटरनल नेम का आउटर रेफ़रंस: यह काम नहीं करना चाहिए, क्योंकि इसका मतलब होगा कि शैडो कॉन्टेक्स्ट में तय किया गया नाम लीक हो गया है.
- बाहरी नाम का अंदरूनी रेफ़रंस: यह काम करना चाहिए, क्योंकि ट्री के स्कोप वाले नाम, शैडो रूट से इनहेरिट किए जाते हैं.
- इंटर नेम का इंटर रेफ़रंस: यह काम करना चाहिए, क्योंकि रेफ़रंस के दोनों नाम एक ही दायरे में हैं.
- आउटर नेम का
::partरेफ़रंस: यह काम करना चाहिए, क्योंकि::partऔर नाम, दोनों का एलान एक ही स्कोप में किया गया है. ::partअंदरूनी नाम का रेफ़रंस: यह काम नहीं करना चाहिए, क्योंकि बाहरी स्कोप को शैडो DOM में बताए गए नामों के बारे में जानकारी नहीं मिलनी चाहिए.
@keyframes
जैसा कि खास जानकारी में बताया गया है, आपके पास शैडो रूट से मुख्य-फ़्रेम के नामों का रेफ़रंस देने की सुविधा होनी चाहिए, बशर्ते @keyframes एट-नियम पहले के स्कोप में हो. असल में, कोई भी ब्राउज़र इस तरीके को लागू नहीं करता. साथ ही, keyframe की परिभाषाओं का रेफ़रंस सिर्फ़ उस स्कोप में दिया जा सकता है जिसमें उन्हें तय किया गया है. समस्या 10540 देखें.
@property
स्पेसिफ़िकेशन में बताए गए मुताबिक, @property का कोई भी एलान, दस्तावेज़ के दायरे के हिसाब से फ़्लैट कर दिया जाएगा. हालांकि, फ़िलहाल सभी ब्राउज़र में सिर्फ़ दस्तावेज़ के दायरे में @property का एलान किया जा सकता है. साथ ही, शैडो रूट में @property के एलान को अनदेखा कर दिया जाता है.
समस्या 10541 देखें.
ब्राउज़र से जुड़ी गड़बड़ियां
अन्य सुविधाएं, सभी ब्राउज़र पर एक जैसी नहीं दिखतीं:
@font-faceको Safari में रूट स्कोप में फ़्लैट किया जाता है.- Chromium, शैडो रूट में
anchor-nameनियमों को इनहेरिट करने की अनुमति नहीं देता scroll-timeline-nameऔरview-timeline-nameके लिए,::part(Chromium में भी) पर सही दायरा तय नहीं किया गया है.- कोई भी ब्राउज़र, शैडो रूट में
@font-palette-valuesका एलान करने की अनुमति नहीं देता. view-transition-classको शैडो रूट में तय किया जा सकता है (ट्रांज़िशन खुद शैडो-रूट के बाहर होता है).- Firefox,
::partको इनर शैडो नेम (कंटेनर क्वेरी, कीफ़्रेम) ऐक्सेस करने की अनुमति देता है. - Firefox और Safari, शैडो रूट में
@counter-styleका इस्तेमाल नहीं करते.
ध्यान दें कि counter-reset, counter-set, और counter-increment के नियम थोड़े अलग हैं, क्योंकि ये इंप्लिसिट नाम हैं. साथ ही, सीएसएस प्रॉपर्टी का एलान करने वाले नियमों का सेट अच्छा और जांचा-परखा होता है.
नतीजा
बुरी खबर यह है कि सीएसएस नेम और शैडो डीओएम के मामले में, इंटरऑपरेबिलिटी की मौजूदा स्थिति के स्नैपशॉट की जांच करने पर, यह पता चलता है कि यह सुविधा एक जैसी नहीं है और इसमें गड़बड़ियां हैं. हमने यहां जिन सुविधाओं की जांच की है उनमें से कोई भी सुविधा, सभी ब्राउज़र पर एक जैसी काम नहीं करती और न ही स्पेसिफ़िकेशन के मुताबिक काम करती है. हालांकि, अच्छी बात यह है कि इस सुविधा को एक जैसा बनाने के लिए, गड़बड़ियों और स्पेसिफ़िकेशन से जुड़ी समस्याओं की सूची सीमित है. चलिए, इसे ठीक करते हैं! इस बीच, अगर आपको इस लेख में बताई गई समस्या हल करने में समस्या आ रही है, तो हमें उम्मीद है कि इस खास जानकारी से आपको मदद मिलेगी.