CSS मिनिफायर

CSS मिनिफायर एक मुफ्त टूल है, जो CSS से गैर-जरूरी कैरेक्टर हटाकर मिनिफाइड स्टाइलशीट देता है और मिनिफिकेशन से पहले व बाद के कैरेक्टर की संख्या भी दिखाता है।

CSS मिनिफिकेशन क्या करता है?

CSS मिनिफिकेशन ऐसी फॉर्मेटिंग हटाकर स्टाइलशीट में कैरेक्टर की संख्या घटाता है जिसकी ब्राउजर को जरूरत नहीं होती। आम तौर पर इसमें इंडेंटेशन, लाइन ब्रेक, कमेंट और विराम चिह्नों के आसपास की वैकल्पिक स्पेस शामिल होती हैं।

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

मिनिफिकेशन डिप्लॉयमेंट से पहले, जरूरत से ज्यादा बड़ी थर्ड-पार्टी CSS की जांच करते समय या यह देखने के लिए उपयोगी है कि डेवलपमेंट फॉर्मेटिंग से फाइल का आकार कितना बढ़ता है। यह उस ऑप्टिमाइजेशन से अलग है जिसमें इस्तेमाल न किए गए सिलेक्टर हटाए जाते हैं, एक जैसे रूल जोड़े जाते हैं या डिक्लेरेशन दोबारा लिखे जाते हैं। यह टूल ऐसे व्यापक बदलाव करने का दावा नहीं करता।

CSS मिनिफायर का इस्तेमाल कैसे करें?

स्टाइलशीट को CSS फील्ड में पेस्ट करके टूल चलाएं। फिर मिनिफाइड CSS के नतीजे को संबंधित बिल्ड या डिप्लॉयमेंट वर्कफ्लो में कॉपी करें। पढ़ने योग्य मूल CSS फाइल को मिनिफाइड कॉपी से स्थायी रूप से न बदलें।

1. अपनी साइट या ऐप में इस्तेमाल होने वाली मूल CSS से शुरुआत करें।
2. मिनिफाई करने से पहले जांच लें कि CSS सही तरीके से पार्स होती है।
3. इसे CSS में पेस्ट करें और टूल चलाएं।
4. CSS कैरेक्टर और मिनिफाइड CSS कैरेक्टर की तुलना करें।
5. नतीजे को किसी स्टेजिंग पेज पर जांचें। इसमें रिस्पॉन्सिव स्थितियां, प्रिंट स्टाइल और इंटरैक्टिव कॉम्पोनेंट भी शामिल करें।

CSS मिनिफिकेशन सर्वर पर होता है। सबमिट की गई CSS, HTTPS के जरिए सर्वर तक जाती है और स्टोर नहीं की जाती। अगर स्टाइलशीट में गोपनीय URL, आंतरिक होस्टनेम या दूसरी संवेदनशील जानकारी है, तो पहले विचार करें कि इसे सर्वर-साइड यूटिलिटी को भेजना आपके संगठन की डेटा प्रबंधन नीति के अनुरूप है या नहीं।

नतीजे को कैसे समझें?

नतीजे में बदली हुई CSS और कैरेक्टर की दो संख्याएं होती हैं। इससे आप आउटपुट की जांच कर सकते हैं और कमी सीधे देख सकते हैं। CSS कैरेक्टर सबमिट किए गए टेक्स्ट की लंबाई है, जबकि मिनिफाइड CSS कैरेक्टर मिनिफिकेशन के बाद की लंबाई है।

कैरेक्टर की गणना मल्टीबाइट को ध्यान में रखने वाले लंबाई फंक्शन से की जाती है। इन संख्याओं को नेटवर्क पर ट्रांसफर होने वाले वास्तविक आकार का सटीक अनुमान न मानें। UTF-8 कैरेक्टर एक से ज्यादा बाइट ले सकते हैं और Brotli या gzip कम्प्रेशन, HTTP पर भेजे जाने वाले आकार को काफी बदल सकता है।

इस टूल में अलग से कोई वैलिडेशन या एरर फील्ड नहीं दिया गया है। इसलिए इसे CSS वैलिडेटर न मानें। मेल न खाने वाले ब्रेस, गायब कोलन, बंद न की गई स्ट्रिंग, गलत कमेंट या अमान्य नेस्टिंग जैसी आम समस्याओं की जांच ब्राउजर डेवलपर टूल, लिंटर या मानकों को समझने वाले वैलिडेटर से करनी होगी। अमान्य CSS का आउटपुट देखने में कॉम्पैक्ट हो सकता है, लेकिन जरूरी नहीं कि वह अपेक्षा के अनुसार काम करे।

