CSS फ़ीचर क्वेरी
कंटेनर क्वेरी पूछती है पैरेंट कितना चौड़ा है। मीडिया क्वेरी viewport देखती है। फ़ीचर क्वेरी बिल्कुल दूसरा सवाल है: क्या यह ब्राउज़र यह CSS समझता है? @supports से आप ठोस बेसलाइन देते हैं, फिर आधुनिक लेआउट या सेलेक्टर केवल वहीं खोलते हैं जहाँ वे चलते हैं।
प्रोग्रेसिव एनहांसमेंट, जुआ नहीं
फ़ीचर क्वेरी एक क्षमता-द्वार है। पुराने स्टाइल मिटाते नहीं — हर जगह चलने वाला लेआउट रखते हैं, फिर @supports के अंदर समृद्ध परत जोड़ते हैं जब इंजन वह फीचर पार्स कर सके (जैसे display: grid या फ्लेक्स पर gap)।
@supports का सादा रूप
सबसे आम रूप एक प्रॉपर्टी–वैल्यू जोड़ी जाँचता है। ब्राउज़र वह घोषणा समझे तो अंदर के नियम लागू होते हैं:
.card-list {
display: block;
}
.card-list .card {
margin-bottom: 1rem;
padding: 1rem;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
background: #fff;
}
@supports (display: grid) {
.card-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: 1rem;
}
.card-list .card {
margin-bottom: 0;
}
}
ब्लॉक के बाहर कार्ड सादे मार्जिन से ढेर लगते हैं। @supports (display: grid) के अंदर वही सूची रिस्पॉन्सिव ग्रिड बन जाती है — पुराने इंजन ढेर रखते हैं; नए ग्रिड पाते हैं।
शर्तें मिलाएँ: and, or, not
कई फीचर एक साथ माँग सकते हैं, विकल्प स्वीकार सकते हैं, या जाँच उलट सकते हैं:
@supports (display: grid) and (gap: 1rem) {
.toolbar {
display: grid;
grid-auto-flow: column;
gap: 0.75rem;
align-items: center;
}
}
@supports (display: flex) or (display: grid) {
.cluster {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
}
@supports not (display: grid) {
.card-list .card {
max-width: 36rem;
}
}
and द्वार कसता है (दोनों पास होने चाहिए)। or खोलता है। not असमर्थित रास्ता स्टाइल करता है — जानबूझकर फॉलबैक के लिए उपयोगी, बशर्ते वह फॉलबैक साफ़ और पूरा दिखे।
सेलेक्टर selector() से जाँचें
कुछ फीचर सेलेक्टर हैं, प्रॉपर्टी नहीं। उन्हें selector() में रखें ताकि सवाल हो: «क्या तुम यह सेलेक्टर पार्स कर सकते हो?»
.nav a {
color: #0f172a;
text-decoration: none;
}
@supports selector(:has(*)) {
.nav:has(a:focus-visible) {
outline: 2px solid #2563eb;
outline-offset: 4px;
}
.card:has(img) .title {
font-weight: 700;
}
}
बिना selector() के, @supports के अंदर नंगा :has() भरोसेमंद पैटर्न नहीं। इसके साथ, जिन ब्राउज़र में :has() नहीं, वे सिर्फ उन्नत नियम छोड़ देते हैं और बेसलाइन लिंक स्टाइल रह जाती है।
कौन सा उपकरण कौन सा सवाल पूछता है?
📊 Media, container, and feature queries
| आपका सवाल | प्राथमिकता | आम टूल |
|---|---|---|
| viewport / डिवाइस संदर्भ कितना चौड़ा? | पेज शेल, ब्रेकपॉइंट | @media (…) |
| कंपोनेंट के चारों ओर इस पैरेंट की चौड़ाई? | असमान स्लॉट में कार्ड | container-type के बाद @container (…) |
| क्या ब्राउज़र यह CSS सपोर्ट करता है? | प्रोग्रेसिव एनहांसमेंट | @supports (…) / selector(…) |
ये तीन साफ़ जुड़ते हैं: पेज के लिए मीडिया, स्लॉट के लिए कंटेनर, क्षमता के लिए @supports। @supports से नकली ब्रेकपॉइंट न बनाएँ, और @media से फीचर जाँच न करें।
पहले बेसलाइन, फिर एनहांसमेंट
व्यावहारिक पैटर्न: साझा रूप द्वार के बाहर रखें, उन्नत लेआउट अंदर:
.feature-panel {
padding: 1.25rem;
border-radius: 0.75rem;
background: #f8fafc;
color: #0f172a;
}
.feature-panel .lead {
margin: 0 0 0.75rem;
font-size: 1.125rem;
line-height: 1.5;
}
.feature-panel .actions {
display: block;
}
.feature-panel .actions a {
display: inline-block;
margin: 0.25rem 0.5rem 0.25rem 0;
padding: 0.5rem 0.875rem;
border-radius: 0.5rem;
background: #e2e8f0;
color: inherit;
text-decoration: none;
}
@supports (display: flex) and (gap: 0.5rem) {
.feature-panel .actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.feature-panel .actions a {
margin: 0;
}
}
हर ब्राउज़र को पैडिंग, टाइप और क्लिक करने योग्य लिंक मिलते हैं। फ्लेक्स + gap तभी जब दोनों समझे जाएँ — कोई एक गायब हो तो खाली छेद नहीं।
Nesting और @supports साथ
Modern Toolkit के टुकड़े मिलकर चलते हैं। Nesting सेलेक्टर व्यवस्थित करता है; क्षमता-द्वार फिर भी @supports का है:
.pricing {
padding: 1rem;
border: 1px solid #e2e8f0;
}
@supports (display: grid) {
.pricing {
display: grid;
gap: 1rem;
& .tier {
padding: 1rem;
background: #fff;
}
& .tier .price {
font-size: 1.5rem;
font-weight: 700;
}
}
}
अगर स्वयं nesting सपोर्ट न हो, बाहर समतल समकक्ष रखें या मान लें कि नेस्टेड रूप उन्नत रास्ते का हिस्सा है — वही प्रोग्रेसिव-एनहांसमेंट सोच।
खुद आज़माएँ
- सूची को सादा ऊर्ध्वाधर ढेर स्टाइल करें; फिर Grid लेआउट
@supports (display: grid)में लपेटें। andसेgapभी माँगें ताकि फ्लेक्स/ग्रिड स्पेसिंग आधी न लगे।@supports not (display: grid)में साफ़max-widthफॉलबैक लिखें — दोनों रास्ते जानबूझकर दिखें।:has()नियम@supports selector(:has(*))से गेट करें।- सारा विज़ुअल
@supportsमें न डालें; ब्रांड रंग और टाइप बेसलाइन में रखें।
आम गलतियाँ
- बिना बेसलाइन के एकमात्र कामचलाऊ लेआउट
@supportsमें — असमर्थित ब्राउज़र पर पेज टूटा - वैल्यू के बिना
@supports (display)— फ़ीचर क्वेरी को प्रॉपर्टी–वैल्यू जोड़ी चाहिए (याselector(…)) - जहाँ
@mediaचाहिए वहाँ@supports(या उलटा) — क्षमता ≠ viewport चौड़ाई - ऐसी प्रॉपर्टी जाँचना जो बेसलाइन पहले से माँगती है — केवल एनहांसमेंट गेट करें
- छोटे फ़ायदे के लिए गहरे नेस्टेड
@supportsढेर — एक साफ़ उन्नत परत बेहतर
सार
@supportsCSS को ब्राउज़र क्षमता पर गेट करता है (फ़ीचर क्वेरी)(property: value)से जाँचें,and/or/notसे मिलाएँ, सेलेक्टर के लिएselector()- ठोस बेसलाइन रखें; सपोर्ट हो तो एनहांस करें
- तीन याद रखें:
@media→ viewport,@container→ पैरेंट आकार,@supports→ क्षमता - Modern Toolkit यहाँ खत्म — अगला मॉड्यूल: एक्सेसिबिलिटी और रैप-अप (
accessibility)
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी