सीएसएस कंटेनर क्वेरी, सीएसएस की एक नई सुविधा है. वेब डेवलपर इस सुविधा को लेकर काफ़ी उत्साहित हैं. इससे वेब डिज़ाइन में क्रांति हो सकती है. जैसे, पेज-आधारित रिस्पॉन्सिव डिज़ाइन से लेकर कंटेनर-आधारित रिस्पॉन्सिव डिज़ाइन तक.
Chrome DevTools की मदद से, नए लेआउट डिज़ाइन पैटर्न अपनाए जा सकते हैं. साथ ही, नए रुझानों के बारे में अप-टू-डेट रहा जा सकता है. CSS की इस सुविधा की मदद से, अब DevTools में अपनी कंटेनर क्वेरी की जांच की जा सकती है और उन्हें डीबग किया जा सकता है.
ऊपर दिए गए वीडियो में, कंटेनर क्वेरी और उनके सिंटैक्स के बारे में खास जानकारी दी गई है. साथ ही, DevTools में उनकी जांच करने का तरीका भी बताया गया है.
अब कंटेनर एलिमेंट और उनके डिसेंडेंट को ढूंढा जा सकता है. इसके लिए, उनसे जुड़े बैज का इस्तेमाल करें. यह बैज, बिंदु वाली लाइन के ओवरले को टॉगल करता है.
जब कंटेनर क्वेरी की शर्तों को पूरा करते हैं, तब उनसे जुड़े वंश पर लागू होने वाले @container नियमों की जांच करें.
DevTools में कंटेनर क्वेरी के काम करने के बारे में ज़्यादा जानने के लिए, CSS कंटेनर क्वेरी की जांच करना और उन्हें डीबग करना लेख पढ़ें.