CSS फ़ॉर्मेटर कैसे इस्तेमाल करें
- मिनिफ़ाइड या बिखरा CSS पेस्ट करें।
- इंडेंटेशन चुनें और तय करें कि प्रॉपर्टी सॉर्ट करनी हैं या नहीं।
- पढ़ने योग्य स्टाइलशीट कॉपी करें।
CSS फ़ॉर्मेटर की खूबियाँ
- हर declaration अलग लाइन पर, एकसमान इंडेंटेशन के साथ
- selector सूची में हर selector अलग लाइन पर (वैकल्पिक)
- नेस्टेड @media, @supports, @layer और @keyframes ब्लॉक
- कोलन, कॉमा, combinator और !important के आसपास स्पेसिंग सामान्य करता है
- प्रॉपर्टी को वर्णक्रम में सॉर्ट करने का वैकल्पिक विकल्प
- कमेंट, स्ट्रिंग, url() और calc() वैल्यू सुरक्षित रखता है
CSS फ़ॉर्मेटर का उदाहरण
मिनिफ़ाइड CSS को खोलना
इनपुट:
a,a:hover{color:#1266f0;text-decoration:none}@media(max-width:600px){a{display:block}}आउटपुट:
a,
a:hover {
color: #1266f0;
text-decoration: none;
}
@media (max-width: 600px) {
a {
display: block;
}
}CSS फ़ॉर्मेटर के बारे में अक्सर पूछे जाने वाले सवाल
क्या @media, @supports और नेस्टेड at-rule समर्थित हैं?
हाँ। नेस्टेड ब्लॉक हर स्तर पर एक इंडेंट पाते हैं, और at-rule के prelude सामान्य कर दिए जाते हैं (कोलन और कॉमा के बाद स्पेस)।
"Sort properties" क्या करता है?
यह हर नियम के अंदर declaration को वर्णक्रम में लगाता है। custom property (--name) बाक़ी के साथ ही सॉर्ट होती हैं। मूल क्रम बनाए रखने के लिए इसे बंद रखें।
क्या यह url() या calc() वैल्यू तोड़ता है?
नहीं। स्ट्रिंग, url(…) का कंटेंट और calc() एक्सप्रेशन सुरक्षित रहते हैं; सिर्फ़ आसपास का व्हाइटस्पेस सामान्य होता है।
क्या यह अवैध CSS ठीक करेगा?
नहीं। असंतुलित ब्रेस यथासंभव फ़ॉर्मेट होते हैं और चेतावनी दिखती है, पर कुछ हटाया या दोबारा लिखा नहीं जाता।