CSS Container Queries
toy cars के लिए एक display box design करने की कल्पना करें। Standard media queries display box कहाँ रखना है यह तय करने के लिए सिर्फ यह check करती हैं कि पूरा living room कितना बड़ा है। अगर box किसी छोटे corner में या किसी विशाल table पर रखा जाए, तो यह locally खुद को adapt नहीं कर सकता।
Container queries इस समस्या को solve करती हैं। ये components को browser window के global size के बजाय उनके immediate parent container के physical size के आधार पर खुद को style करने देती हैं।
इसका मतलब है एक sidebar card अपने parent element के expand होने पर एक compact vertical list से एक wide horizontal banner में automatically transform हो सकता है।
In this page:
Syntax
.container {
container-type: inline-size;
container-name: name;
}
@container name (min-width: length) {
selector {
property: value;
}
}Container Query Concept
Historically, responsive design viewport-driven media queries पर निर्भर करती थी। Container queries इस responsibility को shift कर देती हैं, elements को उनके सबसे नज़दीकी ancestor container के dimensions query करने देते हुए जो एक container context के साथ styled हो।
Note:
- container queries इस्तेमाल करें जब आप highly modular widgets बना रहे हों जिन्हें अलग-अलग page layouts में reuse करने के लिए design किया गया हो।
- Accepted values:
- container-type: normal — default, कोई query container नहीं
- container-type: inline-size — inline dimension query करता है
- container-type: size — दोनों dimensions query करता है
- container-name: <name> — optional नाम
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
कोई element सीधे अपने खुद के container context को query नहीं कर सकता; यह सिर्फ अपने parents को query कर सकता है।
उदाहरण: The Container Query Concept
<style>
.ancestor {
border: 2px dashed #999;
padding: 16px;
}
.widget {
border: 2px solid steelblue;
background: #eef;
padding: 10px;
}
</style>
<div class="ancestor">
<div class="widget">
Widget queries its nearest ancestor's size
</div>
</div>एक Inline-Size Container Define करना
container-type property को inline-size set करना browser को parent container की width monitor करने के लिए कहता है, child elements को parent की width बदलने पर adapt होने देते हुए।
Note:
- ज़्यादातर layouts के लिए container-type: inline-size इस्तेमाल करें, क्योंकि vertical height tracking शायद ही कभी चाहिए होती है।
- Accepted values:
- container-type: inline-size — width queries enable करता है
- container-type: size — width और height queries enable करता है
- container-type: normal — कोई size containment नहीं
- container: <name> / inline-size — shorthand
- inherit | initial | unset | revert — हर property द्वारा accepted CSS-wide keywords
Warning:
container-type को size set करना infinite loops पैदा कर सकता है अगर child elements parent container की height बदल दें।
उदाहरण: Defining an Inline-Size Container
<style>
.widget {
container-type: inline-size;
border: 2px solid steelblue;
background: #eef;
padding: 10px;
}
</style>
<div class="widget">
<p>Content that can respond to container width</p>
</div>Container Queries लिखना
आप specific styles लागू करने के लिए ज़रूरी minimum या maximum parent container width specify करके @container rule इस्तेमाल करके container queries लिखते हैं।
Note:
- specific device widths के बजाय component के design पर अपने container query breakpoints को focused रखें।
- Accepted values:
- @container (min-width: 400px) — 400px या उससे ऊपर की width
- @container (max-width: 400px) — उतनी या उससे कम
- @container (400px <= width <= 700px) — range syntax
- @container name (min-width: 400px) — किसी named container को target करता है
Warning:
container queries के अंदर declared styles सिर्फ तभी चलेंगे अगर किसी parent element की एक active container-type defined हो।
उदाहरण: Writing Container Queries
<style>
.widget {
container-type: inline-size;
border: 2px solid steelblue;
background: #eef;
padding: 10px;
}
@container (min-width: 400px) {
.widget p {
font-size: 1.5rem;
}
}
</style>
<div class="widget">
<p>Text</p>
</div>Container Query Units
Container queries parent के size के आधार पर unique units introduce करती हैं: cqw (container width का 1%) और cqh (container height का 1%), child elements को अपने parent container के relative proportionally scale होने देते हुए।
Note:
- parent container की width के आधार पर font sizes को dynamically scale करने के लिए cqw units इस्तेमाल करें।
- Accepted values:
- cqw — container की width का 1%
- cqh — container की height का 1%
- cqi — container के inline size का 1%
- cqb — container के block size का 1%
- cqmin | cqmax — cqi और cqb में से छोटा या बड़ा
Warning:
size tracking enabled न होने वाले containers पर container query units इस्तेमाल करना उन्हें 0px पर render कर देगा।
उदाहरण: Container Query Units
<style>
.widget {
container-type: inline-size;
border: 2px solid steelblue;
background: #eef;
padding: 10px;
}
.widget p {
font-size: 10cqw;
}
</style>
<div class="widget">
<p>Scales with container width</p>
</div>Named Containers
अगर किसी element के कई parent containers हैं, तो यह default रूप से सबसे नज़दीकी वाले को query करेगा। container-name property आपको containers को नाम देने और queries को specifically उस named container तक target करने देती है।
Note:
- nested, independent component grids वाले complex page layouts बनाने के लिए named containers इस्तेमाल करें।
- Accepted values:
- container-name: <name> — एक नाम assign करता है
- container: card / inline-size — shorthand नाम / type
- @container card (min-width: 300px) — इसे नाम से target करता है
- container-name: a b — कई नाम allowed हैं
- container-name: none — default
Warning:
selector conflicts रोकने के लिए सुनिश्चित करें कि आपके container-name values unique हों।
उदाहरण: Named Containers
<style>
.widget {
container-type: inline-size;
container-name: sidebar;
border: 2px solid steelblue;
background: #eef;
padding: 10px;
}
@container sidebar (min-width: 300px) {
.widget p {
color: blue;
}
}
</style>
<div class="widget">
<p>Text</p>
</div>Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
- किसी element के अपने ही styles के अंदर सीधे उसके अपने container size को query करने की कोशिश करना।
- parent elements पर container-type declare करना भूल जाना, जिससे container queries fail हो जाती हैं।
- अपने container query breakpoints के अंदर px या % जैसी standard length units छोड़ देना।
चैप्टर सारांश
- Container queries child elements को उनके parent container की width के आधार पर dynamically अपना layout adapt करने देती हैं।
- container-type: inline-size इस्तेमाल करके parent elements पर container contexts initialize करें।
- @container rule इस्तेमाल करके container queries लिखें, और relative container scaling के लिए cqw और cqh units इस्तेमाल करें।
ब्राउज़र सपोर्ट
CSS container queries हर modern web browser द्वारा natively supported हैं।
🔒
Chapter Quiz — Complete all 25 topics to unlock
0/25 topics done
Complete these topics first:
- CSS Container Queries
- CSS Subgrid
- CSS Logical Properties
- CSS Logical Sizing
- CSS Writing Modes
- CSS Aspect Ratio
- CSS Object Fit
- CSS object-position
- CSS Masking
- CSS Math Functions
- CSS Motion Path
- CSS @supports
- CSS @property
- CSS At-Rules
- CSS Cursor
- CSS Will Change
- CSS User Interface
- CSS Print Styles
- CSS Pagination (Print)
- CSS Dark Mode
- CSS Accessibility
- CSS Performance
- CSS Preprocessors
- CSS Frameworks Overview
- CSS Interview Prep