लेखक के तय किए गए सीएसएस नाम और शैडो डीओएम एक साथ काम करने चाहिए. हालांकि, ब्राउज़र कभी-कभी हर कॉन्फ़िगरेशन में दी गई जानकारी के हिसाब से अलग-अलग होते हैं होता है और हर सीएसएस का नाम थोड़ा अलग होता है.
इस लेख में, लेखक के तय किए गए सीएसएस के नाम कैसे काम करते हैं, इसकी मौजूदा स्थिति बताई गई है में शैडो स्कोप से जोड़ा है, ताकि उन्हें उम्मीद की जा सके कि यह उन्हें बेहतर बनाने में मदद कर सकता है आने वाले समय में इंटरऑपरेबिलिटी (दूसरे सिस्टम के साथ काम करना) की सुविधा मिलेगी.
लेखक के तय किए गए सीएसएस नाम क्या हैं?
लेखक के तय किए गए सीएसएस के नाम, मूल रूप से पुराने सीएसएस सिंटैक्स में से एक हैं.
@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 |
कोई भी कस्टम प्रॉपर्टी |
| ट्रांज़िशन देखें | view-transition-name
view-transition-class |
::view-transition-group() |
| ऐंकर पोज़िशन | anchor-name |
position-anchor |
| स्क्रोल की मदद से बनाया गया ऐनिमेशन | animation-timeline |
view-timeline-name
scroll-timeline-name |
| काउंटर स्टाइल | @counter-style
Counter-reset
counter-set
counter-increment |
list-style |
| कंटेनर की क्वेरी | container-name |
@container |
| सीएसएस वैरिएबल | --something |
var(--something) |
| पेज | @page |
जैसा कि टेबल में देखा जा सकता है कि सीएसएस के नाम में आम तौर पर उसकी सीएसएस होती है.
reference. उदाहरण के लिए, animation-name, @keyframes का रेफ़रंस है
नाम. सीएसएस के नाम, डीओएम में बताए गए नामों से अलग होते हैं, जैसे कि एट्रिब्यूट
और टैग नाम, जैसा कि बाद में बताया जाता है, तो
स्टाइलशीट.
शैडो डीओएम से नाम कैसे जुड़े हैं
सीएसएस के नाम, सीएसएस के अलग-अलग हिस्सों के बीच संबंध बनाने के लिए बनाए जाते हैं दस्तावेज़ या स्टाइलशीट में, शैडो DOM है कुछ अलग करने के लिए बनाया गया है. यह रिश्तों को इनकैप्सुलेट करता है, ताकि वे लीक न हों का अपना नेमस्पेस होना चाहिए.
सीएसएस नामों और शैडो डीओएम को एक साथ लाने से, लिखने का अनुभव मिलता है वेब कॉम्पोनेंट लचीले होने के लिए काफ़ी एक्सप्रेसिव होने चाहिए, लेकिन सीमित होने चाहिए किया जा सकता है.
यह थ्योरी के हिसाब से अच्छा है. व्यावहारिक रूप से, CSS के ब्राउज़र अलग-अलग होते हैं शैडो डीओएम के साथ नाम आपस में जुड़े होते हैं. ये दोनों सुविधाएं एक जैसी सभी ब्राउज़र पर और सुविधाओं और स्पेसिफ़िकेशन के बीच फ़र्क़ कर सकते हैं.
नाम और शैडो डीओएम को एक साथ कैसे काम करना चाहिए
इस समस्या को समझने के लिए, सीएसएस के इन हिस्सों को समझना ज़रूरी है को साथ मिलकर काम करना चाहिए.
सामान्य नियम
शैडो ट्री में सीएसएस के नाम कैसे काम करते हैं, इसका सामान्य नियम सीएसएस स्कोपिंग लेवल 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में अंदरूनी नाम का रेफ़रंस: आउटर स्कोप के तौर पर, यह काम नहीं करेगा शैडो डीओएम में एलान किए गए नामों के बारे में जानकारी नहीं होनी चाहिए.
@keyframes
जैसा कि स्पेसिफ़िकेशन में बताया गया है, आपके पास कीफ़्रेम नामों का रेफ़रंस देने की सुविधा होनी चाहिए
शैडो रूट के अंदर से, जब तक कि @keyframes ऐट-नियम पूर्वज में हो
दायरा. व्यावहारिक रूप से, कोई भी ब्राउज़र इस व्यवहार और कीफ़्रेम लागू नहीं करता
परिभाषाओं का रेफ़रंस सिर्फ़ उसी स्कोप में दिया जा सकता है जिसमें उन्हें परिभाषित किया गया है. यहां जाएं:
समस्या 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 में थोड़ा बहुत बदलाव हुआ है
अलग-अलग नियम होते हैं, क्योंकि वे इंप्लिसिट नाम होते हैं और सीएसएस प्रॉपर्टी का एलान करते हैं
नियमों का एक स्थापित और अच्छी तरह से परीक्षण किया गया सेट हो.
नतीजा
बुरी खबर यह है कि मौजूदा इंटरऑप स्थिति के स्नैपशॉट की जांच करते समय सीएसएस नामों और शैडो डीओएम के हिसाब से, एक जैसा अनुभव मिलता है और गड़बड़ी. हमने यहां जिन सुविधाओं की जांच की है उनमें से कोई भी पूरी तरह से एक जैसा काम नहीं करती है ब्राउज़र और स्पेसिफ़िकेशन के अनुसार अच्छी खबर यह है कि अनुभव को एक जैसा बनाने के लिए डेल्टा की संख्या सीमित है गड़बड़ियों की सूची देखें. चलिए, इसे ठीक करते हैं! उम्मीद है कि इस दौरान, अगर आपको समस्या आ रही है, तो हो सकता है कि इस खास जानकारी से आपको मदद मिले कुछ ऐसे अंतर हैं जो इस लेख में बताए गए हैं.