सीएसएस सशर्त नियम

सीएसएस सशर्त नियम , जैसा कि नाम से पता चलता है, सशर्त निर्माण हैं जो सीएसएस में ही लागू किए जा सकते हैं। वे तार्किक ऑपरेटरों के समूह सशर्त अभिव्यक्तियों की क्षमता के साथ वर्तमान ब्राउज़र द्वारा गुणों के समर्थन की जाँच करते हैं and , or not । इस पोस्ट में मैं अन्य बातों के अलावा, इस CSS3 मॉड्यूल के सिंटैक्स और इसके ब्राउज़रों के वर्तमान समर्थन के बारे में बताना चाहूंगा।

नया क्या है

तो, उदाहरण के लिए, सीएसएस सशर्त नियमों और सशर्त टिप्पणियों के बीच गुणात्मक अंतर क्या है? मैं दो मुख्य लोगों को बाहर करूंगा:

• यह निर्दिष्ट गुणों के लिए ब्राउज़र समर्थन का परीक्षण है, न कि ब्राउज़र नाम और संस्करण।
• यह सीधे सीएसएस में सशर्त निर्माणों का कार्यान्वयन है, इसलिए हम सीएसएस संपत्तियों के "आवेदन के प्रवाह" को नियंत्रित कर सकते हैं, और हम HTML कोड में चयन नहीं करते हैं कि विभिन्न ब्राउज़रों के लिए तैयार की गई शैलियों को कनेक्ट किया जाना चाहिए; सीधे शब्दों में कहें, अगर हमें सभी आवश्यक ब्राउज़रों द्वारा असमर्थित संपत्ति को लागू करने की आवश्यकता है, तो हमारे पास गिरावट के लिए एक लचीला उपकरण है।

लेकिन व्यवहार में?

वाक्यविन्यास सरल है। उदाहरण के लिए, हमारे पास एक font-size संपत्ति है जिसमें हम फ़ॉन्ट आकार की गणना करने के लिए calc() फ़ंक्शन का उपयोग करना चाहते हैं, और इस फ़ंक्शन के तर्क के रूप में हम एक अभिव्यक्ति पास करना चाहते हैं जो रूट body एलिमेंट के फ़ॉन्ट आकार से फ़ॉन्ट आकार की गणना करता है। लेकिन आज यह कितने ब्राउज़रों का समर्थन करता है? पर्याप्त नहीं है। बाकी का क्या करें? CSS3 शर्तों का उपयोग करते हुए, प्रश्न को यह उत्तर मिलेगा:

 body { font-size: 14px; } @supports (font-size: calc(1rem + 12px)) { h1 { font-size: calc(1rem + 12px); } } @supports not (font-size: calc(1rem + 12px)) { h1 { font-size: 26px; } } 

उदाहरण बेमानी है, लेकिन तर्क दिखाई देता है। @supports नियम सशर्त निर्माण से पहले है। एक सशर्त अभिव्यक्ति है कि कोष्ठक में क्या है, कोष्ठकों की हमेशा आवश्यकता होती है। हम और or ऑपरेटरों के साथ सशर्त अभिव्यक्ति को जोड़ सकते हैं, और not साथ भावों को भी नकार not ।

उसी समय, स्थितियों से बचने के लिए जब आपके द्वारा तैयार की गई स्थिति को एक से अधिक तरीकों से व्याख्या किया जा सकता है, तो कोष्ठक का उपयोग करके शर्तों को समूहित करना आवश्यक है, यह एक उदाहरण के साथ स्पष्ट है। विनिर्देश से एक उदाहरण पर विचार करें:

 /*   ! */ @supports (transition-property: color) or (animation-name: foo) and (transform: rotate(10deg)) { } 

ऐसा लगता है कि वाक्यविन्यास सही है, तो और क्या है? समस्या यह है कि इस डिजाइन की व्याख्या अलग-अलग तरीकों से की जा सकती है। हमें क्या मतलब था: क्या हमें [( transition या animation ) और ( transform )] या ( transition ) या ( animation और transform ) के लिए सपोर्ट की ज़रूरत है? अज्ञात। यही कारण है कि हम संभव विकल्पों का वर्णन करते हुए, जैसा कि मैंने अभी किया था, वैसे ही कोष्ठक का उपयोग करना चाहिए। समान कोड की निम्नलिखित विविधताएँ सही होंगी।

 @supports ((transition-property: color) or (animation-name: foo)) and (transform: rotate(10deg)) { } @supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))) { } 

खैर, कब?

और अब इस समय समर्थन की स्थिति के बारे में। विनिर्देशन कार्यशील मसौदे की स्थिति में है। स्थिर संस्करणों में आज यह किसी के द्वारा समर्थित नहीं है। 3 अगस्त को, @supports समर्थन फ़ायरफ़ॉक्स 17.0a1 में दिखाई दिया, @supports अब यह फ़ायरफ़ॉक्स ऑरोरा शाखा में है और अक्टूबर में बीटा में होगा। मैंने अन्य ब्राउज़रों के साथ समर्थन के बारे में कुछ भी नहीं सुना है (शायद फेरीवाला से कोई आपको बताएगा)। फ़ायरफ़ॉक्स 17 में, यह विकल्प सेटिंग्स में अक्षम हो सकता है यदि डेवलपर्स तय करते हैं कि विनिर्देश अभी तक पर्याप्त स्थिर नहीं है।

UPD: ओपेरा 12.10 बीटा ने @supports सपोर्ट पेश किया।