CSS
फ़ीचर क्वेरी

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

• @supports [स्थिति] {/ * CSS नियम लागू करने के लिए * /}

पैरामीटर

टिप्पणियों

बेसिक @supports उपयोग

@supports (display: flex) {
  /* Flexbox is available, so use it */
  .my-container {
    display: flex;
  }
}

वाक्य रचना के संदर्भ में, @supports बहुत के समान है @media , लेकिन स्क्रीन आकार और अभिविन्यास का पता लगाने के बजाय, @supports की पहचान करेगा ब्राउज़र किसी दिए गए CSS नियम संभाल कर सकते हैं या नहीं।

@supports (flex) जैसा कुछ करने के बजाय, ध्यान दें कि नियम @supports (display: flex) ।

चाइनिंग फीचर का पता लगाता है

एक साथ कई विशेषताओं का पता लगाने के लिए, and ऑपरेटर का उपयोग करें।

@supports (transform: translateZ(1px)) and (transform-style: preserve-3d) and (perspective: 1px) {
  /* Probably do some fancy 3d stuff here */
}

वहाँ भी एक है or ऑपरेटर और एक not ऑपरेटर:

@supports (display: flex) or (display: table-cell) {
  /* Will be used if the browser supports flexbox or display: table-cell */
}
@supports not (-webkit-transform: translate(0, 0, 0)) {
  /* Will *not* be used if the browser supports -webkit-transform: translate(...) */
}

अंतिम @supports अनुभव के लिए, लघुकोष्ठक के साथ तार्किक भावों को समूहीकृत करने का प्रयास करें:

@supports ((display: block) and (zoom: 1)) or ((display: flex) and (not (display: table-cell))) or (transform: translateX(1px)) {
  /* ... */
}

यह काम करेगा अगर ब्राउज़र

1. display: block का समर्थन करता display: block और zoom: 1 , या
2. display: flex का समर्थन करता display: flex और नॉट display: table-cell , या
3. transform: translateX(1px) का समर्थन करता transform: translateX(1px) ।