🧙🏾 🏂 🤪 नई सीएसएस @supports निर्देश 🕵🏻 🕊️ 🎧

जावास्क्रिप्ट का उपयोग करके विशिष्ट प्रौद्योगिकियों के लिए ब्राउज़र-समर्थित समर्थन की जांच करना क्लाइंट-साइड डेवलपमेंट के लिए सबसे अच्छा अभ्यास माना जाता है ( अक्सर वे एक अन्य विधि का उपयोग करते हैं, जो यह जांचने के लिए है कि उपयोगकर्ता किस ब्राउज़र से पृष्ठ देख रहा है - लगभग। ), लेकिन, दुर्भाग्य से, ऐसा चेक नहीं हो सकता है। केवल CSS का उपयोग करके किया गया। फ़ायरफ़ॉक्स , क्रोम, और ओपेरा ने हाल ही में @supports और CSS.supports (जावास्क्रिप्ट) निर्देशों के लिए सीएसएस समर्थन की घोषणा की, जो डेवलपर्स को यह निर्धारित करने में मदद करेगा कि उपयोगकर्ता का ब्राउज़र सीएसएस संपत्ति को संभाल सकता है या नहीं। चलो उन्हें कार्रवाई में देखो!

अपने ब्राउज़र की जाँच करें
(यदि शिलालेख हरा है, तो आपका ब्राउज़र @supports का समर्थन करता है, यदि यह लाल है, तो नहीं। आप ब्राउज़र कंसोल में संदेश को भी देख सकते हैं।)

सीएसएस @supports

@supports निर्देश का सिंटैक्स @supports @media प्रश्नों के लिए समान है:

 @supports(prop:value) { /*  */ }

@supports निर्देश डेवलपर्स को इसका उपयोग करने के लिए विभिन्न विकल्प प्रदान करता है।

साधारण संपत्ति की जांच

 @supports (display: flex) { div { display: flex; } }

यह उपयोग करने का सबसे आसान तरीका है।

कीवर्ड नहीं

@supports किसी भी संपत्ति के लिए समर्थन की कमी के लिए जाँच not शब्द के साथ रखा:

 @supports not (display: flex) { div { float: left; } /*    */ }

एकाधिक चेक और शर्तें

श्रृंखला और or का उपयोग करके कई जांचें की जा सकती हैं:

 /* or */ @supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { /*      */ } /* and */ @supports (display: flex) and (-webkit-appearance: caret) { /*     */ }

यदि आपको कई जाँच करने की आवश्यकता है, तो, जैसा कि कई प्रोग्रामिंग भाषाओं में, आप कोष्ठक का उपयोग कर सकते हैं:

 /* and and or */ @supports ((display: -webkit-flex) or (display: -moz-flex) or (display: flex)) and (-webkit-appearance: caret) { /*   */ }

@supports शर्तों @supports सिंटैक्स @media क्वेरीज़ के समान है।

जावास्क्रिप्ट CSS.supports

@supports लिए जावास्क्रिप्ट समकक्ष, window.CSS.supports विधि है। इसका उपयोग करने के लिए दो विकल्प हैं। पहले में दो तर्क पारित करना शामिल है - संपत्ति और उसके मूल्य:

 var supportsFlex = CSS.supports("display", "flex");

दूसरे विकल्प के लिए एक तर्क के रूप में पूरे स्ट्रिंग को पास करने की आवश्यकता होती है:

 var supportsFlexAndAppearance = CSS.supports("(display: flex) and (-webkit-appearance: caret)");

जावास्क्रिप्ट एनालॉग का उपयोग करने से पहले, इस तकनीक के लिए पहले ब्राउज़र समर्थन की जांच करना महत्वपूर्ण है। ओपेरा एक अलग विधि नाम का उपयोग करता है, जो कोड को थोड़ा बढ़ाता है:

 var supportsCSS = !!((window.CSS && window.CSS.supports) || window.supportsCSS || false);

@Supports का उपयोग करना

ज्यादातर मामलों में, @supports का उपयोग करने का सबसे अच्छा तरीका शैलियों का एक विशिष्ट बैकअप सेट करना है और फिर वांछित संपत्ति का समर्थन होने पर उन्हें दूसरों के साथ प्रतिस्थापित करना है। @supports का उपयोग करने का एक बड़ा कारण तत्वों के स्थान का वर्णन करना है। कुछ नए ब्राउज़र फ्लेक्सबॉक्स का समर्थन करते हैं, जबकि अन्य पिछड़ जाते हैं। इस स्थिति में, आप निम्नलिखित कोड लिख सकते हैं:

 section { float: left; } @supports (display: -webkit-flex) or (display: -moz-flex) or (display: flex) { section { display: -webkit-flex; display: -moz-flex; display: flex; float: none; } }

@supports लिए अन्य अच्छे उपयोग के @supports उदाहरण डेवलपर्स द्वारा इस नई तकनीक के साथ प्रयोग करने में अधिक समय बिताने के बाद आएंगे।

@ कनेक्शन का समर्थन करता है

यदि आप @supports जैसी नई तकनीकों को आज़माने के लिए उत्सुक हैं, तो आपको कुछ समय कैनरी, फ़ायरफ़ॉक्स नाइटली या ओपेरा नेक्स्ट के नवीनतम संस्करण को स्थापित करने में लगाना चाहिए। Opera 12.1, WebKit @supports , और Firefox @supports सभी @supports समर्थन @supports । फ़ायरफ़ॉक्स के पुराने संस्करण [layout.CSS.supports-rule.enabled] . [layout.CSS.supports-rule.enabled] को शामिल करने के बाद उचित समर्थन प्रदान करते हैं।

@supports CSS और जावास्क्रिप्ट स्पेक्स के लिए एक स्वागत योग्य है। विशिष्ट तकनीकों के लिए ब्राउज़र समर्थन को परिभाषित करना सबसे अच्छा अभ्यास है, और विभिन्न हैक का उपयोग करने की तुलना में @supports एक अधिक सुविधाजनक और उपयुक्त तरीका है। मुझे संदेह है कि अगले कुछ वर्षों में हम @supports की लोकप्रियता और सुविधा को बढ़ाते हुए @supports निर्देश के उपयोग में वृद्धि देखेंगे।

उपयोगी लिंक

http://caniuse.com/css-featurequeries
http://dev.w3.org/csswg/css-conditional/#at-supports
प्रौद्योगिकी ट्विटर
Habr पर flexbox के बारे में

नई सीएसएस @supports निर्देश