CSS @supports

किसी recipe पर commit करने से पहले pantry check करने वाले एक chef की कल्पना करें: 'अगर हमारे पास saffron है, तो fancy version बनाओ, वरना regular वाला बनाओ।' सिर्फ इसलिए kitchen नहीं टूटता कि कोई ingredient missing है। @supports CSS के लिए वही pantry check है -- यह किसी stylesheet को किसी feature पर भरोसा करने से पहले test करने देता है कि browser उसे समझता है या नहीं।

In this page:

Basic @supports Syntax
and/or/not के साथ Conditions Combine करना
not Operator
Progressive Enhancement Use Case
Selector Support Test करना

Syntax

css

@supports (property: value) {
  selector {
    property: value;
  }
}

Basic @supports Syntax

@supports CSS rules के एक block को एक condition में wrap करता है जो test करती है कि browser किसी दिए गए property-value pair को parse और apply कर सकता है या नहीं, सिर्फ तभी enclosed rules लागू करते हुए जब test pass हो। Condition खुद parentheses के अंदर एक असली declaration जैसा दिखता है।

Note:

Accepted values:
@supports (property: value) — एक declaration test करता है
@supports not (...) — test को negate करता है
@supports (...) and (...) — दोनों match करने चाहिए
@supports (...) or (...) — कोई भी match करे
@supports selector(...) — selector support test करता है

उदाहरण: Basic @supports Syntax

css

<style>
.cell { background: #cfe8ff; border: 2px solid #1e6fd9; padding: 10px; }
@supports (display: grid) {
  .container {
    display: grid;
  }
}
</style>
<div class="container"><div class="cell">A</div><div class="cell">B</div><div class="cell">C</div></div>

and/or/not के साथ Conditions Combine करना

कई feature tests को and (सभी pass होने चाहिए), or (कोई एक pass होना चाहिए), और not (एक single test को negate करता है) के साथ combine किया जा सकता है, एक feature query को एक rule में काफ़ी precise support requirements express करने देते हुए।

Note:

Accepted values:
and — हर condition supported होनी चाहिए
or — कम से कम एक supported होनी चाहिए
not — एक condition को negate करता है
( ) — हर condition के आस-पास parentheses ज़रूरी हैं
and और or mix करना — extra parentheses चाहिए

उदाहरण: Combining Conditions with and/or/not

css

<style>
p { background: #cfe8ff; border: 2px solid #1e6fd9; margin: 0; padding: 8px; }
@supports (display: grid) and (gap: 1rem) {
  .container {
    display: grid;
    gap: 1rem;
  }
}
</style>
<div class="container"><p>Grid with gap</p><p>Grid with gap</p></div>

not Operator

किसी condition को not से prefix करना enclosed rules को सिर्फ तभी लागू करता है जब feature SUPPORTED न हो, जो genuinely पुराने browsers के लिए एक true fallback path लिखने का natural तरीका है।

Note:

Accepted values:
not (property: value) — unsupported होने पर match करता है
not (A) and (B) — invalid; इसे not ((A) and (B)) के रूप में wrap करें
@supports not (display: grid) — fallback styles
नोट: not operand parentheses में wrapped होना चाहिए

उदाहरण: The not Operator

css

<style>
.container { background: #cfe8ff; border: 2px solid #1e6fd9; padding: 10px; }
@supports not (display: grid) {
  .container {
    display: block;
  }
}
</style>
<div class="container">Shown as block where grid is unsupported</div>

Progressive Enhancement Use Case

Standard pattern है पहले baseline CSS लिखना जो हर जगह काम करे, फिर modern browsers को enhanced layouts या effects में opt करने के लिए उसके ऊपर @supports blocks layer करना -- modern-only CSS लिखने और बाद में पुराने browsers को patch करने की कोशिश करने के बजाय।

Note:

Accepted values:
default declarations पहले — fallback
@supports (display: grid) { ... } — enhanced styles
@supports (gap: 1rem) — individual properties feature-test करता है
बाद वाला @supports — fallback को override करता है

उदाहरण: Progressive Enhancement Use Case

css

<style>
.cell { background: #cfe8ff; border: 2px solid #1e6fd9; padding: 10px; }
.container {
  display: block;
}
@supports (display: flex) {
  .container {
    display: flex;
  }
}
</style>
<div class="container"><span class="cell">A</span><span class="cell">B</span></div>

Selector Support Test करना

@supports selector(...) test करता है कि browser किसी दिए गए CSS selector syntax को समझता है या नहीं (सिर्फ एक property नहीं), :has() जैसे newer selectors के लिए उपयोगी जिन्हें uneven adoption मिला है।

Note:

Accepted values:
@supports selector(:has(a)) — :has() support test करता है
@supports selector(:focus-visible) — :focus-visible test करता है
selector(<selector>) — कोई भी single complex selector
not selector(...) — negation allowed है

उदाहरण: Testing Selector Support

css

<style>
.card { background: #cfe8ff; border: 2px solid #1e6fd9; padding: 12px; margin-bottom: 8px; width: 200px; }
@supports selector(:has(a)) {
  .card:has(a) {
    cursor: pointer;
  }
}
</style>
<div class="card"><a href="#">Card with a link</a></div>
<div class="card">Card without a link</div>

Live Example

Chapter Quiz — Complete all 25 topics to unlock

0/25 topics done

Complete these topics first:

← Previous Lesson CSS Motion Path Next Lesson → CSS @property

CSS @supports

Basic @supports Syntax

and/or/not के साथ Conditions Combine करना

not Operator

Progressive Enhancement Use Case

Selector Support Test करना

Chapter Quiz — Complete all 25 topics to unlock

Login to run this code