कंटेनर क्वेरी

मीडिया क्वेरी की मदद से, व्यूपोर्ट के साइज़ या इस्तेमाल किए जा रहे डिवाइस के टाइप के हिसाब से लेआउट को अडजस्ट किया जा सकता है. कंटेनर क्वेरी की मदद से, एलिमेंट में ज़्यादा सटीक बदलाव किए जा सकते हैं. ये बदलाव, उनके पैरंट या कंटेनर के साइज़ और स्थिति के आधार पर किए जाते हैं.

मान लें कि आपके पास न्यूज़लेटर के लिए साइन अप करने का एक फ़ॉर्म है. इसका इस्तेमाल आपकी साइट पर कई कॉन्टेक्स्ट में किया जाना है. ऐसा हो सकता है कि आपको साइन अप पेज पर इसे पूरे पेज की चौड़ाई में दिखाना हो, लेकिन अन्य कॉन्टेंट वाले पेज पर इसे स्प्लिट कॉलम में दिखाना हो.

इस डेमो में दिखाया गया है कि कंटेनर क्वेरी की मदद से, एलिमेंट की प्रॉपर्टी में बदलाव किया जा सकता है. जैसे, फ़ॉन्ट का साइज़, पैडिंग, और लेआउट. यह बदलाव, एलिमेंट के सबसे नज़दीकी कंटेनर के एट्रिब्यूट के आधार पर किया जाता है. इससे व्यूपोर्ट के साइज़ पर कोई असर नहीं पड़ता.

कंटेनर क्वेरी सेट अप करना

मीडिया क्वेरी के उलट, कंटेनर क्वेरी को दो हिस्सों में सेट किया जाता है:

1. कंटेनर तय करें.
2. किसी चाइल्ड एलिमेंट के लिए स्टाइल लिखें, ताकि जब पैरंट कंटेनर, क्वेरी की शर्तों से मेल खाए, तब उन्हें लागू किया जा सके.

कंटेनर तय करना

container-type प्रॉपर्टी का इस्तेमाल करके, कंटेनर तय किया जा सकता है.

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

container-type के inline-size की मदद से, कंटेनर के इनलाइन ऐक्सिस के बारे में क्वेरी की जा सकती है.

inline और block, दोनों ऐक्सिस के हिसाब से क्वेरी करने के लिए, container-type: size का इस्तेमाल करें.

main,
.my-component {
  container-type: size;
}

container-type की दोनों वैल्यू, साइज़ को सीमित करने के अलग-अलग तरीकों को लागू करती हैं. किसी एलिमेंट पर Inline-size प्रॉपर्टी सेट करने से, उसके डिसेंडेंट एलिमेंट, उसके इनलाइन-साइज़ पर असर नहीं डालते.

size कंटेनमेंट वाले एलिमेंट की वजह से, उसके डिसेंडेंट एलिमेंट, ब्लॉक और इनलाइन ऐक्सिस, दोनों में उसके साइज़ पर असर नहीं डाल पाते.

इस उदाहरण में दिखाया गया है कि साइज़ कंटेनमेंट, उस एलिमेंट पर असर डाल सकता है जिस पर इसे लागू किया गया है.

कंटेनर का साइज़, उसके चाइल्ड (<p> एलिमेंट) के साइज़ के हिसाब से नहीं होगा. इसलिए, कंटेनर तब तक छोटा होता रहेगा, जब तक उसके डाइमेंशन (यानी कि inline-size, block-size, aspect-ratio) सेट करके उसका साइज़ तय नहीं किया जाता या उसे किसी ऐसे लेआउट में नहीं रखा जाता जिसका साइज़ तय किया गया हो.

कंटेनर क्वेरी की शर्तें

कंटेनर सेट अप हो जाने के बाद, पैरंटheses में कोई ऐसी शर्त जोड़ी जा सकती है जिसे पूरा करने पर ही कंटेनर क्वेरी के अंदर मौजूद स्टाइल लागू होंगी. कंटेनर के साइज़ से जुड़ी क्वेरी के लिए, शर्त इन चीज़ों से मिलकर बनी होती है. ये क्वेरी, पैरंट एलिमेंट के डाइमेंशन पर आधारित होती हैं:

• साइज़ की सुविधा: width, height, inline-size, block-size, aspect-ratio या orientation,
• तुलना करने वाला ऑपरेटर (जैसे, >, <, =, >=),
• और लंबाई की वैल्यू.

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

