At-Rule के साथ काम करने की सुविधा के आधार पर, सीएसएस को शर्तों के साथ लागू करना

@supports at-rule(@<at-rule name>) {…} का इस्तेमाल करके, कुछ सीएसएस नियमों या एलान को शर्त के साथ लागू करें. हालांकि, ऐसा सिर्फ़ तब करें, जब ब्राउज़र में कोई खास at-rule काम करता हो. इसमें पूरे नियम शामिल हो सकते हैं या कुछ शर्तों को लागू करने के लिए, सीएसएस नेस्टिंग के साथ इसका इस्तेमाल किया जा सकता है.

.foo {
  background: var(--accent-color);

  @supports at-rule(@property) {
    background-image: var(--rainbow-gradient);
    animation: sliding-rainbow 1s linear infinite;
  }
}

@supports at-rule() का इस्तेमाल, सिर्फ़ उस at-rule को शर्त के साथ लागू करने के लिए न करें जिसका पता लगाया जा रहा है.

/* BAD: CSS already ignores rules the browser doesn't understand, so this is unnecessary */
@supports at-rule(@starting-style) {
  @starting-style {
    /* ... */
  }
}

@supports at-rule() के सही न होने पर, at-rules के लिए सहायता का पता लगाना

जब ब्राउज़र के काम न करने या ज़्यादा बारीकी से पता लगाने की ज़रूरत होने की वजह से, at-rule() का इस्तेमाल नहीं किया जा सकता, तब यहां दिए गए दिशा-निर्देशों का इस्तेमाल किया जा सकता है.

पहले प्रॉपर्टी, वैल्यू या सिलेक्टर आज़माएं

@supports पहले से ही प्रॉपर्टी, वैल्यू, और सिलेक्टर का पता लगा सकता है. इसके लिए, @supports selector(...) का इस्तेमाल किया जाता है. कई मामलों में, इनका इस्तेमाल करके यह पता लगाया जा सकता है कि कोई सुविधा काम करती है या नहीं. इसके लिए, आपको at-rule की जांच करने की ज़रूरत नहीं है.

उदाहरण के लिए, कस्टम फ़ंक्शन के लिए सहायता का पता लगाने के लिए, @supports at-rule(@function) के बजाय @supports (color: --foo()) का इस्तेमाल किया जा सकता है.

अन्य मामलों में, ऐसी सूडो-क्लास या सूडो-एलिमेंट हो सकते हैं जो सिर्फ़ तब उपलब्ध होते हैं, जब कोई खास at-rule काम करता हो. इसका इस्तेमाल, सहायता का पता लगाने के लिए किया जा सकता है.

कंटेनर क्वेरी के टाइप का पता लगाना

at-rule() सिर्फ़ नाम के हिसाब से, at-rules का पता लगाने की अनुमति देता है. यह किसी अन्य सिंटैक्स या डिस्क्रिप्टर का पता लगाने की अनुमति नहीं देता. उदाहरण के लिए, यह काम नहीं करेगा:

@supports at-rule(@container style(--a: 1)) {
  /* ... */
}

