हर कोई, हर कोई, हर कोई: अपने CSS3 को अपडेट करने का समय

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

सॉर्ट उपसर्ग

कोई अनिवार्य उपसर्ग आदेश की आवश्यकता नहीं है। हालांकि, यह दृढ़ता से अनुशंसा की जाती है कि उन्हें वर्णानुक्रम में व्यवस्थित किया जाए, अंत में एक गैर-उपसर्ग संस्करण के साथ। यही है, इसे इस तरह सॉर्ट करना सही होगा: moz , ms , o , webkit , और फिर एक उपसर्ग के बिना संपत्ति।

ओपेरा ने हाल ही में कई CSS संपत्तियों के लिए -webkit- उपसर्गों के लिए समर्थन जोड़ा। यह आवश्यक था क्योंकि कई डेवलपर्स वेबिट के लिए केवल उपसर्ग का उपयोग करते हैं, या बस ओपेरा उपसर्ग को शामिल नहीं करते हैं। क्योंकि यह आमतौर पर स्वीकार किया जाता है कि दोनों उपसर्ग, -o- और -webkit- में एक ही विशिष्टता है, वेबकिट क्रम में जीतता है, और यदि दोनों निर्दिष्ट हैं, तो इसका उपयोग किया जाएगा। आप शायद ओपेरा के लिए -o- का उपयोग करना चाहते हैं, खासकर यदि आपको किसी चीज़ को बदलना है, तो यह उचित होगा कि वह उपसर्गों को लंबाई के आधार पर छाँटे:

 -webkit-property -moz-property -ms-property -o-property property 

इस पद्धति का एक निश्चित लाभ इसकी अपेक्षाकृत साफ उपस्थिति है, और यह भी नोटिस करना आसान हो जाता है अगर अचानक उपसर्गों में से एक गायब है।

यह सलाह, निश्चित रूप से, इस लेख में कम से कम लाभ है, हालांकि, इसके लाभ व्यवहार में साबित हुए हैं।

अनावश्यक उपसर्ग निकालें

border-radius जैसे उपसर्गों के बिना उपयोग के लिए कई CSS3 गुण लंबे समय से उपलब्ध हैं। हाल के दिनों में, केवल कुछ CSS विनिर्देश एक स्तर तक बढ़े हैं जो अब स्वीकार्य माना जाता है ताकि ब्राउज़र निर्माता उपसर्गों को हटा सकें। इनमें स्पेसिफिकेशंस ट्रांसफ़ॉर्म, ट्रांज़िशन, एनिमेशन, मल्टी-कॉलम लेआउट, फ्लेक्सबॉक्स और इमेज वैल्यूज़ (ग्रेडिएंट, मुख्य रूप से) प्रमुख हैं। उपसर्गों को हटाने के लिए अलग-अलग ब्राउज़र पथ के विभिन्न चरणों में हैं, लेकिन कुछ इसके लिए तैयार हैं, जो इस बात पर निर्भर करता है कि आपको किस पुराने ब्राउज़र का समर्थन करना है।

बॉक्स आकार

इंटरनेट एक्सप्लोरर और ओपेरा ने विनिर्देशन लागू होने के बाद से उपसर्गों के बिना बॉक्स-आकार का समर्थन किया है, इसलिए आपको केवल गेको और वेबकिट पर आधारित ब्राउज़रों पर विचार करने की आवश्यकता है। फ़ायरफ़ॉक्स को अभी भी -moz- उपसर्ग की आवश्यकता है, जबकि आप Webkit के लिए उपसर्ग को छोड़ सकते हैं यदि आपको समर्थन की आवश्यकता नहीं है:

• Chrome 9 और उससे नीचे (~ 0.30% बाज़ार)
• सफारी 5 और नीचे (~ 0.74% बाजार)
• Android 3 ब्राउज़र और नीचे (> फिलहाल 60% Android डिवाइस)
• IOS 4.3 और नीचे पर सफारी
• ब्लैकबेरी ब्राउज़र 7 और नीचे

अनुशंसित उपयोग:

 -webkit-box-sizing: value; /*        Android */ -moz-box-sizing: value; box-sizing: value; 

बॉक्स-छाया