@container (inline-size > 30em) {
  .my-child-element {
    /* styles to apply when .my-container-element is wider than 30em */
  }
}

साइज की सुविधा से जुड़ी शर्तों को टेस्ट करने के लिए, कोलन और एक वैल्यू का इस्तेमाल किया जा सकता है.

@container (orientation: landscape) {
  /*...*/
}

@container (min-width: 300px) {
  /*...*/
}

and और or जैसे कीवर्ड का इस्तेमाल करके, कई शर्तों को एक साथ जोड़ा जा सकता है. इसके अलावा, ऑपरेटर का इस्तेमाल करके भी कई शर्तों को एक साथ जोड़ा जा सकता है.

@container (inline-size > 40em) and (orientation: landscape)  {
  /*...*/
}

@container (height > 25vh) or (orientation: portrait) {
  /*...*/
}

@container ( 10em <= width <= 500px) {
  /*...*/
}

कंटेनर के नाम रखना

अगर आपको किसी खास कंटेनर को टारगेट करना है, भले ही वह सबसे नज़दीकी पूर्वज न हो, तो container-name प्रॉपर्टी का इस्तेमाल करके कंटेनर के नाम सेट किए जा सकते हैं. इसके बाद, अपनी शर्तों को तय करने से पहले, उस कंटेनर के नाम का रेफ़रंस दिया जा सकता है जिसके बारे में आपको क्वेरी करनी है.

.sidebar {
  container-name: main-sidebar;
  container-type: inline-size;
}

@container main-sidebar (inline-size > 20em)  {
  .button-group {
    display: flex;
    padding-inline: 1.25em;
  }
}

स्टाइल किए जा रहे एलिमेंट का पूर्वज, अब भी नाम वाला कंटेनर होना चाहिए.

container प्रॉपर्टी के साथ शॉर्टहैंड का इस्तेमाल करना

container प्रॉपर्टी की मदद से, कंटेनर को तय करने और कंटेनर का टाइप तय करने के लिए, शॉर्टहैंड सिंटैक्स का इस्तेमाल किया जा सकता है.

.sidebar {
  container: main-sidebar / inline-size;
}

स्लैश से पहले कंटेनर का नाम और बाद में कंटेनर का टाइप होता है.

कंटेनर क्वेरी यूनिट

कंटेनर में, आपके पास कंटेनर की रिलेटिव लेंथ यूनिट का ऐक्सेस भी होता है. इससे उन कॉम्पोनेंट के लिए ज़्यादा सुविधा मिलती है जो अलग-अलग कंटेनर में मौजूद हो सकते हैं. ऐसा इसलिए, क्योंकि कंटेनर के डाइमेंशन के हिसाब से लंबाई में बदलाव किया जा सकता है.

यहां बटन की पैडिंग के लिए, कंटेनर की लंबाई की यूनिट cqi (क्वेरी कंटेनर के इनलाइन साइज़ का 1%) का इस्तेमाल किया जा रहा है.

.container {
  container: button-container / inline-size;
}

.one {
  inline-size: 30vw;
}

.two {
  inline-size: 50vw;
}

button {
  padding: 2cqi 5cqi;
}

दोनों बटन पर एक ही तरह की रिलेटिव यूनिट लागू की गई हैं. हालांकि, यूनिट कंटेनर के साइज़ के हिसाब से होती हैं. इसलिए, दूसरे बटन में ज़्यादा पैडिंग है, क्योंकि इसका कंटेनर बड़ा है.

कंटेनर क्वेरी को नेस्ट करना

कंटेनर क्वेरी को सिलेक्टर के अंदर नेस्ट किया जा सकता है.

.my-element {
  display: grid;
  padding: 1em 2em;

  @container my-container (min-inline-size: 22em) {
    /* styles to apply when element's container is wider than 22em */
  }
}

/* equivalent to */
.my-element {
  display: grid;
  padding: 1em 2em;
}

@container my-container (min-inline-size: 22em) {
  .my-element {
     /* styles to apply when element's is wider than 22em */
  }
}

इसके अलावा, उन्हें अन्य कंटेनर क्वेरी या ऐट-रूल में नेस्ट करें.

@container my-container (min-inline-size: 22em) {
  .my-element {
      /* styles to apply when element's is wider than 22em */
  }
}

@layer base {
  @container my-container (min-inline-size: 22em) {
    .my-element {
    /* styles to apply */
    }
  }
}

देखें कि आपको कितना समझ आया