CSS Beautifier
गड़बड़ CSS को तुरंत फ़ॉर्मेट और इंडेंट करें
मूल CSS
विकल्प
सुशोभित CSS
अवलोकन
CSS Beautifier मिनिफाइड, कंप्रेस्ड, या असंगत इंडेंटेशन वाली स्टाइलशीट को साफ़, पठनीय CSS में पुनः प्रारूपित करता है — सुसंगत इंडेंटेशन, क्रमबद्ध प्रॉपर्टीज़, और नियमों के बीच स्पष्ट स्पेसिंग — ताकि आप वास्तव में इसे पढ़, समीक्षा, और संपादित कर सकें। कहीं से भी मिनिफाइड स्टाइलशीट, बंडल की गई CSS फ़ाइल, या गड़बड़ हाथ से लिखी CSS पेस्ट करें, और तुरंत फ़ॉर्मेट किया गया आउटपुट प्राप्त करें।
यह Beautifier क्या नियंत्रित करता है
- •इंडेंटेशन: 2 स्पेस, 4 स्पेस, या टैब, वास्तविक js-beautify फ़ॉर्मेटिंग इंजन के माध्यम से लागू
- •प्रॉपर्टी सॉर्टिंग: सुसंगत, स्कैन करने में आसान शैली के लिए प्रत्येक नियम ब्लॉक के भीतर घोषणाओं को वर्णानुक्रम में व्यवस्थित करना
- •मीडिया क्वेरी सॉर्टिंग: ब्रेकपॉइंट के अनुसार टॉप-लेवल @media ब्लॉक को क्रमबद्ध करना, min-width के लिए आरोही और max-width के लिए अवरोही
- •नियम स्पेसिंग: दृश्य पृथक्करण के लिए नियमों के बीच एक खाली लाइन जोड़ना, या आउटपुट को कॉम्पैक्ट रखना
- •टिप्पणी संरक्षण: फ़ॉर्मेटिंग के दौरान /* ... */ टिप्पणियों को रखें या हटाएं
- •रंग सामान्यीकरण: जहां चैनल अनुमति दें, 6-अंकीय hex रंगों और rgb() मानों को 3-अंकीय hex शॉर्टहैंड में छोटा करना
आप CSS को कब Beautify करेंगे
- •ब्राउज़र DevTools में लेआउट समस्या को डिबग करने के लिए मिनिफाइड प्रोडक्शन स्टाइलशीट पढ़ना
- •चैट मैसेज, PDF, या ईमेल से पेस्ट की गई CSS को पुनः प्रारूपित करना जिसने अपनी मूल इंडेंटेशन खो दी
- •कोड रिव्यू से पहले प्रॉपर्टी ऑर्डर और इंडेंटेशन को मानकीकृत करना
- •CSS-in-JS बिल्ड या प्रीप्रोसेसर आउटपुट से बनी बंडल की गई स्टाइलशीट को ऑडिट करने लायक पठनीय बनाना
- •कमिट करने से पहले किसी डिज़ाइन टूल से एक्सपोर्ट की गई CSS को साफ़ करना
CSS को कैसे Beautify करें
- 1.अपना CSS इनपुट एडिटर में पेस्ट करें, या .css फ़ाइल अपलोड करें
- 2.इंडेंटेशन चुनें — 2 स्पेस, 4 स्पेस, या टैब
- 3.आवश्यकता अनुसार टिप्पणी संरक्षण, प्रॉपर्टी सॉर्टिंग, मीडिया क्वेरी सॉर्टिंग, नियम स्पेसिंग, और रंग सामान्यीकरण चालू करें
- 4.फ़ॉर्मेट किया गया आउटपुट आपके टाइप करते ही स्वचालित रूप से दिखाई देता है
- 5.आउटपुट कॉपी करें या इसे .css फ़ाइल के रूप में डाउनलोड करें
जानने योग्य किनारे के मामले
- •प्रॉपर्टीज़ को वर्णानुक्रम में क्रमबद्ध करने से margin और margin-top जैसी तार्किक रूप से संबंधित घोषणाएं अलग हो सकती हैं — इसे सख्त शैली नियम के रूप में अपनाने से पहले क्रमबद्ध आउटपुट की समीक्षा करें
- •वेंडर-प्रीफ़िक्स्ड प्रॉपर्टीज़ (-webkit-, -moz-) अपने बिना-प्रीफ़िक्स समकक्षों के साथ क्रमबद्ध होती हैं, जो प्रीफ़िक्स्ड फ़ॉलबैक को मानक प्रॉपर्टी के बाद रख सकती हैं
- •ब्रेस चेकर टाइप करते समय बेमेल { और } को फ़्लैग करता है, लेकिन यह एक अनुमानी स्कैन है, पूर्ण CSS पार्सर नहीं — यह हर प्रकार के अमान्य सिंटैक्स को नहीं पकड़ सकता
सीमाएँ
- •यह एक फ़ॉर्मेटिंग टूल है, लिंटर नहीं — यह अमान्य प्रॉपर्टी नामों, ब्राउज़र-संगतता अंतराल, या सेलेक्टर-विशिष्टता संघर्षों को नहीं पकड़ेगा
- •अत्यधिक बड़ी स्टाइलशीट (मल्टी-MB बंडल) ब्राउज़र में beautify करने में धीमी हो सकती हैं — बड़े पैमाने पर कोडबेस फ़ॉर्मेटिंग के लिए बिल्ड-टूल-इंटीग्रेटेड फ़ॉर्मेटर (Prettier, Stylelint --fix) बेहतर उपयुक्त है
- •टीम भर में सुसंगत CSS शैली प्रवर्तन के लिए, आपके एडिटर/CI में एकीकृत Stylelint या Prettier जैसा एक समर्पित टूल तदर्थ ब्राउज़र फ़ॉर्मेटिंग से अधिक उपयुक्त है
दूसरी दिशा में जाना है?
यदि आपके पास पठनीय CSS है और उत्पादन के लिए इसे छोटा करने की आवश्यकता है — फ़ाइल आकार और पेज लोड समय कम करना — तो इसके बजाय CSS Minifier का उपयोग करें। यह व्हाइटस्पेस को संक्षिप्त करता है, रंगों को छोटा करता है, और अधिकतम कम्प्रेशन के लिए अनावश्यक शून्य हटा सकता है।