कई तरह की कंटेनर क्वेरी के लिए, सही वैल्यू के साथ container-type का इस्तेमाल किया जा सकता है. उदाहरण के लिए, स्क्रोल-स्टेट क्वेरी के लिए @supports (container-type: scroll-state) या @supports (container-type: size)container-type: anchoredforanchored()` क्वेरी.

हालांकि, स्टाइल से जुड़ी क्वेरी के लिए कोई container-type नहीं है. अहम जानकारी: स्टाइल क्वेरी के लिए, @supports (container-type: style) का इस्तेमाल करके यह पता लगाने की कोशिश न करें कि स्टाइल क्वेरी काम करती हैं या नहीं. ऐसा करने पर, यह काम नहीं करेगा.

इसके बजाय, ऐसी स्टाइल क्वेरी आज़माई जा सकती है जो हमेशा सही हो:

@container style(--a: 1) or (not (style(--a: 1))) {
  /* Rules here will only be applied if style queries are supported */
}

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

रजिस्टर की गई कस्टम प्रॉपर्टी (@property)

कुछ मामलों में, अगर लागू की जाने वाली कंडीशनल सीएसएस को एक प्रॉपर्टी तक कम किया जा सकता है, तो इस काम के लिए रजिस्टर की गई कस्टम प्रॉपर्टी का इस्तेमाल किया जा सकता है:

/* Use a custom property to conditionally include the dash animation */
@property --progress-dash-animation {
  syntax: "*";
  inherits: false;
  initial-value: , progress-dash 3s ease-in-out infinite;
}

.spinner {
  /* The dash animation is only included if @property is supported */
  animation:
    progress-spin var(--_used-spinner-duration) linear infinite
    var(--progress-dash-animation, );
}

ज़्यादा सामान्य मकसद के लिए, ऐसी प्रॉपर्टी को रजिस्टर किया जा सकता है जो इनहेरिट नहीं होती. साथ ही, उसे रूट एलिमेंट पर (एक स्पेस) पर सेट किया जा सकता है:

{# Testcase: https://codepen.io/leaverou/pen/KwWzpVr #}

@property --supports-atproperty {
    syntax: "*";
    inherits: false;
}

:root {
    --supports-atproperty: ;
}

body {
  /* The background is only applied if @property is supported */
    background: var(--supports-atproperty, green);
}

ध्यान दें:

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

JavaScript का इस्तेमाल आखिरी विकल्प के तौर पर करना

सभी at-rules के लिए, JavaScript में कुछ इंटरफ़ेस की मौजूदगी की जांच करें. उदाहरण के लिए, अगर globalThis.CSSFunctionRule को तय किया गया है, तो @function का इस्तेमाल किया जा सकता है.

अगर आपको ज़्यादा गहराई से जांच करनी है (उदाहरण के लिए, कुछ प्रील्यूड, नेस्ट किए गए नियम, डिस्क्रिप्टर के लिए), तो टेस्ट सेट अप करके यह देखा जा सकता है कि उसे कैसे पार्स किया गया:

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  @page {
    @top-left {
      content: "test";
    }
  }
`);
const SUPPORTS_PAGE_MARGINS = Boolean(sheet.cssRules[0]?.cssRules?.[0]);

अहम जानकारी:

• सीएसएस की सुविधाओं के लिए, JS का इस्तेमाल करके सहायता का पता लगाते समय, JS से स्टाइल को सीधे तौर पर लागू न करें. इसके बजाय, रूट एलिमेंट पर कोई क्लास लागू करें और सीएसएस में उसे ब्रांच करें.
• ध्यान दें कि कंटेनर क्वेरी को पार्स किया जाता है, भले ही प्रील्यूड की पहचान न की गई हो. साथ ही, सीएसएसओएम स्ट्रक्चर से कुछ खास तरह की कंटेनर क्वेरी के लिए, सहायता का पता लगाने का कोई तरीका नहीं है.
• @property के लिए सहायता का पता लगाने के लिए, CSS.registerProperty का इस्तेमाल न करें. ऐसा इसलिए, क्योंकि इसकी सहायता थोड़ी ज़्यादा है.

फ़ॉलबैक रणनीतियां

जब तक यह आपके सपोर्ट टारगेट के अंदर न हो, तब तक सिर्फ़ @supports (at-rule()) का इस्तेमाल करके, ऐसे at-rules का पता लगाएं जिनके लिए सपोर्ट, @supports (at-rule()) सुविधा से कम है.

इस सुविधा के लॉन्च होने से पहले उपलब्ध कराए गए at-rules के लिए, सीएसएस को शर्त के साथ लागू करने के लिए, ऊपर दिए गए सेक्शन में दिए गए दिशा-निर्देशों का पालन करें.

@supports at-rule() सुविधा खुद काम करती है या नहीं, इसका पता लगाने के लिए, ऐसे at-rule का इस्तेमाल किया जा सकता है जो @supports at-rule() के साथ काम करने वाले सभी ब्राउज़र में मौजूद हो. जैसे, @supports at-rule(@media) { ... }.