Autoprefixer CSS 3 से प्रायोगिक गुणों में उपसर्ग जोड़ने के लिए एक नई पीढ़ी की उपयोगिता है। यह
कैन I के साथ ब्राउज़र उपसर्गों और लोकप्रियता
के नवीनतम डेटा का
उपयोग करता है, आपकी स्टाइलशीट पढ़ता है, उन गुणों और मूल्यों को पाता है जिन्हें वास्तव में उपसर्गों की आवश्यकता होती है और उन्हें जोड़ता है।
आप बस सादे सीएसएस लिखते हैं:
a { transition: transform 1s }
स्वतः-उपसर्गकर्ता स्वयं आवश्यक (और केवल आवश्यक) गुणों और मूल्यों को बदल देगा (ध्यान दें
-webkit-transform ):
a { -webkit-transition: -webkit-transform 1s; -o-transition: -o-transform 1s; transition: -ms-transform 1s; transition: transform 1s }
यह उपयोगिता सर्वर पर साइट को बिछाने के दौरान काम करती है (और विकास के दौरान प्रोग्रामर की मशीन पर), इसलिए यह ग्राहकों के लिए ध्यान देने योग्य नहीं है और ब्राउज़र से किसी भी समर्थन की आवश्यकता नहीं है।
समस्या
दुर्भाग्य से, वर्तमान उपकरण समस्या को अच्छी तरह से हल नहीं करते हैं:
- अपने हाथों से गुणों के तार लिखना स्पष्ट रूप से एक बुरा निर्णय है। इस तरह के कोड को पढ़ना असंभव है, संपादन करते समय शेष गुणों को ठीक करना भूलना आसान है।
- सास और लेस में, आपको स्वयं परियोजना से परियोजना के लिए उपसर्गों की प्रासंगिकता की निगरानी करने और अशुद्धियों को कॉपी करने की आवश्यकता है। इसके अलावा, अशुद्धियां केवल गुणों के लिए समस्या का समाधान कर सकती हैं, न कि मूल्यों के लिए (उदाहरण के लिए,
calc() )। - कम्पास या बोरबॉन पहले से बेहतर है, वहां अशुद्धियों की सूची को केंद्र में संग्रहीत किया जाता है और अप-टू-डेट रखना आसान होता है (लेकिन अभ्यास से पता चलता है कि आमतौर पर प्रासंगिकता की निगरानी के बिना सभी उपसर्गों को एक अशुद्धता में जोड़ा जाता है)। मूल्य समस्या अभी भी हल नहीं हुई है।
- सैस और लेस के साथ मुख्य समस्या यह है कि आपको अभी भी लगातार सोचने की ज़रूरत है "क्या यह सीएसएस 3 से संपत्ति है या नहीं?" - और इस पर निर्भर करता है, एक प्रवेश का उपयोग करें या नहीं। स्टाइलस ने इस समस्या को थोड़ा हल किया - इसकी अशुद्धियों का सिंटैक्स सामान्य गुणों से भिन्न नहीं होता है, इसलिए उपसर्ग अदृश्य रूप से जोड़े जाते हैं। हालांकि, प्रासंगिकता और मूल्यों की समस्या अभी भी बनी हुई है।
- ब्राउज़र में सीधे उपसर्ग जोड़ने के लिए स्क्रिप्ट भी हैं, उदाहरण के लिए, प्रीफिक्स फ्री , लेकिन विकास और गणना चरण में शैलियों को संसाधित करना सबसे अच्छा है, और क्लाइंट ब्राउज़र में हर बार प्रसंस्करण को दोहराना नहीं है।
यह स्पष्ट है कि प्रीप्रोसेसर्स की भाषाएं समस्या को पूरी तरह से हल करने की अनुमति नहीं देती हैं, एक मौलिक रूप से नए उपकरण की आवश्यकता थी।
स्टाइलस डेवलपर टीजे होलोवैचुक ने भी इसे समझा, इसलिए उन्होंने एक नई पीढ़ी के प्रीप्रोसेसर,
Rework का विकास शुरू किया। यह एक अलग भाषा नहीं है जो CSS (जैसे Sass या स्टाइलस) में संकलित की गई है, बल्कि एक सीएसएस ट्री प्रीप्रोसेसर है:
- सबसे पहले, सीएसएस पार्सर ने एक स्टाइल ट्री बनाया;
- फिर जेएस फ़ंक्शंस ने इस पेड़ को आप की तरह बदल दिया;
- अंत में, नए पेड़ को सीएसएस फ़ाइल में सहेजा गया था।
नतीजतन, नया टूल बहुत अधिक लचीला था - आप सीएसएस के साथ वास्तव में कुछ भी कर सकते थे। इसलिए, यह Rework था जिसने AutoPrefixer के आधार का गठन किया।
लाभ
आपको एक नई भाषा सीखने की आवश्यकता नहीं है
स्वतः-उपसर्गकर्ता नियमित सीएसएस के शीर्ष पर काम करता है - इसलिए आपको पूरी टीम के साथ एक नई भाषा में प्रवास करने की आवश्यकता नहीं है। हालांकि, यह अन्य भाषाओं जैसे कि सैस और स्टाइलस के साथ संगत है - आपको इसे सीएसएस को संकलित करने के बाद ही चलाने की आवश्यकता है।
आपको यह सोचने की ज़रूरत नहीं है कि यहां अशुद्धता की आवश्यकता है या नहीं - आप उपसर्गों के बारे में पूरी तरह से भूल सकते हैं। स्वतः-उपसर्गकर्ता को स्वयं पता चलेगा कि क्या बदलने की आवश्यकता है - आप सामान्य गुणों और मूल्यों के साथ सादे सीएसएस लिखते हैं।
मानों के लिए उपसर्ग
Rework के लचीलेपन के कारण, AutoPrefixer
@keyframes और values
@keyframes लिए उपसर्ग जोड़ सकता है। उदाहरण के लिए, कम्पास में, सीएसएस 3 से गुणों के लिए एक
transition एनीमेशन निर्दिष्ट करना बहुत मुश्किल है, जैसे कि अशुद्धियों को निर्दिष्ट नहीं किया जा सकता है और आपको
transform लिए सभी संभावित उपसर्गों को सूचीबद्ध करना होगा।
हमेशा अप-टू-डेट डेटा
सबसे पहले, लेखकों के खाली समय पर निर्भर न होने के लिए, ऑटोप्रिफ़िशर डेटाबेस को
कैन आई यूज़ से
स्वचालित स्क्रिप्ट के साथ अपडेट किया
जाता है , ताकि डेटा हमेशा ताज़ा बना रहे।
दूसरे, आप उन ब्राउज़रों के संस्करणों को निर्दिष्ट करते हैं जिन्हें आप समर्थन करते हैं (डिफ़ॉल्ट रूप से, Google में, प्रत्येक ब्राउज़र के अंतिम 2 संस्करण लिए गए हैं) - आप वैश्विक उपयोग के आंकड़ों के अनुसार भी संकेत कर सकते हैं, उदाहरण के लिए, "1% से अधिक"।
नतीजतन, सीएसएस में वास्तव में केवल आवश्यक उपसर्ग होंगे, फाइलें साफ-सुथरी होंगी और उन्हें वेब ब्राउज़र निरीक्षक में देखना आसान होगा।
के उपयोग
रूबी ऑन रेल्स
रेल के लिए एक "
ऑटोप्रिफ़िशर-रेल " मणि है - आपको केवल मणि कनेक्ट करने की आवश्यकता है और उपसर्गों को आपके सीएसएस फ़ाइलों से
app/assets/ और
lib/assets स्वयं जोड़ा जाएगा। बस
Gemfile जोड़ें और नियमित CSS लिखना जारी रखें:
gem "autoprefixer-rails"
एसेट्स पाइपलाइन के लचीलेपन के लिए धन्यवाद, उपसर्ग आपके सास और स्टाइलस दोनों शैलियों में जोड़े जाएंगे। ब्राउज़रों को
config/autoprefixer.yml में निर्दिष्ट किया जा सकता है:
browsers: - "last 1 version" - "> 1%" - "ie 8"
आप पता लगा सकते हैं कि
rake autoprefixer:inspect का उपयोग करके कौन से उपसर्ग जोड़े
rake autoprefixer:inspect कार्य
rake autoprefixer:inspect ।
गहरे लाल रंग का
यदि आप Sprockets का उपयोग रेल के बिना करते हैं (उदाहरण के लिए, सिनात्रा के साथ), तो आप इसमें ऑटो उपसर्ग कनेक्ट कर सकते हैं:
AutoprefixerRails.install(sprockets_env)
आप CSS को बिना Sprockets के संभाल सकते हैं:
prefixed = AutoprefixerRails.compile(css))
जावास्क्रिप्ट
नोड.जेएस में संकलित करने के लिए, आप npm के साथ पैकेज का उपयोग कर सकते हैं:
var autoprefixer = require('autoprefixer'); var prefixed = autoprefixer.compile(css);
यदि आपको ब्राउज़र में CSS को संभालने की आवश्यकता है, तो आप
स्क्रिप्ट का एक
विशेष निर्माण कर सकते हैं।
यदि आप पहले से ही Rework का उपयोग कर रहे हैं, तो आप Auto Prefixer का एक अलग फ़िल्टर कनेक्ट कर सकते हैं:
rework(css). use( autoprefixer.rework(['> 1%', 'opera 12.5']) ). use( rework.references() ). toString();
अन्य
ऑटो-उपसर्गकर्ता को एक अलग एप्लिकेशन का उपयोग करके अन्य भाषाओं और प्रणालियों के साथ एकीकृत किया जा सकता है:
sudo npm install
संदर्भ