CSS मिनिफ़ायर

अपनी स्टाइलशीट छोटी करें

CSS रेंडरिंग रोकता है: ब्राउज़र तब तक पेज नहीं दिखाता जब तक वह <head> की स्टाइलशीट डाउनलोड और पार्स न कर ले। इसलिए CSS का साइज़ सीधे तय करता है कि आपका पेज कितनी जल्दी दिखेगा। CSS मिनिफ़ायर कमेंट, व्हाइटस्पेस, लाइन ब्रेक और ऐसे दूसरे अक्षर हटाता है जिनकी ब्राउज़र को ज़रूरत नहीं, और पहले व बाद की अक्षर गिनती दिखाता है।

स्टाइल बिल्कुल वैसे ही काम करती रहती हैं; बस फ़ाइल छोटी हो जाती है। यह WordPress, Shopify या AltumCode थीम के कस्टम CSS, बिना बिल्ड टूल वाले छोटे प्रोजेक्ट और इनलाइन critical CSS के लिए बढ़िया है।

भविष्य में एडिट करने के लिए पढ़ने लायक मूल फ़ाइल रखें, और मिनिफ़ाई की गई कॉपी डिप्लॉय करें।

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

1. अपना CSS पेस्ट करें।
2. मिनिफ़ाई करने के लिए सबमिट करें।
3. पहले और बाद की अक्षर गिनती की तुलना करें।
4. मिनिफ़ाई किया CSS अपनी साइट या फ़ाइल में कॉपी करें।

उदाहरण

बटन स्टाइल

इनपुट:

/* Buttons */
.btn {
  color: #ffffff;
  margin: 0px 0px 10px 0px;
  background-color: #8997BB;
}

.btn:hover {
  opacity: 0.80;
}

आउटपुट:

.btn{color:#fff;margin:0 0 10px;background-color:#8997bb}.btn:hover{opacity:.8}

कमेंट और स्पेस हट गए, #ffffff छोटा होकर #fff बना, 0px बना 0, दोहराया margin मान सिमट गया और 0.80 बना .8।

आम उपयोग

• थीम या CMS सेटिंग पैनल से जोड़ा कस्टम CSS मिनिफ़ाई करना।
• छोटी साइटों और लैंडिंग पेज की स्टाइलशीट छोटी करना।
• तेज़ first paint के लिए इनलाइन critical CSS तैयार करना।
• HTML ईमेल टेम्पलेट में CSS कंप्रेस करना।
• बिना बिल्ड प्रोसेस वाली साइट, जैसे छोटी स्टैटिक साइट या लैंडिंग पेज, की स्टाइलशीट छोटी करना।
• पेज के <head> में इनलाइन करने के लिए critical CSS तैयार करना।
• CMS या वेबसाइट बिल्डर में पेस्ट किए कस्टम CSS का साइज़ घटाना।

सुझाव और ज़रूरी बातें

• पहले बिना इस्तेमाल वाले नियम हटाएँ; CSS हटाना मिनिफ़ाई करने से ज़्यादा बचत करता है।
• जिन कमेंट की ज़रूरत है (जैसे लाइसेंस सूचना) उन्हें सोर्स फ़ाइल में रखें और जाँचें कि वे बचे हैं या नहीं।
• डिप्लॉय करने के बाद पेज टेस्ट करें, खास तौर पर अगर आपके CSS में असामान्य hacks हैं।
• अपना HTML और स्क्रिप्ट भी HTML मिनिफ़ायर और JS मिनिफ़ायर से मिनिफ़ाई करें। रंग मान कलर कन्वर्टर से जाँचें।

खास स्थितियाँ और सीमाएँ

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

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

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

यह स्टाइल के काम करने का तरीका बदले बिना CSS से व्हाइटस्पेस और कमेंट जैसे ग़ैरज़रूरी अक्षर हटाता है।

क्या मिनिफ़ाई किया CSS तेज़ है?

हाँ, छोटी फ़ाइलें तेज़ी से डाउनलोड और पार्स होती हैं, जिससे पेज जल्दी दिखता है।

क्या मैं CSS को वापस अन-मिनिफ़ाई कर सकता हूँ?

आप beautifier से उसे फिर से फ़ॉर्मेट कर सकते हैं, लेकिन हटाए गए कमेंट वापस नहीं आ सकते। अपनी मूल फ़ाइल रखें।

अगर मैं gzip या Brotli इस्तेमाल करता हूँ तो क्या CSS मिनिफ़ाई करना चाहिए?

हाँ। सबसे छोटे ट्रांसफ़र साइज़ के लिए कंप्रेशन और मिनिफ़िकेशन साथ काम करते हैं।

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

नहीं बदलना चाहिए। सिर्फ़ वे अक्षर हटते हैं जिन्हें ब्राउज़र नज़रअंदाज़ करते हैं, और मान #fff जैसे बराबर रूपों में छोटे किए जाते हैं।

संबंधित टूल

• HTML मिनिफ़ायर: सभी ग़ैरज़रूरी अक्षर हटाकर अपना HTML मिनिफ़ाई करें।
• JS मिनिफ़ायर: गैरज़रूरी कैरेक्टर हटाकर अपना JS छोटा करें।
• कलर कन्वर्टर: अपने रंग को कई दूसरे फ़ॉर्मेट में बदलें।
• टेक्स्ट साइज़ कैलकुलेटर: टेक्स्ट का साइज़ बाइट (B), किलोबाइट (KB) या मेगाबाइट (MB) में पाएँ।
• HTTP/2 चेकर: जाँचें कि कोई वेबसाइट नया HTTP/2 प्रोटोकॉल इस्तेमाल कर रही है या नहीं।