एडमिन के तय किए गए सीएसएस नेम और शैडो डीओएम, एक साथ काम करते हैं. हालांकि, ब्राउज़र इस स्पेसिफ़िकेशन के मुताबिक काम नहीं करते. कभी-कभी, एक-दूसरे के साथ भी काम नहीं करते. साथ ही, हर सीएसएस का नाम थोड़ा अलग होता है.
इस लेख में, लेखक के तय किए गए सीएसएस नामों के व्यवहार के बारे में बताया गया है. यह जानकारी, शैडो स्कोप में मौजूद है. उम्मीद है कि यह लेख, आने वाले समय में इंटरऑपरेबिलिटी को बेहतर बनाने के लिए गाइड के तौर पर काम करेगा.
लेखक के तय किए गए सीएसएस नाम क्या होते हैं?
लेखक के तय किए गए सीएसएस नाम, सीएसएस सिंटैक्स का एक पुराना तरीका है. इसे मूल रूप से @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 हैं. हर iframe में, इनमें से किसी एक सुविधा पर फ़ोकस किया गया है और छह स्थितियों की जांच की गई है:
- बाहरी नाम का बाहरी रेफ़रंस: इसमें शैडो DOM शामिल नहीं है. यह काम करना चाहिए.
- इंटरनल नेम का आउटर रेफ़रंस: यह काम नहीं करना चाहिए, क्योंकि इसका मतलब होगा कि शैडो कॉन्टेक्स्ट में तय किया गया नाम लीक हो गया है.
- बाहरी नाम का अंदरूनी रेफ़रंस: यह काम करना चाहिए, क्योंकि ट्री के स्कोप वाले नाम, शैडो रूट से इनहेरिट किए जाते हैं.
- इंटर नेम का इंटर रेफ़रंस: यह काम करना चाहिए, क्योंकि रेफ़रंस के दोनों नाम एक ही स्कोप में हैं.
::partबाहरी नाम का रेफ़रंस: यह काम करना चाहिए, क्योंकि::partऔर नाम, दोनों को एक ही स्कोप में बताया गया है.::partअंदरूनी नाम का रेफ़रंस: यह काम नहीं करना चाहिए, क्योंकि बाहरी स्कोप को शैडो DOM में बताए गए नामों के बारे में जानकारी नहीं मिलनी चाहिए.
@keyframes
स्पेसिफ़िकेशन में बताए गए तरीके के मुताबिक, जब तक @keyframes at-rule किसी पैरंट स्कोप में है, तब तक शैडो रूट में जाकर मुख्य फ़्रेम के नाम का रेफ़रंस दिया जा सकता है. असल में, कोई भी ब्राउज़र इस तरीके को लागू नहीं करता. साथ ही, 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 के लिए, कुछ अलग नियम लागू होते हैं. इसकी वजह यह है कि ये नाम, सीधे तौर पर नहीं दिखाए जाते. साथ ही, सीएसएस प्रॉपर्टी के लिए, नियमों का एक ऐसा सेट होता है जिसे पहले से तय किया गया है और जिसकी जांच की जा चुकी है.
नतीजा
बुरी खबर यह है कि सीएसएस नेम और शैडो डीओएम के मामले में, इंटरऑपरेबिलिटी की मौजूदा स्थिति के स्नैपशॉट की जांच करने पर, यह पता चलता है कि यह सुविधा एक जैसी नहीं है और इसमें गड़बड़ियां हैं. हमने यहां जिन सुविधाओं की जांच की है उनमें से कोई भी सुविधा, सभी ब्राउज़र पर एक जैसी काम नहीं करती और न ही स्पेसिफ़िकेशन के मुताबिक काम करती है. हालांकि, अच्छी बात यह है कि इस अनुभव को एक जैसा बनाने के लिए, गड़बड़ियों और स्पेसिफ़िकेशन से जुड़ी समस्याओं की सूची सीमित है. चलिए, इसे ठीक करते हैं! इस बीच, अगर आपको इस लेख में बताई गई गड़बड़ियों से निपटने में समस्या आ रही है, तो उम्मीद है कि इस खास जानकारी से आपको मदद मिलेगी.