मोफत CSS ब्युटिफायर

हे कसे कार्य करते

हे साधन पेजमध्ये थेट बांधलेल्या गराज-लिहिलेल्या recursive पार्सरचा वापर करून CSS फॉरमॅट करते — थर्ड-पार्टी लायब्ररी, सर्व्हर कॉल नाही. पार्सर तुमच्या CSS मधून अक्षरशः जातो, quoted strings, url() मूल्ये, nested at-rules, आणि सोप्या regex-आधारित पद्धतींना गोंधळात टाकणाऱ्या comments यांना योग्यरित्या हाताळत.

1. 1
   acc

   walkCss फंक्शन कच्चा इनपुट एका वेळी एक अक्षर स्कॅन करतो, quote state आणि कंस खोली ट्रॅक करत त्यामुळे url(), string मूल्ये, किंवा comments मधील semicolons किंवा braces कधीही structural delimiters समजले जात नाहीत.
2. 2
   Block आणि declaration विभाजन

   स्कॅनरला top-level opening brace सापडल्यावर, तो prelude (selector किंवा at-rule keyword) काढतो आणि block body recursively प्रक्रिया करतो — ज्यात स्वतः nested rules (@media, @supports, native CSS nesting) असू शकतात, अधिक खोल recursion depth वर हाताळले जातात.
3. 3
   Property क्रमवारी आणि इंडेंटेशन

   प्रत्येक block मधील declarations एका run मध्ये गोळा केल्या जातात, नंतर निवडलेल्या इंडेंट रुंदीने (2 किंवा 4 जागा) लिहिण्यापूर्वी पर्यायाने property नावाने वर्णक्रमानुसार लावल्या जातात. Minify मोड whitespace पूर्णपणे वगळतो आणि comments काढतो.
4. 4
   तात्काळ in-browser आउटपुट

   तुम्ही टाइप करताच useMemo hook द्वारे निकाल दिसतात — काहीही कुठेही पाठवले जात नाही. फॉरमॅट केलेला किंवा minified CSS clipboard वर कॉपी करता येतो किंवा .css फाइल म्हणून डाउनलोड करता येतो, आणि panel मूळाशी तुलना करून आकारातील फरक दाखवतो.

संबंधित साधने