🤜🏻 👶🏼 🖖🏿 CSS3: उपसर्गों के बिना जीवन 👨🏿‍💼 🤯 ‼️

उपसर्ग एक अच्छी बात है। वे ब्राउज़र निर्माताओं को नई सुविधाओं को लागू करने में मदद करते हैं। लेकिन उनसे डेवलपर्स का जीवन केवल अधिक जटिल हो जाता है। कई उपसर्ग हैं, कभी-कभी वाक्यविन्यास में अंतर होते हैं।

समस्या स्पष्ट है। उपसर्गों के साथ काम करना आसान बनाने के लिए एक रास्ता चाहिए।

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

1. प्रीप्रोसेसर

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

सबसे प्रसिद्ध CSS प्रीप्रोसेसर्स LESS और SASS हैं ।

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

कम

इस प्रीप्रोसेसर में एक सिंटैक्स होता है जो प्रतियोगी की तुलना में सरल होता है। सर्वर साइड पर स्टाइलशीट को संसाधित करना संभव है, लेकिन अब हम एक जावास्क्रिप्ट फ़ाइल के माध्यम से क्लाइंट साइड पर काम करने के विकल्प में रुचि रखते हैं।

संबंध

<!doctype html>
<had>
<link rl="stylesheet/less" type="text/css" href="style.less">
<sript src="less-1.1.3.min.js" type="text/javascript"></sript>
</had>

hagfish

.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}

के उपयोग

#shape1{
.border-radius(10px);
}

उपसर्गों के साथ काम करने के लिए, आपको मिक्सिंस का उपयोग करने की आवश्यकता है (वही कोड जो जानता है कि क्या और कहां बदलना है)। CSS3 के लिए तैयार मिक्सिन किट और लाइब्रेरी हैं
lesselements.com
github.com/jdmiller82/-lessins-
snipplr.com/view/47181/less-classes
roel.vanhintum.eu/more-less

सर्वर पर या ब्राउज़र में .less फ़ाइलों को संकलित करने के लिए आवश्यक नहीं है, आप स्थानीय रूप से समाप्त सीएसएस फ़ाइल प्राप्त कर सकते हैं और इसे पहले से ही साइट के लिए उपयोग कर सकते हैं
SimpLESS एक ऐसा अनुप्रयोग है जो स्वचालित रूप से .less को मानक CSS में संकलित करता है। सभी प्लेटफार्मों के लिए नि: शुल्क।
कम अनुप्रयोग एक समान अनुप्रयोग है, लेकिन केवल मैक के लिए।

यहां तक कि सीएसएस में Dreamweaver संकलन के लिए एक एक्सटेंशन है । बिना फाइलों के।

क्लाइंट कंप्यूटर .less और .js फ़ाइलें प्राप्त करता है, ब्राउज़र में प्रसंस्करण के बाद हमारे पास एक .css फ़ाइल होती है जिसमें सभी संभव उपसर्ग होते हैं

एस.ए.एस.एस.

रूबी में लिखा। इसमें LESS की तुलना में अधिक विशेषताएं हैं, इसलिए यह बड़ी परियोजनाओं के लिए बेहतर अनुकूल है। उत्पन्न करने के लिए उपसर्गों का उपयोग करना लगभग एक प्रतियोगी की तरह होगा, अर्थात, मिश्रण के माध्यम से।

फायदे में से एक कम्पास ढांचे की उपस्थिति है, जिसमें सीएसएस 3 के साथ काम करने के लिए तैयार पुस्तकालय और मिश्रण शामिल हैं। CSS में SASS फ़ाइलों के स्थानीय संकलन के लिए एक आवेदन है । क्रॉस-प्लेटफ़ॉर्म, लेकिन भुगतान (ग्राफिक शेल का भुगतान किया जाता है, संकलक खुला स्रोत है)।

SASS के लिए CSS3 मिक्सिन लाइब्रेरी भी हैं:
github.com/thoughtbot/bourbon

SASS फाइलें सर्वर पर संसाधित होती हैं, क्लाइंट कंप्यूटर एक तैयार-निर्मित .css फ़ाइल प्राप्त करता है

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

प्रीप्रोसेसर के नुकसान:
- जावास्क्रिप्ट के साथ संस्करण के लिए - ब्राउज़र में शामिल स्क्रिप्ट पर निर्भरता
- सभी संभव उपसर्गों के साथ उत्पन्न कोड, न केवल उन जो एक विशेष ब्राउज़र द्वारा आवश्यक हैं

अधिक प्रतिस्पर्धी

२.-उपसर्ग रहित

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

शैली पृष्ठों को जावास्क्रिप्ट का उपयोग करके संसाधित किया जाता है।

