CSS फ़ॉर्मेटर — CSS को ऑनलाइन फ़ॉर्मेट करें

फ़ॉर्मेटर या मिनिफ़ायर कोड में क्या बदलता है?

फ़ॉर्मेटर लेआउट बदलता है — व्हाइटस्पेस, लाइन ब्रेक और इंडेंटेशन — ताकि HTML, CSS या JavaScript एक जैसा पढ़ने में आए, और कुछ फ़ॉर्मेटर वे बारीकियाँ भी एक-सी कर देते हैं जिन्हें भाषा बराबर मानती है, जैसे HTML में टैग नाम का केस या एट्रिब्यूट के कोट; मिनिफ़ायर वह सब हटाता है जिसकी ब्राउज़र को ज़रूरत नहीं — कमेंट, व्हाइटस्पेस, वैकल्पिक सेमीकोलन — और वैल्यू को छोटे बराबर रूप में लिख सकता है, जैसे #ffffff की जगह #fff। दोनों का मक़सद कोड का व्यवहार बदलना नहीं है, फिर भी कमिट करने से पहले diff देखें: कोड का क्रम बदलने वाला विकल्प, जैसे CSS प्रॉपर्टी सॉर्ट करना, यह बदल सकता है कि कौन-सा declaration लागू हो, और छोटे अक्षरों में बदला गया टैग नाम <MyComponent> जैसे केस-संवेदी फ़्रेमवर्क कंपोनेंट को तोड़ देता है।

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 सामान्य कर दिए जाते हैं: at-rule के नाम के बाद, (max-width: 600px) जैसी शर्त के कोलन के बाद, और कॉमा के बाद एक स्पेस।

"Sort properties" क्या करता है?

यह हर नियम के अंदर declaration को प्रॉपर्टी के नाम के वर्णक्रम में लगाता है। custom property (--name) बाक़ी के साथ ही सॉर्ट होती हैं, और एक ही प्रॉपर्टी के दोहराए गए declaration (fallback) अपने मूल क्रम में रहते हैं। जब कोई नियम एक-दूसरे पर असर डालने वाली प्रॉपर्टी सेट करता है, तो सॉर्टिंग नतीजा बदल सकती है: padding-left: 5px; padding: 0 में बाद वाली padding लागू होती है, पर सॉर्ट के बाद वह पहले आ जाती है और बायाँ padding 5px हो जाता है। ऐसे नियम जाँचें, या मूल क्रम बनाए रखने के लिए इसे बंद रखें।

क्या यह url() या calc() वैल्यू तोड़ता है?

नहीं। स्ट्रिंग, url(…) का कंटेंट और calc() एक्सप्रेशन सुरक्षित रहते हैं; सिर्फ़ आसपास का व्हाइटस्पेस सामान्य होता है।

क्या यह अवैध CSS ठीक करेगा?

नहीं। असंतुलित ब्रेस यथासंभव फ़ॉर्मेट होते हैं और चेतावनी दिखती है, पर कुछ हटाया या दोबारा लिखा नहीं जाता।

संदर्भ

HTML Living StandardWHATWGHTML भाषा, नामित कैरेक्टर रेफ़रेंस (एंटिटी) और ब्राउज़रों के पार्सिंग नियमों सहित।
ECMAScript® Language Specification (ECMA-262)Ecma International / TC39JavaScript भाषा का मानक, जिसमें RegExp का व्याकरण और अर्थ, JSON.parse/JSON.stringify और Date ऑब्जेक्ट शामिल हैं।