मुफ़्त CSS सौंदर्यवर्धक

यह कैसे काम करता है

यह टूल एक हाथ से लिखे रिकर्सिव पार्सर का उपयोग करके CSS को फ़ॉर्मेट करता है जो सीधे पेज में बनाया गया है — कोई थर्ड-पार्टी लाइब्रेरी नहीं, कोई सर्वर कॉल नहीं। पार्सर आपके CSS पर कैरेक्टर-दर-कैरेक्टर चलता है, कोट किए स्ट्रिंग, url() वैल्यू, नेस्टेड at-rules, और उन कमेंट्स को सही ढंग से हैंडल करता है जो सरल रेगेक्स-आधारित तरीक़ों को उलझा देते।

1. 1
   कैरेक्टर-स्तरीय टोकनाइज़ेशन

   walkCss फ़ंक्शन रॉ इनपुट को एक समय में एक कैरेक्टर स्कैन करता है, कोट स्टेट और पैरेंथेसिस डेप्थ ट्रैक करता है ताकि url(), स्ट्रिंग वैल्यू, या कमेंट्स के अंदर सेमीकॉलन या ब्रेसेज़ कभी संरचनात्मक डेलिमिटर के लिए ग़लती से न लिए जाएँ।
2. 2
   ब्लॉक और डिक्लेरेशन अलगाव

   जब स्कैनर एक टॉप-लेवल ओपनिंग ब्रेस पाता है, यह प्रीलूड (सिलेक्टर या at-rule कीवर्ड) निकालता है और ब्लॉक बॉडी को रिकर्सिवली प्रोसेस करता है — जिसमें खुद नेस्टेड नियम (@media, @supports, नेटिव CSS नेस्टिंग) हो सकते हैं जो गहरे रिकर्शन डेप्थ पर हैंडल होते हैं।
3. 3
   प्रॉपर्टी सॉर्टिंग और इंडेंटेशन

   हर ब्लॉक के भीतर डिक्लेरेशन एक रन में एकत्र किए जाते हैं, फिर चुनी हुई इंडेंट चौड़ाई (2 या 4 स्पेस) के साथ लिखे जाने से पहले वैकल्पिक रूप से प्रॉपर्टी नाम से वर्णानुक्रम में सॉर्ट किए जाते हैं। Minify मोड व्हाइटस्पेस को पूरी तरह छोड़ देता है और कमेंट्स हटाता है।
4. 4
   तुरंत इन-ब्राउज़र आउटपुट

   टाइप करते ही useMemo hook के ज़रिए परिणाम दिखते हैं — कुछ भी कहीं नहीं भेजा जाता। फ़ॉर्मेटेड या मिनिफ़ाइड CSS क्लिपबोर्ड में कॉपी की जा सकती है या .css फ़ाइल के रूप में डाउनलोड की जा सकती है, और पैनल मूल की तुलना में साइज़ अंतर दिखाता है।

संबंधित टूल