] ] दृश्यपोर्ट मीडिया प्रश्नों के विपरीत, जो पूरे ब्राउज़र विंडो के आकार पर प्रतिक्रिया करते हैं, कंटेनर क्वेरी एक तत्व के

उपलब्ध स्थान के आधार पर स्टाइल की अनुमति देते हैं

, वास्तव में घटक-स्तरीय जवाबदेही को सक्षम करते हैं।

] ] यह दृष्टिकोण व्यक्तिगत घटक अनुकूलनशीलता के साथ संघर्ष करता है; बड़े तत्व अलग से समायोजित हो सकते हैं, लेकिन आम तौर पर वैश्विक ब्रेकप्वाइंट का पालन करते हैं।

कंटेनर क्वेरी एक बेहतर समाधान प्रदान करते हैं। निम्न छवि कंटेनर क्वेरी के साथ स्टाइल किए गए एक कार्ड घटक को प्रदर्शित करती है, जो कि व्यूपोर्ट आकार से पूरी तरह से स्वतंत्र है। कार्ड की उपस्थिति गतिशील रूप से अपने उपलब्ध स्थान के लिए अनुकूलित होती है।

कंटेनर क्वेरी को परिभाषित करना ] ]

। कंटेनर { कंटेनर-प्रकार: इनलाइन-आकार; }

] निम्न उदाहरण

h2 रंग को नीला करने के लिए सेट करता है जब इसका कंटेनर 40ch चौड़ा या बड़ा होता है:

H2 { रंग नीला; } }

लेखन मोड में व्यापक संगतता के लिए, तार्किक गुणों का उपयोग करें:

@कंटेनर (इनलाइन-आकार> 40ch) { H2 { रंग नीला; } }

] आगे के विवरण के लिए आधिकारिक विनिर्देश से परामर्श करें। ] ] नीचे दी गई छवि तीन कार्ड आकार और उनकी संबंधित कक्षाएं दिखाती है।

] ]

.container {
  container-type: inline-size;
}

] ] चाबी छीनना:

@container (min-width: 40ch) {
  h2 {
    color: blue;
  }
}

]

तार्किक गुण क्रॉस-राइटिंग मोड संगतता को बढ़ाते हैं।

]

]