CSS मिनिफ़ायर — CSS को ऑनलाइन मिनिफ़ाई करें

फ़ॉर्मेटर या मिनिफ़ायर कोड में क्या बदलता है?

फ़ॉर्मेटर लेआउट बदलता है — व्हाइटस्पेस, लाइन ब्रेक और इंडेंटेशन — ताकि HTML, CSS या JavaScript एक जैसा पढ़ने में आए, और कुछ फ़ॉर्मेटर वे बारीकियाँ भी एक-सी कर देते हैं जिन्हें भाषा बराबर मानती है, जैसे HTML में टैग नाम का केस या एट्रिब्यूट के कोट; मिनिफ़ायर वह सब हटाता है जिसकी ब्राउज़र को ज़रूरत नहीं — कमेंट, व्हाइटस्पेस, वैकल्पिक सेमीकोलन — और वैल्यू को छोटे बराबर रूप में लिख सकता है, जैसे #ffffff की जगह #fff। दोनों का मक़सद कोड का व्यवहार बदलना नहीं है, फिर भी कमिट करने से पहले diff देखें: कोड का क्रम बदलने वाला विकल्प, जैसे CSS प्रॉपर्टी सॉर्ट करना, यह बदल सकता है कि कौन-सा declaration लागू हो, और छोटे अक्षरों में बदला गया टैग नाम <MyComponent> जैसे केस-संवेदी फ़्रेमवर्क कंपोनेंट को तोड़ देता है।

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

स्टाइलशीट पेस्ट करें।
वैल्यू ऑप्टिमाइज़ेशन चालू रखें या बंद कर दें।
मिनिफ़ाइड CSS कॉपी या डाउनलोड करें।

CSS मिनिफ़ायर की खूबियाँ

कमेंट, व्हाइटस्पेस, आख़िरी सेमीकोलन और खाली नियम हटाता है
hex रंग छोटे करता है (#ffffff → #fff) और शुरुआती शून्य हटाता है (0.5em → .5em)
calc() के बाहर शून्य लंबाई से यूनिट हटा देता है
स्ट्रिंग, url() का कंटेंट और calc() की स्पेसिंग ज्यों की त्यों रखता है
चाहें तो /*! license */ कमेंट सुरक्षित रखता है
बचे हुए byte बताता है

CSS मिनिफ़ायर का उदाहरण

एक नियम को मिनिफ़ाई करना

इनपुट:

body {
  margin: 0px;
  color: #333333;
  padding: 0.5rem;
}

आउटपुट:

body{margin:0;color:#333;padding:.5rem}

CSS मिनिफ़ायर के बारे में अक्सर पूछे जाने वाले सवाल

कौन-से ऑप्टिमाइज़ेशन लगाए जाते हैं?

व्हाइटस्पेस और कमेंट हटा दिए जाते हैं, हर ब्लॉक का आख़िरी सेमीकोलन हट जाता है, खाली नियम मिटा दिए जाते हैं, छह अंकों के hex रंग जहाँ संभव हो छोटे कर दिए जाते हैं (#ffffff → #fff), शुरुआती शून्य छाँट दिए जाते हैं (0.5em → .5em) और calc() के बाहर शून्य लंबाई अपनी यूनिट खो देती है।

क्या calc() सुरक्षित है?

हाँ। calc() के अंदर + और − के आसपास स्पेस CSS स्पेसिफ़िकेशन के अनुसार ज़रूरी हैं और इसलिए बनाए रखे जाते हैं; फ़ंक्शन के अंदर शून्य की यूनिट भी रखी जाती है (calc(100% - 0px) वैध बना रहता है)।

क्या मैं license कमेंट रख सकता हूँ?

हाँ। /*! से शुरू होने वाले कमेंट डिफ़ॉल्ट रूप से रखे जाते हैं।

क्या यह डुप्लिकेट नियम या shorthand प्रॉपर्टी मर्ज करता है?

नहीं। संरचनात्मक ऑप्टिमाइज़ेशन cascade बदल सकते हैं, इसलिए मिनिफ़ायर जान-बूझकर हर नियम अपनी जगह रहने देता है।

संदर्भ

HTML Living StandardWHATWGHTML भाषा, नामित कैरेक्टर रेफ़रेंस (एंटिटी) और ब्राउज़रों के पार्सिंग नियमों सहित।
ECMAScript® Language Specification (ECMA-262)Ecma International / TC39JavaScript भाषा का मानक, जिसमें RegExp का व्याकरण और अर्थ, JSON.parse/JSON.stringify और Date ऑब्जेक्ट शामिल हैं।