बॉक्स-शैड के साथ स्थिति box-sizing लगभग समान है, सिवाय इसके कि फ़ायरफ़ॉक्स आपको केवल 3.5 और 3.6 संस्करणों में उपसर्ग करने की आवश्यकता है। साथ में वे वर्तमान बाजार का 0.77% प्रतिनिधित्व करते हैं।

अनुशंसित उपयोग:

 -webkit-box-shadow: value; /*     Android,    box-shadow    */ box-shadow: value; 

व्यक्तिगत रूप से, मैं -webkit-box-shadow को हटा -webkit-box-shadow , जैसा कि यह अक्सर box-sizing विपरीत शैलियों का एक महत्वपूर्ण तत्व नहीं है, जो मार्कअप को तोड़ सकता है।

बॉर्डर-त्रिज्या

पिछली दो संपत्तियों के साथ स्थिति में, ओपेरा और इंटरनेट एक्सप्लोरर ने कार्यान्वयन के क्षण से उपसर्ग के बिना सीमा-त्रिज्या का समर्थन किया। यदि आप निम्नलिखित ब्राउज़रों के लिए समर्थन की आवश्यकता नहीं है, तो आप -webkit- और -moz- कर सकते हैं:

• फ़ायरफ़ॉक्स 3.6 और नीचे (~ 0.95% बाजार)
• क्रोम 4 और उससे नीचे (बाजार का ~ 0.05%)
• सफारी 4 और नीचे (~ 0.12% बाजार)
• Android 2.1 और निम्न (वर्तमान Android उपकरणों का ~ 3%)
• IOS 3.2 और नीचे पर सफारी

अनुशंसित उपयोग:

 border-radius: value; 

अधिक हाल के विनिर्देशों

बुरी खबर यह है कि आपको अभी भी इस अनुभाग में सूचीबद्ध सभी विशिष्टताओं के लिए वेबकिट के आधुनिक संस्करणों में -webkit- का उपयोग करने की आवश्यकता है। अच्छी खबर यह है कि आपको अब शुरू होने वाले बदलावों , बदलावों , परिवर्तनों और एनिमेशन के लिए उपसर्ग लिखने की आवश्यकता नहीं है:

• इंटरनेट एक्सप्लोरर 10
• ओपेरा 12.1
• फ़ायरफ़ॉक्स 16

इसके अलावा, IE में उपरोक्त सभी विशिष्टताओं (2 डी परिवर्तनों को छोड़कर) के लिए उपसर्गों की आवश्यकता नहीं थी। ओपेरा में 3 डी परिवर्तनों को लागू नहीं किया जाता है, लेकिन आप उम्मीद कर सकते हैं कि उन्हें उपसर्ग के बिना तुरंत लागू किया जाएगा।

मैं -webkit-, -moz-, -o- और उपसर्ग के बिना संस्करण का उपयोग करने की सलाह दूंगा (ध्यान दें कि ग्रेडिएटर्स के बारे में नीचे क्या लिखा जाएगा), सिवाय इसके कि आपको उपसर्गों को याद रखने की जरूरत है- 2D ट्रांसफॉर्मेशन और लोप के लिए- -o- 3 डी परिवर्तनों के लिए। निकट भविष्य में, आप फ़ायरफ़ॉक्स और ओपेरा के लिए समर्थन निकालना शुरू कर सकते हैं, जैसा कि उपयोगकर्ताओं को काफी तेज़ी से अपडेट किया जाता है, और इन ब्राउज़रों में एंड्रॉइड उपयोगकर्ताओं के साथ तुलना में ऐसी कोई समस्या नहीं है - ये कछुए की गति के साथ अपने ऑपरेटिंग सिस्टम को अपडेट करते हैं।

मल्टी-कॉलम लेआउट IE और ओपेरा में उपसर्गों के बिना लागू किया गया था। लेकिन वे अभी भी फ़ायरफ़ॉक्स और WebKit के सभी संस्करणों में आवश्यक हैं।

फ्लेक्सबॉक्स आम तौर पर पौराणिक है (मैं इस बारे में बाद में लिखूंगा), और इसलिए कई अलग-अलग सिंटैक्स और उपसर्गों के समर्थन की आवश्यकता होती है, लेकिन यह सभी ब्राउज़रों के आधुनिक संस्करणों द्वारा समर्थित है। यह संपत्ति ओपेरा 12.1 में उपसर्गों के बिना लागू की गई है।

