CSS @कंटेनर नियम

वर्णन और उपयोग

CSS @container शर्त का उपयोग अन्य तत्वों के लिए आकार या शैली के अनुसार शैली निर्धारित करने के लिए है।

शैली व्यक्तव्य शर्त के अनुसार फ़िल्टर किया जाता है, यदि शर्त सत्य है, तो वह आवरण पर लागू करता है। जब आवरण का आकार या शैली मूल्य बदले जाते हैं तो शर्त का पुनर्मूल्यांकन किया जाता है।

सूचना:CSS में, आवरण एक अन्य तत्वों को आवरित करने वाला तत्व है जो उन्हें समूहबद्ध करता है ताकि शैली निर्धारित की जा सके।

उदाहरण

अन्य तत्वों के लिए आकार या शैली के अनुसार शैली निर्धारित करें:

.parent {
  container-name: myContainer;
  container-type: inline-size;
}
/* myContainer की चौड़ाई 500px से कम होने पर शैली जोड़ें */
@container myContainer (width < 500px) {
  .child {
    width: 50%;
    border: 2px solid maroon;
    background-color: salmon;
  }
}

अपने आप प्रयोग करें

CSS व्याकरण

@container containername (containerquery) {
  CSS व्यक्तव्य
}

गुण-मूल्य

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

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