कमांड supports

कमांड @supports ब्राउज़र द्वारा समर्थित सुविधाओं को ध्यान में रखते हुए तत्वों के लिए शैली निर्धारित करती है। इस कमांड में तार्किक ऑपरेटर्स not, and, or की सहायता से शर्तें बनाई जा सकती हैं।

वाक्य - विन्यास

css@supports शर्त {
  
}

उदाहरण

आइए एक शर्त निर्धारित करते हैं कि यदि आपका ब्राउज़र display गुण को flex मान के साथ समर्थन करता है, तो केवल संबंधित पाठ वाला अनुच्छेद ही प्रदर्शित होगा, साथ ही उसके फॉन्ट का रंग हल्का नीला होगा:

html<p class="yes">आपका ब्राउज़र display: flex को समर्थन करता है।</p>
<p class="no">आपका ब्राउज़र display: flex को समर्थन नहीं करता है।</p>

css@supports (display: flex) {
  .no {
    display: none;
  }
  p {
    color: #467CBC;
  }
}
@supports not (display: flex) {
  .yes {
    display: none;
  }
}

Результат:

यह भी देखें