@layer घोषणा और क्रम
नामित कैस्केड लेयर घोषित करें और @layer कथनों से उनकी प्राथमिकता का क्रम नियंत्रित करें।
@layer घोषणा और क्रम, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
@layer क्या है
CSS कैस्केड परतें (@layer) कैस्केड में CSS नियमों की प्राथमिकता को स्पष्ट रूप से नियंत्रित करने का साधन प्रदान करती हैं — यह विशिष्टता से स्वतंत्र होता है। कम प्राथमिकता वाली परतें अधिक विशिष्ट चयनकर्ताओं के बावजूद हार जाती हैं।
@layer क्यों महत्वपूर्ण है
परतों के बिना, प्रत्येक CSS नियम विशिष्टता और स्रोत क्रम का उपयोग करके प्रतिस्पर्धा करता है। इससे विशिष्टता संबंधी संघर्ष पैदा होते हैं, जब रीसेट, घटक और उपयोगिता शैलियाँ सभी प्राथमिकता के लिए एक-दूसरे से प्रतिस्पर्धा करती हैं। परतें प्रत्येक समूह को एक निश्चित और पूर्वानुमेय प्राथमिकता देती हैं।
परतों की घोषणा
एक ही कथन में परतों की पहले से घोषणा करें। घोषणा का क्रम प्राथमिकता निर्धारित करता है — बाद में घोषित परतें पहले घोषित परतों पर जीतती हैं।
<p>This scene only declares layer order — see the CSS panel:</p>
<p style="color:#888;font-size:0.9em;">@layer reset, base, components, utilities;</p>परत घोषणा की स्थिति
@layer घोषणा आपकी स्टाइलशीट (या मुख्य आयात फ़ाइल) के शीर्ष पर होनी चाहिए। घोषणा के बाद आप किसी भी क्रम में परतों में शैलियाँ जोड़ सकते हैं — प्राथमिकता इस आधार पर निर्धारित होती है कि घोषणा किस क्रम में हुई है, न कि शैलियाँ कहाँ जोड़ी गई हैं।
परतों के लिए स्रोत क्रम महत्वपूर्ण क्यों नहीं है
चूँकि परत की प्राथमिकता घोषणा के समय निर्धारित होती है, आप किसी परत में कहीं भी शैलियाँ जोड़ सकते हैं — यहाँ तक कि उसे घोषित किए जाने से पहले भी, अग्र-संदर्भण के माध्यम से। महत्वपूर्ण घोषित क्रम ही है।
परत प्राथमिकता का नियम
बाद की परत में की गई घोषणा विशिष्टता की परवाह किए बिना हमेशा जीतती है:
<p>Reset layer !important paragraph (red)</p>
<div id="header">Components layer header (blue)</div>परत-विहीन शैलियाँ
किसी भी परत के बाहर रखी गई शैलियों को परत-विहीन कहा जाता है। उनकी प्राथमिकता सबसे अधिक होती है — अंतिम घोषित परत से भी अधिक। इनका उपयोग ऐसे आपातकालीन ओवरराइड के लिए करें जिन्हें हमेशा जीतना चाहिए।
प्राथमिकता क्रम
पूर्ण प्राथमिकता क्रम (लेखक की शैलियों के लिए सबसे अधिक से सबसे कम तक):
- परत-विहीन शैलियाँ (किसी भी @layer के बाहर)
- अंतिम घोषित परत (जैसे, उपयोगिताएँ)
- अंतिम से पहले वाली परत (जैसे, घटक)
- पहले घोषित परतें (आधार, रीसेट)
परतों में !important का उलटाव
परतों में !important जटिल होता है: यह उस घोषणा के लिए परतों का क्रम उलट देता है। सबसे पहली परत में मौजूद !important, बाद की परतों में मौजूद !important पर जीतता है। यह उपयोगकर्ता और लेखक की शैलियों के लिए मूल कैस्केड व्यवहार से मेल खाता है।
नेस्टेड परतें
डॉट संकेतन का उपयोग करके परतों को नेस्ट किया जा सकता है:
<p>This scene declares nested layers with dot notation — see the CSS panel.</p>व्यावहारिक सेटअप उदाहरण
एक वास्तविक प्रोजेक्ट की परत व्यवस्था:
<p>A realistic project layer order — see the CSS panel.</p>त्वरित जाँच
परतों की घोषणा इस प्रकार की गई है: @layer base, components, utilities। किसी टकराव में किस परत की शैलियाँ जीतेंगी?
पुनरावलोकन
@layer स्पष्ट रूप से क्रमबद्ध कैस्केड परतें स्थापित करता है। परतों के नाम प्राथमिकता क्रम में घोषित करें (सबसे कम प्राथमिकता पहले)। बाद की परतें विशिष्टता से स्वतंत्र होकर हमेशा पहले की परतों पर जीतती हैं। परत-विहीन शैलियों की प्राथमिकता सबसे अधिक होती है। !important उस घोषणा के लिए परतों का प्राथमिकता क्रम उलट देता है।
एआई शिक्षक के साथ CSS सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 40
- पाठ
- 159
अक्सर पूछे जाने वाले प्रश्न
क्या “@layer घोषणा और क्रम” पाठ निःशुल्क है?
हाँ—“@layer घोषणा और क्रम” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“@layer घोषणा और क्रम” में मैं क्या सीखूँगा?
नामित कैस्केड लेयर घोषित करें और @layer कथनों से उनकी प्राथमिकता का क्रम नियंत्रित करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“@layer घोषणा और क्रम” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- @layer घोषणा और क्रम
- लेयर में शैलियाँ जोड़ना
- लेयर प्राथमिकता और !important का परस्पर प्रभाव
- थर्ड-पार्टी कोड में लेयर