उपसर्गों के बिना गुण जोड़ें

चूंकि उल्लिखित विनिर्देश अब निर्बाध उपयोग के लिए तैयार हैं, इसलिए डेवलपर्स के लिए इसका लाभ उठाने का समय है। सिद्धांत रूप में, इन गुणों को अब किसी भी तरह से नहीं बदलना चाहिए - सीएसएस के कार्य समूहों में उन पर सभी आवश्यक समझौते किए जाते हैं।

डेवलपर्स के बीच, दो दृष्टिकोण हैं। पहले में गुणों के गैर-उपसर्ग संस्करणों का उपयोग शामिल है। यदि आप इस दृष्टिकोण का अभ्यास करते हैं, तो आपको केवल अप्रयुक्त उपसर्गों को हटाने की आवश्यकता है, लेकिन इससे पहले, अगले अध्याय में देखें, क्योंकि कुछ नुकसान हैं। दूसरा दृष्टिकोण, क्रमशः गैर-उपसर्ग संस्करणों का उपयोग नहीं करना है। यदि आप इनमें से एक हैं, तो अब आपको उन सभी को जोड़ने की आवश्यकता होगी। अगले अध्याय में बताया गया है कि यह कैसे करना है।

नए सिंटैक्स में अपग्रेड करें

यह शायद सामान्य सफाई का सबसे महत्वपूर्ण हिस्सा है। विशेष रूप से यदि आप उपकरण विकसित कर रहे हैं, या लाइव ट्रैफ़िक के टन के साथ समर्थन ट्यूटोरियल।

यह व्यापक रूप से ज्ञात है कि सीमा-त्रिज्या एक वैकल्पिक सिंटैक्स पर स्विच किया गया था, बजाय मूल रूप से फ़ायरफ़ॉक्स 2 में क्या था। यह भी ज्ञात है कि सफारी के समाधान के बजाय ग्रेडिएंट्स के साथ भी ऐसा ही हुआ था। लेकिन निश्चित रूप से हर कोई नहीं जानता था (और इससे भी अधिक, लाइव परियोजनाओं में अपडेट किया गया) कि ग्रेडिएंट का सिंटैक्स फिर से बदल गया। यदि आपने लंबे समय तक अपने ग्रेडिएंट को नहीं छुआ है, तो सबसे अधिक संभावना है कि आपका बहुत सारा कोड पहले ही पुराना हो चुका है और निर्णायक कार्रवाई की प्रतीक्षा कर रहा है।

न्यू ग्रैडिएंट सिंटेक्स

सौभाग्य से, नए सिंटैक्स को अपग्रेड करना बहुत आसान है, और आपको वास्तव में गैर-उपसर्ग संस्करण को अपडेट करना होगा। आप उपसर्गों को अपरिवर्तित छोड़ सकते हैं। हाल के सभी ब्राउज़र वेबकिट के अपवाद के साथ, इस नवाचार का समर्थन करते हैं। हां, हां, वेबकिट IE के पीछे है!

मूल नियम: यदि आप एक दिशा निर्दिष्ट करते हैं, तो इसे उल्टा कर दिया जाना चाहिए और कीवर्ड से पहले होना चाहिए। इस तरह से:

 background: -prefix-linear-gradient(left, white, black); 

यह हो जाता है:

 background: linear-gradient(to right, white, black); 

यदि आपने एक कोण का संकेत दिया है, तो प्रारंभिक बिंदु संदर्भ स्थानांतरित हो गया है। पहले, 0deg पूर्व में था। कोणों ने वामावर्त में वृद्धि की, इसलिए अब उत्तर में 90 डिग्री शुरू होता है। गैर-उपसर्ग सिंटैक्स के साथ, 0deg पर ढाल रेखा उत्तर में शुरू होती है और कोण दक्षिणावर्त बढ़ता है। पुराने मानों से पुनर्गणना का फॉर्मूला abs(oldDegValue − 450) mod 360 जैसा दिखता है।