CSS मिनिफिकेशन के छोटे उदाहरण

आम तौर पर मिनिफाइड वर्जन में रूल को ज्यों का त्यों रखते हुए फॉर्मेटिंग हटा दी जाती है।

CSS

p { color: red; }

मिनिफाइड CSS

p{color:red}

इस उदाहरण में पढ़ने योग्य इनपुट में 17 कैरेक्टर हैं और कॉम्पैक्ट रूप में 12। कोट की गई स्ट्रिंग के भीतर मौजूद स्पेस और विराम चिह्न वैल्यू का हिस्सा बने रहने चाहिए।

CSS

.notice, .warning { color: #c00; margin: 0 1rem; }

मिनिफाइड CSS

.notice,.warning{color:#c00;margin:0 1rem}

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

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

CSS मिनिफिकेशन कब करना फायदेमंद नहीं है?

अगर फाइल पहले से मिनिफाइड है या कॉम्पैक्ट प्रोडक्शन एसेट के रूप में बनाई गई है, तो मिनिफिकेशन दोहराना आम तौर पर फायदेमंद नहीं होता। CSS मिनिफिकेशन का दूसरा चरण बहुत कम या कोई जगह नहीं बचा सकता, जबकि रिलीज प्रक्रिया में एक और बदलाव जुड़ जाता है।

• जिस CSS को केवल ब्राउजर या बिल्ड सिस्टम पढ़ेगा, उसे पहले सुंदर तरीके से फॉर्मेट करके फिर से मिनिफाई न करें।
• इस्तेमाल न किए गए फ्रेमवर्क रूल या डुप्लिकेट डिक्लेरेशन हटाने के विकल्प के रूप में मिनिफिकेशन का इस्तेमाल न करें।
• कैरेक्टर की कमी से रेंडर रोकने वाली रिक्वेस्ट, कैश की समस्याएं या धीमी फॉन्ट लोडिंग का पता चलने की उम्मीद न करें।
• फॉर्मेट की गई मूल फाइल न हटाएं, खासकर तब जब स्पेसिफिसिटी, कैस्केड लेयर या मीडिया क्वेरी को डीबग करना हो।

अगर CSS अपने आप बंडल होती है, तो उसी पाइपलाइन में मिनिफायर इस्तेमाल करें, ताकि हर रिलीज पर एक जैसी सेटिंग लागू हो। संबंधित एसेट को मैन्युअल रूप से डिप्लॉय करते समय, HTML मिनिफायर और JS मिनिफायर उन फाइल प्रकारों पर यही प्रक्रिया लागू कर सकते हैं।

अक्सर पूछे जाने वाले सवाल

क्या CSS मिनिफाई करने से सिलेक्टर की स्पेसिफिसिटी बदल जाती है?

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

क्या CSS कस्टम प्रॉपर्टी को मिनिफाई किया जा सकता है?

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

क्या यह टूल सोर्स मैप बनाता है?

नहीं, नतीजे में कोई सोर्स मैप नहीं दिया जाता। अगर प्रोडक्शन डीबगिंग के लिए कॉम्पैक्ट CSS को वापस Sass, Less या किसी अन्य सोर्स से मैप करना जरूरी है, तो मिनिफाइड फाइल और उसका सोर्स मैप उसी कम्पाइलर या बंडलर में बनाएं जो मूल फाइल की संरचना जानता हो।

क्या आउटपुट में लाइसेंस कमेंट बने रहेंगे?

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

क्या मिनिफिकेशन खराब CSS को ठीक कर सकता है?

नहीं। मिनिफिकेशन गैर-जरूरी कैरेक्टर हटाता है, लेकिन अमान्य सिलेक्टर, सपोर्ट न की गई प्रॉपर्टी, गायब एसेट या गलत कैस्केड को ठीक नहीं करता। पहले मूल CSS में पार्सिंग चेतावनियां और विजुअल गड़बड़ियां ठीक करें।

डिप्लॉयमेंट से पहले क्या जांचें?

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