उपसर्ग केवल उन गुणों के लिए जोड़े जाते हैं, जो उपसर्गों के बिना किसी विशेष ब्राउज़र द्वारा समर्थित नहीं हैं।

क्लाइंट कंप्यूटर उपसर्गों के बिना .css फ़ाइल प्राप्त करता है। जावास्क्रिप्ट का उपयोग करके ब्राउज़र में प्रसंस्करण के बाद, केवल आवश्यक उपसर्ग इस फ़ाइल में जोड़े जाते हैं

लाभ:
+ स्टाइलशीट के लेखक उपसर्गों के बिना, केवल एक संपत्ति विकल्प का उपयोग करता है
+ उपयोगकर्ता का ब्राउज़र "विदेशी" उपसर्गों या उपसर्गों के साथ शैलियों को प्राप्त नहीं करता है जो पहले से ही पुराने हैं
+ वैध कोड
+ दर्द को तब दूर किया जा सकता है जब इसकी आवश्यकता समाप्त हो जाती है

नुकसान:
- आयात के माध्यम से जुड़ी शैलियों को संसाधित नहीं किया जाता है
- साइट लोड करने के बाद और CSS3- शैलियों के पूर्ण प्रसंस्करण से पहले एक मुश्किल से ध्यान देने योग्य ठहराव है
- जब जावास्क्रिप्ट अक्षम किया जाता है, तो उपयोगकर्ता को कुछ CSS3 शैलियों नहीं दिखाई देंगी
- डाउनलोड करने के लिए एक अतिरिक्त फ़ाइल (हालांकि संकुचित रूप में केवल 2KB)
- संसाधित स्टाइलशीट कैश नहीं है

प्रतियोगियों

3. जनक

यह विधि पहले से ही कई द्वारा उपयोग की जाती है। बस ऑनलाइन जनरेटर में से एक खोलें और उपसर्गों के साथ समाप्त कोड को कॉपी करें।

हाल ही में मैंने एक जनरेटर की तलाश करने की कोशिश की जो स्वचालित रूप से मेरे द्वारा लिखी गई मानक संपत्ति के साथ उपसर्गों के साथ गुण जोड़ देगा। यह पता चला कि कई विकल्प हैं।

prefixr.com आप उन ब्राउज़र का चयन कर सकते हैं जो उपसर्गों का उपयोग करते हैं, आप कोड को संपीड़ित कर सकते हैं, चर का उपयोग कर सकते हैं, कोड संपादकों के लिए प्लगइन्स हैं
prefixmycss.com
cssprefixer.appspot.com यहां जनरेटर सर्वर स्क्रिप्ट की क्षमताओं के प्रदर्शन के रूप में काम करता है, जो मुफ्त उपयोग के लिए उपलब्ध है
imsky.github.com/cssFx यह जनरेटर एक जावास्क्रिप्ट स्क्रिप्ट की संभावनाओं को प्रदर्शित करता है, जो मुफ्त उपयोग के लिए उपलब्ध है

सर्वर पर मैन्युअल रूप से तैयार की गई फ़ाइल .css सभी उपसर्गों के साथ फाइल अपलोड करें

लाभ:
+ स्थापित करने और कॉन्फ़िगर करने की आवश्यकता नहीं है
+ अक्सर जनरेटर CSS3 गुणों के लिए मूल्यों को आसानी से कॉन्फ़िगर करने की क्षमता प्रदान करता है

नुकसान:
- CSS3 संपत्ति मूल्यों को बनाते और बाद में बदलते समय कोई स्वचालन नहीं है

4. कोड संपादक

खैर, कोड संपादकों और प्रोग्रामिंग वातावरण के लिए उपसर्गों के प्रतिस्थापन को स्वचालित रूप से करने की संभावना है। उपसर्गों के लिए हाथ पर ज़ेन कोडिंग करना बहुत सुविधाजनक होगा।

फिलहाल, उपसर्ग का उपयोग करके प्लगइन्स ढूंढने में कामयाब रहे:

यह पृष्ठ नोटपैड ++, टेक्स्टमैट, एस्प्रेसो, कोडा और कुछ अन्य लोगों के लिए प्लगइन्स को सूचीबद्ध करता है।
नेटबीन्स के लिए प्रीफिक्सर

UPD आपमें से जो रूसी इस लेख को अंग्रेजी में नहीं बोलते हैं।

CSS3: उपसर्गों के बिना जीवन

1. प्रीप्रोसेसर

कम

एस.ए.एस.एस.

२.-उपसर्ग रहित

3. जनक

4. कोड संपादक

More articles: