-विस्तृत-मुक्त: जावास्क्रिप्ट में एक सुरुचिपूर्ण और लघु "बैसाखी", विभिन्न ब्राउज़रों के लिए CSS3 संपत्ति उपसर्गों को याद रखने और सूचीबद्ध करने की आवश्यकता को समाप्त करना।

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

ब्राउज़र के लिए CSS3 के गुणों के साथ काम करने के लिए ये उपसर्ग आवश्यक हैं जो अभी तक पूरी तरह से मानकीकृत नहीं हैं: यह माना जाता है कि वर्तमान ब्राउज़र में से प्रत्येक के लिए एक अलग संपत्ति सेटिंग प्रत्येक ब्राउज़र में संपत्ति के वर्तमान कार्यान्वयन और मानक की अंतिम आवश्यकताओं के बीच संभावित अंतर को और अधिक कम कर देगी। । मोज़िला फ़ायरफ़ॉक्स ब्राउज़र इस उद्देश्य के लिए " -moz- " उपसर्ग का उपयोग करता है, Google Chrome में Google उपसर्ग " -webkit- " और Apple सफारी (और अन्य वेबकिट- आधारित ब्राउज़र ) , ओपेरा उपसर्ग " -o- ", में IE उपसर्ग " -ms- " है, और कोनेकर में (और सफारी के पुराने संस्करणों में ) उपसर्ग " -khtml- " है।

व्यवहार में, हालांकि, साइट के लेखक अक्सर कई ब्राउज़रों की क्षमताओं के एक प्रकार के "सामान्य भाजक" का उपयोग करते हैं - CSS3 संपत्ति मूल्य जो सभी आधुनिक ब्राउज़रों में समान (या लगभग समान) काम करते हैं। हां, और वे सभी एक ही तरह से रिकॉर्ड किए जाते हैं। उपसर्गों का संकेत इसलिए गुणों की पुनरावृत्ति को कम किया जाता है। उदाहरण के लिए, ColorBox jQuery प्लगइन के कई बटन गोल किनारों को देने और उन्हें छाया बनाने के लिए बनाने के लिए, आपको अनिवार्य रूप से CSS में यह लिखना होगा:

#cboxPrevious, #cboxNext, #cboxClose { -webkit-box-shadow: 0 0 6px #000; -moz-box-shadow: 0 0 6px #000; box-shadow: 0 0 6px #000; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } 

सबसे पहले, यह कैडलिंग है।

दूसरी बात यह कि यह गैर-आर्थिक है।

तीसरा, हमेशा एक या दूसरे उपसर्ग को निर्दिष्ट करने की आवश्यकता को भूलने का जोखिम होता है। (" सामान्य CSS3 त्रुटियों से कैसे बचें " सूची में, यह त्रुटि पहले आती है ।)

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

और ऐसा एक उपकरण दिखाई दिया - ली वेरो के लिए धन्यवाद। यहाँ यह है:



" -प्रूफ-फ़्री " स्क्रिप्ट , जो केवल 2 Kb को संपीड़ित रूप में लेती है, CSS3 के गुणों को संसाधित करती है और उन्हें ब्राउज़र में एडाप्ट करती है।

यह जावास्क्रिप्ट है, यह पाठक पक्ष पर काम करता है। इसलिए, यह स्पष्ट है कि यदि स्क्रिप्ट में जावास्क्रिप्ट अक्षम है तो स्क्रिप्ट काम नहीं करेगी; लेकिन उसे यह देखने और समझने का अवसर मिलता है कि ब्राउज़र सीधे ब्राउज़र में क्या उपसर्ग करता है, और "उपयोगकर्ता-एजेंट" हेडर को सूँघने पर भरोसा नहीं करता है , और असमर्थित गुणों की तैयार (संभवतः पुरानी) सूची पर निर्भर नहीं होता है, जैसा कि सर्वर पर होता है। ।

स्क्रिप्ट <शैली> तत्वों और शैली में निर्दिष्ट शैलियों को संसाधित करती है = "..." विशेषताएँ , साथ ही बाहरी शैली <लिंक> तत्वों (लेकिन अन्य डोमेन से नहीं) द्वारा जुड़ी हुई हैं। एक उदाहरण स्व-साइट "-विशेष-मुक्त" की शैली है । हालांकि, "-प्रूफ-फ़्री" को पता नहीं है कि @import निर्देश के साथ जुड़े शैलियों को कैसे संभालना है।

ओपेरा और Google क्रोम ब्राउज़र में, स्थानीय फ़ाइलों से जुड़ी शैलियों का प्रसंस्करण डिफ़ॉल्ट रूप से समर्थित नहीं है (इसके लिए ब्राउज़र की मैनुअल ट्यूनिंग की आवश्यकता होती है )। IE ब्राउज़र में (साथ ही साथ मोज़िला फ़ायरफ़ॉक्स संस्करण 3.6 और पूर्व में), शैली में गैर-उपसर्ग संपत्ति मान = "..." विशेषताएँ काम नहीं करती हैं , और इन पुराने फ़ायरफ़ॉक्स में - न केवल मूल्य , बल्कि गुणों के नाम भी हैं।

प्लगइन्स की एक जोड़ी "-प्रिफ़िक्स-फ़्री" स्क्रिप्ट से जुड़ी होती है: छोटा एक jQuery लाइब्रेरी ( .css (...) विधि) का उपयोग करके उपसर्गों के बिना CSS3 के गुणों को पढ़ने और सेट करने की अनुमति देता है, जबकि एक अन्य प्लगइन नई शैली /> और <लिंक तत्वों की उपस्थिति की निगरानी करता है। > , शैली में परिवर्तन के लिए = "..." विशेषताएँ , सीएसएसओएम विधियों ( सीएसएस ऑब्जेक्ट मॉडल) पर कॉल के लिए - और जल्दी से उपसर्गों के साथ वांछित गुणों की आपूर्ति करता है।

यह सच है कि इस ट्रैकिंग की फिर से सीमाएँ हैं: शैली में परिवर्तनों को ट्रैक करना संभव नहीं है = "..." विशेषता (वेबकिट में सेटअट्रिब्यूट () विधि द्वारा बनाई गई है, और Google Chrome में CSSOM के माध्यम से अपरिवर्तित गुण सेट करना है। उदाहरण के लिए, तत्व या तो काम नहीं करेगा) । style.transform = 'रोटेट (5deg)' ), हालांकि पढ़ना काम करेगा।

प्रलेखन पढ़ने के परिणामस्वरूप (मुख्य अंश, जिसमें से मैं अभी-अभी सेवानिवृत्त हुआ हूं), मुझे यह आभास हुआ कि "-विशेष-मुक्त" ऐसी साइट को डिजाइन करने के लिए उपयुक्त हो सकता है, जिसके पाठक आमतौर पर जावास्क्रिप्ट चालू करते हैं, और गतिशील शैली में परिवर्तन प्रबंधन कक्षाओं के बजाय नीचे आते हैं, बजाय सीधे तत्वों के संपत्ति मूल्यों के साथ। इन मूल्यों को शैली में नहीं रखने की आवश्यकता के लिए = "..." विशेषताएँ , लेकिन शैली तत्वों और फ़ाइलों में, यह हमेशा सामग्री से प्रस्तुति को अलग करने के लिए एक अच्छा स्वर माना जाता था।

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

तीसरी ओर, उपसर्गों का उपयोग कट्टरता को कम नहीं किया जाना चाहिए: जब यह अपना अर्थ खो देता है, तो एक अच्छा "बैसाखी" केवल लेखक के समय को बचाता है, संगतता समस्याओं को जन्म देने में सक्षम नहीं होता है। वही एरिक मेयर ने ट्विटर पर "-प्रोफिक्स-फ्री" स्क्रिप्ट की प्रशंसा की और ली वेरो को धन्यवाद दिया।