CSS फ़ॉर्मेटर व मिनिफ़ायर

CSS फ़ॉर्मेटर क्या है?#

एक CSS फ़ॉर्मेटर दो ऐसे काम करता है जो विपरीत दिखते हैं पर वही समस्या सुलझाते हैं: यह सिकुड़े हुए, मशीन-जनित CSS को किसी ऐसी चीज़ में फैलाता है जिसे इंसान पढ़ सके, और यह एक फैली हुई स्टाइलशीट को केवल उन बाइट्स तक सिकोड़ता है जो वास्तव में मायने रखते हैं। आप इसका सहारा लेते हैं इसलिए लगभग हमेशा कि CSS आपके काम के लिए ग़लत आकार में आया था — किसी बिल्ड औज़ार ने एक मिनिफाइड पंक्ति डंप की और आपको किसी विशिष्ट नियम का निरीक्षण करना है, या किसी हाथ से लिखी फ़ाइल का गुबार हो गया और आप भेजने से पहले उसे छाँटना चाहते हैं।

यह पेज असली इंजनों के साथ दोनों दिशाएँ संभालता है। फ़ॉर्मेट js-beautify के css_beautify का उपयोग करता है, जो सिलेक्टर्स और डेक्लेरेशन्स को सुनिश्चित रूप से पुनः-इंडेंट करता है। संक्षिप्त CSSO का उपयोग करता है, जो एक वास्तविक संरचनात्मक ऑप्टिमाइज़र है न कि कोई व्हाइटस्पेस स्ट्रिपर: यह समान डेक्लेरेशन्स वाले आसन्न नियमों को मर्ज करता है, लॉन्गहैंड प्रॉपर्टीज़ को शॉर्टहैंड्स में तह करता है, ओवरराइड किए गए डेक्लेरेशन्स हटाता है, और तब जाकर बची हुई व्हाइटस्पेस सिकोड़ता है। नतीजा आमतौर पर किसी साधारण कंपैक्टर द्वारा बनाए गए से छोटा होता है, और इनपुट के सिमेंटिक रूप से समतुल्य होता है। वह भेद मायने रखता है जब आप वायर पर हर बाइट की परवाह करते हैं।

इसका उपयोग कैसे करें#

1. अपना CSS बाईं ओर CSS पैनल में चिपकाएँ। नमूना एक छोटी स्टाइलशीट लोड करता है यदि आप पहले व्यवहार आज़माना चाहते हैं।
2. टूलबार पर कोई इंडेंट चुनें: 2, 4, या टैब। दो स्पेस आम आधुनिक परिपाटी हैं; चार घनी फ़ाइलों को पढ़ने के लिए अधिक मित्रवत है।
3. कोई क्रिया चुनें:
   • फ़ॉर्मेट — js-beautify से पुनः-इंडेंट और लाइन-ब्रेक। सिलेक्टर्स अपनी पंक्ति पर जाते हैं, डेक्लेरेशन्स ब्रेसेस के अंदर संरेखित होते हैं।
   • संक्षिप्त — CSSO का संरचनात्मक ऑप्टिमाइज़ेशन चलाएँ, फिर कॉम्पैक्ट आउटपुट निकालें। कमेंट्स हटाए जाते हैं, डुप्लिकेट नियम मर्ज होते हैं, लॉन्गहैंड्स जहाँ सुरक्षित हो शॉर्टहैंड्स में तह होते हैं।
4. परिणाम आउटपुट पैनल में पढ़ें और उसे लेने के लिए कॉपी का उपयोग करें। साफ़ करें दोनों पैनलों को रीसेट करता है।

यदि आपके इनपुट में कोई असमाप्त नियम या भ्रष्ट डेक्लेरेशन हो, तो स्थिति पट्टी अनुमान लगाने के बजाय त्रुटि रिपोर्ट करती है।

प्रमुख विशेषताएँ#

• फ़ॉर्मेट और संक्षिप्त अलग इंजन हैं। ब्यूटीफ़ाई js-beautify है; संक्षिप्त CSSO है। प्रत्येक वह एक काम करता है जिसमें वह अच्छा है, बजाय एक समझौता किए हुए रूटीन के जो दोनों करने की कोशिश करे।
• संक्षिप्त पर वास्तविक ऑप्टिमाइज़ेशन। CSSO स्टाइलशीट को पुनर्संरचित करता है — .a { color: red } .b { color: red } को एक साझा नियम में मर्ज करना, margin: 0 0 0 0 को margin: 0 तक सिकोड़ना, एक डेक्लेरेशन हटाना जिसे कोई बाद का नियम पहले ही ओवरराइड करता है। व्हाइटस्पेस हटाना अंतिम चरण है, एकमात्र नहीं।
• तीन इंडेंट शैलियाँ। 2 स्पेस, 4 स्पेस, या टैब, एक मेन्यू से बदले जाते हैं।
• साथ-साथ, कॉपी-तैयार। इनपुट संपादन योग्य, आउटपुट केवल-पढ़ने योग्य एक-क्लिक कॉपी बटन के साथ।
• सख्ती से क्लाइंट-साइड। CSSO और js-beautify पेज में बंडल हैं और केवल तब लोड होते हैं जब आप यह औज़ार खोलते हैं। आपकी स्टाइलशीट ब्राउज़र में प्रोसेस होती है और कभी अपलोड नहीं होती।

