CSS @लेयर नियम

परिभाषा और उपयोग

CSS @layer यह नियमों को CSS स्तर क्रम (CSS cascade layers) दृष्टाओं की क्रमिक समीक्षा के लिए नियंत्रित कर सकता है।

यह एक स्तर को पहले परिभाषित करके और उस स्तर में विशिष्ट क्रम में दृष्टाओं को रखकर प्राप्त किया जाता है।

@layer नाम के साथ या बिना नाम के परिभाषित किए जा सकते हैं।

बिना नाम के @layer जिसेअनामक स्तर।अनामक स्तर घोषणा के क्रम के अनुसार दृष्टाओं को कीजिए (देखें नीचे उदाहरण)।वे डिफ़ॉल्ट स्तर क्रम का पालन करते हैं (ऊपर से नीचे)।

अद्वितीय नाम वाले @layer जिसेनामक स्तर।नामक स्तर का उपयोग करके हम आवश्यक विशिष्ट स्तर क्रम को निर्दिष्ट कर सकते हैं (देखें नीचे उदाहरण)।क्रम सबसे कम विशिष्ट से सबसे अधिक विशिष्ट की दिशा में बाईं तरफ से दाईं तरफ रखा जाता है।

उदाहरण

उदाहरण 1

अनामक स्तर का उपयोग करके (यह डिफ़ॉल्ट स्तर क्रम का पालन करेगा - ऊपर से नीचे):

/* स्तर 1 */
@layer {
  body {
    background: pink;
  }
}
/* स्तर 2 */
@layer {
  body {
    background: lightblue; /* अंतिम स्तर लागू होता है */
  }
}

स्वयं प्रयोग कीजिए

उदाहरण 2

नामक स्तर का उपयोग करके (और आवश्यक विशिष्ट स्तर क्रम को निर्दिष्ट करके):

/* विशिष्ट स्तर क्रम को निर्दिष्ट करें */
@layer bgblue, bgpink;
/* स्तर 1 */
@layer bgpink {
  body {
    background: pink; /* लागू होता है */
  }
}
/* स्तर 2 */
@layer bgblue {
  body {
    background: lightblue;
  }
}

स्वयं प्रयोग कीजिए

CSS व्याकरण

@layer name {
  css declarations;
}

गुण-मूल्य

ब्राउज़र समर्थन

टेबल में दिए गए नंबर इस @ नियम के पूरी तरह से समर्थन करने वाले पहले ब्राउज़र संस्करण को प्रदर्शित करते हैं।