CSS Minifier

प्रोडक्शन के लिए CSS को तुरंत छोटा करें

मूल CSS

विकल्प

मिनिफाइड CSS

संबंधित टूल्स

CSS Beautifierगड़बड़ CSS को तुरंत फ़ॉर्मेट और इंडेंट करेंCSS ब्यूटीफ़ायर & मिनिफ़ायरCSS कोड को फॉर्मेट, ऑप्टिमाइज़ और मिनिफाई करेंJavaScript Minifierप्रोडक्शन के लिए JavaScript को तुरंत छोटा करेंHTML ब्यूटिफ़ायर/मिनिफ़ायरHTML फ़ॉर्मेट या मिनिफ़ाई करें
अवलोकन

CSS Minifier आपकी स्टाइलशीट से टिप्पणियों को हटाता है और व्हाइटस्पेस को संक्षिप्त करता है ताकि प्रोडक्शन के लिए फ़ाइल आकार कम हो सके — छोटे डाउनलोड, तेज़ पार्सिंग और रेंडरिंग। पठनीय CSS पेस्ट करें और लाइव पहले/बाद आकार तुलना और समायोज्य कम्प्रेशन स्तर के साथ तुरंत कॉम्पैक्ट आउटपुट प्राप्त करें।

यह Minifier क्या नियंत्रित करता है
  • •व्हाइटस्पेस संक्षेपण: उद्धरण और टिप्पणी को पहचानने वाला minifier स्ट्रिंग सामग्री को अछूता छोड़ते हुए स्पेस, लाइन ब्रेक, और खाली लाइनें हटाता है
  • •टिप्पणी हटाना: /* ... */ टिप्पणियों को हटाएं, या उन्हें रखें — उदाहरण के लिए लाइसेंस हेडर के लिए — टिप्पणी-संरक्षण टॉगल के माध्यम से
  • •रंग अनुकूलन: जहां चैनल अनुमति दें, 6-अंकीय hex रंगों और rgb() मानों को 3-अंकीय hex शॉर्टहैंड में छोटा करना
  • •कम्प्रेशन स्तर: Normal मोड सुरक्षित व्हाइटस्पेस, टिप्पणी, और रंग minification करता है; Aggressive मोड अनावश्यक अग्रणी शून्य भी हटाता है (0.5px → .5px) और शून्य-मान लंबाई से अंक हटाता है (0px → 0)
  • •आकार तुलना: मूल आकार, मिनिफाइड आकार, और प्रतिशत कमी को साथ-साथ देखें
  • •डाउनलोड करने योग्य आउटपुट: मिनिफाइड परिणाम को सीधे .css फ़ाइल के रूप में सहेजें
आप CSS को कब Minify करेंगे
  • •पेज लोड समय कम करने के लिए प्रोडक्शन में डिप्लॉय करने से पहले स्टाइलशीट को छोटा करना
  • •बिना फुलाए <style> टैग या HTML ईमेल में इनलाइन एम्बेड करने के लिए एक छोटा CSS स्निपेट तैयार करना
  • •पूर्ण PostCSS या बिल्ड पाइपलाइन सेट करने से पहले यह जल्दी जांचना कि स्टाइलशीट कितनी छोटी होगी
  • •CodePen, gist, या स्टैटिक प्रोटोटाइप के लिए एक बार की स्टाइलशीट को मिनिफाई करना जहां बिल्ड स्टेप व्यावहारिक नहीं है
  • •Core Web Vitals या Lighthouse ऑडिट के लिए प्रदर्शन बजट के मुकाबले मिनिफाइड आकार की तुलना करना
CSS को कैसे Minify करें
  1. 1.अपना CSS इनपुट एडिटर में पेस्ट करें, या .css फ़ाइल अपलोड करें
  2. 2.Normal या Aggressive कम्प्रेशन चुनें, और तय करें कि टिप्पणियों को रखना है या नहीं
  3. 3.मिनिफाइड आउटपुट और आकार-कमी प्रतिशत स्वचालित रूप से दिखाई देते हैं
  4. 4.आउटपुट कॉपी करें या इसे .css फ़ाइल के रूप में डाउनलोड करें
  5. 5.डिप्लॉय करने से पहले आकार बचत की पुष्टि के लिए पहले/बाद बाइट काउंट जांचें
जानने योग्य किनारे के मामले
  • •आक्रामक शून्य-निष्कासन (0px → 0) लंबाई इकाइयों के लिए सुरक्षित है, लेकिन यह स्ट्रिंग और टिप्पणी सामग्री को छोड़ देता है और calc() एक्सप्रेशन के भीतर गणित को अछूता छोड़ देता है
  • •उद्धृत स्ट्रिंग्स के भीतर व्हाइटस्पेस — font-family नाम, content: "...", url() पथ — हमेशा ठीक उसी रूप में संरक्षित रहता है; केवल स्ट्रिंग्स और टिप्पणियों के बाहर संरचनात्मक व्हाइटस्पेस हटाया जाता है
  • •यह minifier क्लास नामों का नाम नहीं बदलता, डुप्लिकेट सेलेक्टर्स को मर्ज नहीं करता, या अप्रयुक्त नियमों को नहीं हटाता — इसके लिए cssnano या PurgeCSS जैसे बिल्ड-टूल-इंटीग्रेटेड ऑप्टिमाइज़र की आवश्यकता होती है
सीमाएँ
  • •यह व्हाइटस्पेस, टिप्पणी, और रंग minification है, पूर्ण ऑप्टिमाइज़ेशन नहीं — अधिकतम आकार कमी (सेलेक्टर मर्जिंग, डुप्लिकेट-नियम हटाना, अप्रयुक्त-CSS उन्मूलन) के लिए, cssnano या PurgeCSS जैसे बिल्ड-टूल-इंटीग्रेटेड minifier का उपयोग करें
  • •मिनिफाइड आउटपुट सारी पठनीयता खो देता है — हमेशा अपने मूल सोर्स को वर्जन कंट्रोल के तहत रखें
  • •बहुत बड़ी स्टाइलशीट ब्राउज़र में पूरी तरह से प्रोसेस करने में धीमी हो सकती हैं — प्रोडक्शन बिल्ड पाइपलाइनों के लिए, एकबारगी ब्राउज़र टूल के बजाय अपने PostCSS या बंडलर में minification को एकीकृत करें
दूसरी दिशा में जाना है?

यदि आपके पास मिनिफाइड या कंप्रेस्ड CSS है और उसे पढ़ने या डिबग करने की आवश्यकता है, तो इसके बजाय CSS Beautifier का उपयोग करें। यह इंडेंटेशन, क्रमबद्ध प्रॉपर्टीज़, और सुसंगत स्पेसिंग को पुनर्स्थापित करता है ताकि स्टाइलशीट वास्तव में पठनीय हो।