इस्तेमाल करने का तरीका
- इनपुट बॉक्स में CSS पेस्ट करें, एक .css फ़ाइल खोलें, या उदाहरण आज़माएँ।
- पठनीय कोड के लिए Beautify चुनें या सबसे छोटे आउटपुट के लिए Minify चुनें।
- Beautify करते समय 2 spaces, 4 spaces या tabs चुनें।
- परिणाम कॉपी करें या .css फ़ाइल के रूप में डाउनलोड करें। यदि braces या quotes असंतुलित हैं, तो त्रुटि लाइन और कॉलम दिखाती है।
यह कैसे काम करता है
फ़ॉर्मेटर पहले स्टाइलशीट को टोकन में बांटता है: सिंगल या डबल कोट्स में स्ट्रिंग, url(…) मान, टिप्पणियाँ, ब्रेस और सेमीकोलन। चूँकि स्ट्रिंग और url() एकल टोकन होते हैं, इसलिए डेटा URI के अंदर का सेमीकोलन या content: "{ }" के अंदर का ब्रेस संरचना को भ्रमित नहीं करता, और उनकी सामग्री ज्यों की त्यों कॉपी होती है।
Beautify सेलेक्टर सूची के हर सेलेक्टर को अलग पंक्ति पर रखता है, चाइल्ड, सिबलिंग और एडजेसेंट कॉम्बिनेटर (>, ~, +) के चारों ओर स्पेस जोड़ता है, और हर घोषणा को उसकी अपनी पंक्ति में “property: value;” के रूप में लिखता है। @media, @supports, @layer, @container और नेटिव CSS नेस्टिंग के अंदर के ब्लॉक हर गहराई पर एक स्तर इंडेंट होते हैं। ब्लॉक की अंतिम घोषणा के बाद छूटा सेमीकोलन जोड़ दिया जाता है। टिप्पणियाँ जहाँ हैं वहीं रखी जाती हैं।
Minify टिप्पणियाँ हटा देता है (सिवाय /*! … */ लाइसेंस नोटिस के), व्हाइटस्पेस सिकोड़ता है, ब्रेस, कोलन, सेमीकोलन, कॉमा और सेलेक्टर कॉम्बिनेटर के आस-पास के स्पेस हटाता है, और हर समापन ब्रेस से पहले का सेमीकोलन गिरा देता है। जो स्पेस अर्थ बदलते हैं उन्हें रखा जाता है: “.a .b” में डिसेंडेंट कॉम्बिनेटर, “a :focus” में स्पेस, और calc(100% - 2px) जैसे मानों के अंदर के स्पेस। “! important” को “!important” में सामान्य कर दिया जाता है।
यह टूल मानों को दोबारा नहीं लिखता: रंग, इकाइयाँ और शून्य जैसे लिखे गए हैं वैसे ही छोड़े जाते हैं, और नियमों को मिलाया या पुनः क्रमबद्ध नहीं किया जाता। सामान्य नेस्टिंग वाली SCSS या Less फ़ाइलें आमतौर पर चल जाती हैं, लेकिन उनका अपना सिंटैक्स जैसे // लाइन टिप्पणियाँ या मिक्सिन समझा नहीं जाता।
उदाहरण
मिनिफ़ाइड फ्रेमवर्क फ़ाइल पढ़ना
एक पंक्ति वाला bootstrap.min.css अंश पेस्ट करें और 2 स्पेस के साथ Beautify चुनें ताकि हर नियम, मीडिया क्वेरीज़ और उनके नेस्टेड नियम अलग-अलग, इंडेंटेड पंक्तियों में दिखें।
हाथ से लिखी स्टाइलशीट शिप करना
किसी ईमेल टेम्पलेट या पेज हेड में इनलाइन जोड़ने से पहले टिप्पणियों और इंडेंटेशन वाली 12 KB स्टाइलशीट को Minify करें। सारांश पहले और बाद की अक्षर संख्या दिखाता है।
गायब ब्रेस ढूँढना
एक स्टाइलशीट बीच में ही लागू होना बंद कर देती है। फ़ॉर्मेटर “This { is never closed with a matching }” रिपोर्ट करता है और उस नियम की पंक्ति बताता है जिसका समापन ब्रेस गायब है।
अक्सर पूछे जाने वाले सवाल
क्या इस टूल से minified CSS प्रोडक्शन में उपयोग के लिए सुरक्षित है?
यह केवल वे comments और whitespace हटाता है जिन्हें CSS अनदेखा करता है, इसलिए नियमों का व्यवहार समान रहता है। यह build tools जैसे गहरे optimisations नहीं करता, जैसे नियमों को मर्ज करना या रंगों को छोटा करना, इसलिए परिणाम उनकी तुलना में थोड़ा बड़ा हो सकता है।
“a :focus” में स्पेस क्यों रखा जाता है?
सिलेक्टर में स्पेस descendant combinator होता है। “a :focus” का अर्थ है लिंक के अंदर फ़ोकस किया गया एलिमेंट, जबकि “a:focus” का अर्थ है फ़ोकस किया गया लिंक। उस स्पेस को हटाने से मेल खाने वाले एलिमेंट बदल जाएँगे।
क्या यह SCSS या Less को फ़ॉर्मेट कर सकता है?
सामान्य nested rules सही फ़ॉर्मेट होती हैं। प्रीप्रोसेसर-विशिष्ट syntax जैसे // comments, arguments वाले mixins या @if blocks समझ में नहीं आते और अजीब फ़ॉर्मेट हो सकते हैं, इसलिए परिणाम जाँच लें।
क्या minify करते समय लाइसेंस टिप्पणियाँ हटा दी जाती हैं?
/*! से शुरू होने वाली टिप्पणियाँ रखी जाती हैं, जो लाइसेंस और कॉपीराइट नोटिस के लिए सामान्य परिपाटी है। बाकी सभी टिप्पणियाँ हटा दी जाती हैं।
गोपनीयता
आपका CSS केवल आपके ब्राउज़र में संसाधित होता है। कुछ भी अपलोड, संग्रहीत या एनालिटिक्स में शामिल नहीं किया जाता।