कार्य उदाहरण#

एक छोटी स्टाइलशीट जहाँ दो नियम काम दोहराते हैं और एक लॉन्गहैंड छोटा हो सकता है:

इनपुट:

.card{padding:10px 10px 10px 10px;margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px}
.card .title{color:#ff0000}
.card .body{color:#ff0000}

2 स्पेस के साथ फ़ॉर्मेट पर क्लिक करें:

.card {
  padding: 10px 10px 10px 10px;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
}

.card .title {
  color: #ff0000;
}

.card .body {
  color: #ff0000;
}

अब दोहराव स्पष्ट है — जिसके लिए फ़ॉर्मेटर होता है। अब उसी इनपुट पर संक्षिप्त पर क्लिक करें और CSSO इसे संरचनात्मक रूप से दोबारा लिखता है:

.card{padding:10px;margin:10px}.card .body,.card .title{color:red}

तीन चीज़ें एक साथ हुईं। चार-वैल्यू padding एक वैल्यू तक सिकुड़ा क्योंकि सभी चार भुजाएँ समान थीं; चार margin-* लॉन्गहैंड्स margin शॉर्टहैंड में तह हो गए; और दो color: #ff0000 नियम एक समूहीकृत सिलेक्टर वाले एकल नियम में मर्ज हो गए (और हेक्स छोटे red में बदल गए)। एक साधारण व्हाइटस्पेस स्ट्रिपर अतिरेक की हर बाइट रखता — केवल एक पुनर्संरचनात्मक ऑप्टिमाइज़र इन जीतों को ढूँढता है।

अक्सर पूछे जाने वाले प्रश्न#

क्या संक्षिप्त मेरे पेज का दिखना बदलेगा?#

नहीं, जब इनपुट वैध CSS हो। CSSO केवल वे रूपांतरण लागू करता है जो कैस्केड सुरक्षित रखते हैं: समान डेक्लेरेशन्स वाले नियमों को मर्ज करना, ऐसे लॉन्गहैंड्स को तह करना जिनके वैल्यूज़ सभी समान हों, ऐसे डेक्लेरेशन्स गिराना जिन्हें कोई अधिक विशिष्ट या बाद का नियम ओवरराइड करता हो। यदि कोई रूपांतरण अस्पष्ट होता तो उसे छोड़ दिया जाता। फ़ॉर्मेट विशुद्ध रूप से कॉस्मेटिक है और कभी अर्थ नहीं बदलता।

क्या संक्षिप्त मेरे कमेंट्स रखता है?#

नहीं। मिनिफ़िकेशन के दौरान कमेंट्स हटाए जाते हैं, जिनमें /* !important */-शैली के बैनर शामिल हैं। यदि आपको किसी लाइसेंस हेडर या बिल्ड मार्कर को बचाना है तो अपनी कमेंटेड स्रोत रखें और मिनिफ़ाई करने के बाद अपने बिल्ड पाइपलाइन में बैनर दोबारा जड़ें।

संक्षिप्त किया गया आउटपुट कभी-कभी मेरे इनपुट से बड़ा क्यों होता है?#

लगभग हमेशा इसलिए कि इनपुट पहले से मिनिफाइड था। CSSO को फिर भी उसे पार्स और दोबारा निकालना पड़ता है, और पहले से कॉम्पैक्ट, पहले से ऑप्टिमाइज़ किए गए इनपुट पर ग्रहण के लिए कुछ नहीं बचता — आउटपुट लगभग उतना ही आकार रहता है। हाथ से लिखी या फैली हुई CSS दें और बचत वास्तविक होती है।

क्या मेरा CSS किसी सर्वर को भेजा जाता है?#

नहीं। दोनों इंजन आपके ब्राउज़र में चलते हैं। लाइब्रेरीज़ माँग पर पेज के अपने बंडल से लोड होती हैं, इसलिए ऐसा कोई नेटवर्क रिक्वेस्ट नहीं है जो आपकी स्टाइलशीट कहीं ले जाए।