निःशुल्क CSS ब्युटिफायर
मिनिफाइ गरिएको CSS लाई एकनासको इन्डेन्टेसनसहित पढ्न मिल्ने बनाउनुहोस्, वा मिनिफाइ गर्नुहोस्। अनुमान गर्न सकिने diff का लागि प्रोपर्टी वर्णानुक्रममा मिलाउने विकल्प।
फाइल यहाँ छोड्नुहोस्, वा ब्राउज गर्न क्लिक गर्नुहोस्
CSS · तपाईंको उपकरणमा प्रशोधन गरियो
वा क्लिपबोर्डबाट टाँस्न Ctrl+V थिच्नुहोस्
आउटपुट यहाँ देखिनेछ…सामान्य प्रयोगहरू
- उत्पादन CSS अनुगमन गर्नुहोस्पढ्न योग्य ढाँचामा उत्पादन साइटबाट मिनीफाइड CSS हेर्नुहोस् शैली खोज्न र उल्टो इन्जिनियर गर्न।
- टीम CSS शैली प्रवर्तन गर्नुहोस्टीम-जमा गरिएको CSS लाई सुसंगत सुन्दरकरणको माध्यमबाट चलाउनुहोस् यसले तपाइंको diffs कन्टेन्ट बारे छन्, ढाँचा नहीं।
- विक्रेता-उपसर्गित CSS फर्म्याट गर्नुहोस्विक्रेता-उपसर्गित CSS (autoprefixer आउटपुट) अक्सर ढेर -webkit-, -moz-, -ms- भिन्नता हुन्छ। निरीक्षणको लागी फर्म्याट गर्नुहोस्।
- Pro CSS बाट सिक्नुहोस्प्रसिद्ध डिजाइन प्रणाली बाट CSS अध्ययन गर्नुहोस् तिनीहरूको संकलित आउटपुट फर्म्याट गरी।
- बग रिपोर्टको लागी CSS फर्म्याट गर्नुहोस्CSS बग फाइल गर्दा, ढाँचित CSS समीक्षकहरुको लागी पढ्न र बुझ्न धेर सजिलो छ।
यो कसरी काम गर्छ
यो उपकरणले पृष्ठमै सीधै बनेको हातले लेखिएको रिकर्सिभ पार्सर प्रयोग गरी CSS फर्म्याट गर्छ — कुनै तेस्रो-पक्ष लाइब्रेरी छैन, कुनै सर्भर कल छैन। पार्सरले तपाईंको CSS मा क्यारेक्टर-दर-क्यारेक्टर हिँड्छ, कोट गरिएका स्ट्रिङ, url() मान, नेस्टेड at-rule, र सरल रेगेक्स-आधारित तरिकालाई भ्रमित पार्ने कमेन्टहरू सही रूपमा ह्यान्डल गर्दै।
- 1क्यारेक्टर-स्तर टोकनाइजेसनwalkCss फङ्सनले कच्चा इनपुटलाई एकपटकमा एउटा क्यारेक्टर स्क्यान गर्छ, कोट स्टेट र कोष्ठक गहिराइ ट्र्याक गर्दै ताकि url(), स्ट्रिङ मान, वा कमेन्टहरूभित्रका सेमीकोलन वा ब्रेसहरू कहिल्यै संरचनात्मक छुट्याउनेको रूपमा गलत नबुझिऊन्।
- 2ब्लक र घोषणा छुट्याइस्क्यानरले माथिल्लो-स्तरको खोल्ने ब्रेस भेट्टाउँदा, यसले प्रिल्युड (सेलेक्टर वा at-rule किवर्ड) निकाल्छ र ब्लक बडी रिकर्सिभ रूपमा प्रशोधन गर्छ — जसमा आफैं नेस्टेड नियमहरू (@media, @supports, नेटिभ CSS नेस्टिङ) एउटा गहिरो रिकर्सन गहिराइमा ह्यान्डल गरिएर हुन सक्छन्।
- 3प्रोपर्टी क्रमबद्धता र इन्डेन्टेसनहरेक ब्लकभित्रका घोषणाहरू एउटा रनमा सङ्कलन गरिन्छन्, त्यसपछि छानिएको इन्डेन्ट चौडाइ (2 वा 4 स्पेस) सँग लेख्नुअघि वैकल्पिक रूपमा प्रोपर्टी नामअनुसार वर्णानुक्रममा क्रमबद्ध गरिन्छन्। Minify मोडले खाली ठाउँ पूर्ण रूपमा छोड्छ र कमेन्टहरू हटाउँछ।
- 4तुरुन्त ब्राउजर-भित्रको आउटपुटनतिजाहरू तपाईंले टाइप गर्दा useMemo हुकमार्फत देखिन्छन् — केही पनि कतै पठाइँदैन। फर्म्याट गरिएको वा minify गरिएको CSS क्लिपबोर्डमा प्रतिलिपि गर्न वा .css फाइलको रूपमा डाउनलोड गर्न सकिन्छ, र प्यानलले मूलसँग तुलना गरी साइज फरक देखाउँछ।
सम्बन्धित उपकरणहरू
HTML ब्युटिफायर र मिनिफायर
उचित नेस्टिङ इन्डेन्टेसनका साथ HTML pretty-print वा minify गर्नुहोस्। <pre>, <script>, <style> ब्लकभित्रको सामग्री संरक्षण गर्छ।
SQL फर्म्याटर र ब्युटिफायर
उचित इन्डेन्टेसन, कन्फिगर योग्य कीवर्ड केस, र प्रमुख clause मा लाइन ब्रेकका साथ SQL queries सुन्दर प्रिन्ट गर्नुहोस्। जुनसुकै SQL dialect सँग काम गर्छ।
CSS मिनिफायर र ब्युटिफायर
फाइल साइज घटाउन CSS मिनिफाई गर्नुहोस् वा पठनीयताका लागि मिनिफाई गरिएको CSS beautify गर्नुहोस्। तत्काल, तपाईंको ब्राउजरमा।