मुख्य सामग्रीमा जानुहोस्
LibraTool logoLibraTool

निःशुल्क CSS मिनिफायर र ब्युटिफायर

फाइल साइज घटाउन CSS मिनिफाई गर्नुहोस् वा पठनीयताका लागि मिनिफाई गरिएको CSS beautify गर्नुहोस्। तत्काल, तपाईंको ब्राउजरमा।

लोड भएपछि अफलाइन काम गर्छ
वा तल .css फाइल छाड्नुहोस्

यहाँ .css फाइल छाड्नुहोस्, वा छान्न क्लिक गर्नुहोस्

CSS · तपाईंको उपकरणमा प्रशोधन गरियो

वा क्लिपबोर्डबाट टाँस्न Ctrl+V थिच्नुहोस्

फाइलहरू ब्राउज गर्नुहोस्
इनपुट CSS
आउटपुट CSS
आउटपुट यहाँ देखिनेछ…

सामान्य प्रयोगहरू

  • उत्पादन स्थापनको लागि CSS छोटो गर्नुहोस्उत्पादनमा स्थापन गर्नु अघि CSS फाइल आकार घटाउनुहोस् — तीव्र पृष्ठ लोड र कम ब्याण्डविथ लागत।
  • डिबगिङको लागि छोटो गरिएको CSS सुन्दर गर्नुहोस्संकुचित वा छोटो गरिएको CSS लाई पठनीय कोडमा ढाँचा गर्नुहोस् ताकि तपाई शैली निरीक्षण र डिबग गर्न सक्नु हुन्छ।
  • इमेल टेम्प्लेटहरूको लागि CSS छोटो गर्नुहोस्HTML इमेल टेम्प्लेटहरूको लागि CSS संकुचित गर्नुहोस् जहाँ फाइल आकार र इनलाइन शैली फुलाइ महत्वपूर्ण छ।
  • WordPress विषयहरूको लागि CSS छोटो गर्नुहोस्राम्रो PageSpeed स्कोरहरूको लागि कस्टम WordPress थीम स्टाइलशीटहरूको आकार घटाउनुहोस्।
  • कोड समीक्षाको लागि CSS सुन्दर गर्नुहोस्कुनै पनी CSS फाइललाई सफा, इन्डेन्ट गरिएको, पठनीय कोडमा ढाँचा गर्नुहोस् समीक्षा र सहयोगको लागि तयार।

यो कसरी काम गर्छ

यो उपकरणले पूर्ण रूपमा JavaScript मा बनेको हातले लेखिएको, शून्य-निर्भरता CSS टोकनाइजर प्रयोग गर्छ — कुनै बाह्य लाइब्रेरी छैन, कुनै सर्भर कल छैन। टोकनाइजरले कुनै पनि ट्रान्सफर्मेसन लागू गर्नुअघि हरेक क्यारेक्टरलाई कोड, कमेन्ट, कोट गरिएको स्ट्रिङ, वा url() मानको रूपमा वर्गीकृत गर्छ, जसले खाली-ठाउँ नियमहरूलाई स्ट्रिङ सामग्री, डेटा URI, वा calc() एक्सप्रेसन बिगार्नबाट रोक्छ।

  1. 1
    टोकनाइजेसन पास
    इनपुट CSS क्यारेक्टर-दर-क्यारेक्टर स्क्यान गरिन्छ र टाइप गरिएका टोकनहरूमा विभाजन गरिन्छ: कच्चा कोड खण्ड, /* ... */ कमेन्ट, कोट गरिएका स्ट्रिङ (एस्केप अनुक्रम सुरक्षित राख्दै), र url(...) ब्लकहरू। यसले सुनिश्चित गर्छ कि अर्को चरणमा ट्रान्सफर्मेसनले केवल वास्तविक CSS सिन्ट्याक्स मात्र छुन्छ — कहिल्यै स्ट्रिङ लिटरल वा डेटा URI को सामग्री होइन।
  2. 2
    Minification वा सुन्दरीकरण
    Minify मोडमा, नियमित कमेन्टहरू हटाइन्छन् (/*! license */ कमेन्टहरू राखिन्छन्), कोड टोकनहरूमा खाली-ठाउँका दौडहरू एकल स्पेसमा संकुचित हुन्छन्, र { } : ; , > ~ वरिपरिको विराम-चिन्ह-नजिकको खाली ठाउँ हटाइन्छ। calc() एक्सप्रेसन बिग्रनबाट बच्न + र - वरिपरिको स्पेस जानाजानी छोडिन्छ। Beautify मोडमा, कोड पहिले सफा आधाररेखामा minify गरिन्छ, त्यसपछि property: value कोलनलाई a:hover जस्ता सेलेक्टर कोलनबाट छुट्याउन दुई-स्पेस गहिराइ ट्र्याकिङ र घोषणा-कोलन पत्ता लगाइसहित पुनः-टोकनाइज र पुनः-इन्डेन्ट गरिन्छ।
  3. 3
    Gzip साइज अनुमान
    आउटपुट उत्पादन गरेपछि, ब्राउजरको नेटिभ CompressionStream API नतिजालाई gzip सँग कम्प्रेस गर्न र परिणामी बाइट गणना मापन गर्न प्रयोग गरिन्छ। यसले gzip कम्प्रेसनसहितको वेब सर्भरले नेटवर्कमा पठाउने कुरासँग मेल खाने वास्तविक ट्रान्सफर-साइज अनुमान दिन्छ।
  4. 4
    प्रतिलिपि गर्नुहोस् वा डाउनलोड गर्नुहोस्
    प्रशोधन गरिएको CSS Clipboard API मार्फत क्लिपबोर्डमा लेखिन्छ, वा MIME प्रकार text/css सँगको Blob प्रयोग गरी styles.min.css (minify मोड) वा styles.css (beautify मोड) को रूपमा डाउनलोड गरिन्छ। तपाईंले टाइप गर्दा साइज घटाइ प्रतिशत प्रत्यक्ष देखाइन्छ।

सम्बन्धित उपकरणहरू

✨

SVG अप्टिमाइजर र मिनिफायर

SVG फाइल साइज नाटकीय रूपमा घटाउन मेटाडेटा हटाउनुहोस्, whitespace संकुचित गर्नुहोस्, र दशमलव गोलाकार गर्नुहोस् — सामान्यतः ३०-७०% कटौती। भिजुअल प्रिभ्यूले केही नभाँचिएको प्रमाणित गर्छ।

प्रयास गर्नुहोस्फाइलहरू स्थानीय रहन्छन्
🎨

CSS ब्युटिफायर

मिनिफाइ गरिएको CSS लाई एकनासको इन्डेन्टेसनसहित पढ्न मिल्ने बनाउनुहोस्, वा मिनिफाइ गर्नुहोस्। अनुमान गर्न सकिने diff का लागि प्रोपर्टी वर्णानुक्रममा मिलाउने विकल्प।

प्रयास गर्नुहोस्
📋

JSON ढाँचा

JSON डेटा ढाँचा, प्रमाणीकरण, न्यूनीकरण र अन्वेषण गर्नुहोस्। रूख दृश्य, वाक्य रचना हाइलाइटिङ, र एक-क्लिक प्रतिलिपि।

प्रयास गर्नुहोस्

बारम्बार सोधिने प्रश्नहरू