रिस्पॉन्सिव वेब डिज़ाइन के आगमन के बाद से, डेवलपर्स DOM तत्वों को ब्राउज़र व्यूपोर्ट आकार के बजाय उनके वास्तविक आकार के आधार पर स्टाइल करने की क्षमता ( मीडिया क्वेरी का उपयोग करके) की मांग कर रहे हैं। वास्तव में, कंटेनर क्वेरी (मूल रूप से एलिमेंट क्वेरी) शायद CSS की सबसे अधिक अनुरोधित विशेषता है जो अभी भी ब्राउज़रों में मौजूद नहीं है ।
पहले से ही कई , कई , कई पोस्ट हैं जो बताती हैं कि सीएसएस में कंटेनर प्रश्नों को लागू करना मुश्किल क्यों है और ब्राउज़र निर्माता उन्हें लागू करने में संकोच क्यों कर रहे हैं। यदि आप अभी इसका आनंद लेना चाहते हैं, तो थोड़ी जावास्क्रिप्ट मदद कर सकती है:
c51c33e1533e68c3f8fd24633700789f
तब पूरी बात इस तरह दिखती है:
See the Pen by David Vielhuber (@vielhuber) on CodePen.
ब्रेकप्वाइंट , चयनकर्ता और शैली विशेषताओं का उपयोग विभिन्न ब्रेकप्वाइंट, स्वचालित चयनकर्ता और जोड़े गए वर्गों के प्रकार को परिभाषित करने के लिए किया जा सकता है। यदि आप स्क्रिप्ट का उपयोग कर रहे हैं, तो आप नव निर्मित कक्षाओं को निम्नानुसार संबोधित कर सकते हैं:
c51c33e1533e68c3f8fd24633700789f
ओवरले, पॉपअप, साइडबार या कस्टम तत्वों में तत्वों के लिए कंटेनर प्रश्नों का उपयोग विशेष रूप से सार्थक है - अब भी, उदाहरण के लिए, ऊपर की स्क्रिप्ट के साथ।