CSS @supports नियम

वर्णन और उपयोग

CSS @supports नियम को ब्राउज़र को किसी CSS विशेषता को समर्थन करता है या नहीं के लिए परीक्षण करने के लिए प्रयोग किया जाता है और नहीं समर्थन किया जाने पर विकल्पीय शैली निर्धारित करता है。

उदाहरण

यदि ब्राउज़र display: grid को समर्थन करता है, तो लागू करें @supports नियम के भीतर CSS। यदि नहीं समर्थन किया जाता, तो लागू करें @supports नियम के बाहर .container वर्ग की शैली:

/* यदि ब्राउज़र display: grid को नहीं समर्थन करता, तो इस CSS को लागू करें */
.container {
  display: table;
  width: 90%;
  background-color: #2196F3;
  padding: 10px;
}
/* यदि ब्राउज़र display: grid को समर्थन करता है, तो इस CSS को लागू करें */
@supports (display: grid) {
  .container {
    display: grid;
    grid: auto;
    grid-gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
}

अपने आप साबित करें

CSS व्याकरण

@supports (supports-condition) {
  /* यदि शर्त सत्य है, तो इस CSS को लागू करें */
}

गुण मूल्य

ब्राउज़र समर्थन

तालिका में नंबर इस नियम को पूरी तरह से समर्थन करने वाले पहले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。