परिपत्र ढ़ाल के लिए, स्थिति और लंबाई कीवर्ड से पहले होनी चाहिए:

 background: -prefix-radial-gradient(center, white, black); 

यह हो जाता है:

 background: radial-gradient(at center, white, black); 

कीवर्ड कवर और ढाल के आकार के संबंध में अब समर्थित नहीं हैं। दूर-कोने में परिवर्तन को कवर किया जाता है और निकटतम पक्ष में होते हैं।

और अंत में, यदि आप ढाल की स्थिति को इंगित करते हैं, और उसी समय आकार या आकार, तो स्थिति को संकेत दिया जाना चाहिए: इस प्रकार:

 -prefix-radial-gradient(center, 50px 25px, white, black); 

में बदल जाता है:

 -radial-gradient(50px 25px at center, white, black); 

नई फ्लेक्सबॉक्स सिंटेक्स

यह गिनने के लिए कि फ्लेक्सबॉक्स का सिंटैक्स कितनी बार बदला गया है, मेरे पास पर्याप्त उंगलियां नहीं हैं। सौभाग्य से, इस कार्यक्षमता का उपयोग एक ही ग्रेडिएंट की तुलना में कम बार किया जाता है, इस तथ्य के कारण कि साइटें बस टूट जाती हैं यदि फ्लेक्सबॉक्स ब्राउज़र द्वारा समर्थित नहीं है।

फिलहाल, केवल उपसर्गों के बिना ओपेरा नए वाक्यविन्यास का समर्थन करता है। Chrome इसे 21 से शुरू होने वाले उपसर्गों के साथ समर्थन करता है, फ़ायरफ़ॉक्स संस्करण 20 के बाद से उपसर्गों के बिना नए सिंटैक्स का समर्थन करने जा रहा है, लेकिन अब इसमें केवल पुराना सिंटैक्स उपलब्ध है। IE थोड़ा पुराने वाक्यविन्यास का समर्थन करता है, लेकिन वह नहीं जो वेबकिट और फ़ायरफ़ॉक्स के पुराने कार्यान्वयन में मौजूद है। सफारी अब केवल पुरानी रिकॉर्डिंग का समर्थन करता है। अधिकतम संगतता प्राप्त करने के लिए, आपको उपयोग करने की आवश्यकता है:

• सबसे हाल ही में गैर-उपसर्ग सिंटैक्स: display: flex एंड कंपनी (ओपेरा, फ़ायरफ़ॉक्स 20, और संभवतः निकट भविष्य में क्रोम)।
• -Webkit- उपसर्ग: display: -webkit-flex -webkit- display: -webkit-flex और कंपनी (क्रोम 21) के साथ सबसे हालिया वाक्यविन्यास। इस पर हथौड़ा चलाना और पुराने वाक्य विन्यास पर एक उपसर्ग-मुक्त कार्यान्वयन की प्रतीक्षा करना बुद्धिमानी होगी।
• उपसर्ग -ms-: display: -ms-flexbox और कंपनी (IE10) के साथ पुराना नया वाक्यविन्यास।
• पुराने सिंटैक्स के साथ -moz- और -webkit-: display: -webkit-box -webkit display: -webkit-box (WebKit), display: -moz-box (फ़ायरफ़ॉक्स)।

इस पोस्ट के हिस्से के रूप में तुलना करने के लिए विनिर्देश बहुत मुश्किल है, लेकिन आप अंतर को नोटिस करने और पुराने पुराने और नए नए सीएसएस ट्रिक्स सिंटैक्स के कुछ डेमो देखने के बारे में पढ़ सकते हैं। क्रिस पुराने नए (या यह नया पुराना है ...) सिंटैक्स पर स्पर्श नहीं करता है, इसलिए आप अधिक जानकारी के लिए Microsoft फ्लेक्सबॉक्स दस्तावेज़ पर भी जा सकते हैं।

ब्राउज़र के वितरण पर जानकारी दिसंबर 2012 के लिए स्टेटकाउंटर से ली गई थी। एंड्रॉइड के वर्तमान संस्करणों पर डेटा आधिकारिक Google रिपोर्ट से लिया गया है। रूस के लिए डेटा भिन्न हो सकते हैं।