CSS Minifier - CSS कोड को ऑनलाइन मिनिफाई करें

      
body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: purple;
    background-color: #d8da3d
}

ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em
}

h1 {
    font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif
}
      
    

मिनिफिकेशन क्या है?

मिनिफिकेशन आपके वेब पेजों और स्क्रिप्ट फ़ाइलों में कोड और मार्कअप को न्यूनतम करने की प्रक्रिया है। यह वेबसाइटों पर लोड समय और बैंडविड्थ उपयोग को कम करने के लिए उपयोग की जाने वाली मुख्य विधियों में से एक है। मिनिफिकेशन साइट की गति और पहुंच में नाटकीय रूप से सुधार करता है, जो सीधे एक बेहतर उपयोगकर्ता अनुभव में परिवर्तित होता है। यह उन उपयोगकर्ताओं के लिए भी फायदेमंद है जो सीमित डेटा प्लान के माध्यम से आपकी वेबसाइट का उपयोग कर रहे हैं और वेब सर्फिंग करते समय अपने बैंडविड्थ उपयोग को बचाना चाहते हैं।

CSS को मिनिफाई क्यों करें?

CSS बनाते समय डेवलपर्स आमतौर पर कोड और मार्कअप को अपने लिए पढ़ने योग्य बनाने के लिए स्पेसिंग, टिप्पणियाँ और अच्छे नाम वाले वेरिएबल्स का उपयोग करते हैं। यह उन अन्य लोगों की भी मदद करता है जो बाद में एसेट्स पर काम कर सकते हैं। जबकि यह विकास चरण में एक प्लस है, यह आपके पृष्ठों की सेवा करते समय एक नकारात्मक बन जाता है। वेब सर्वर और ब्राउज़र बिना टिप्पणियों और अच्छी तरह से संरचित कोड के फ़ाइल सामग्री को पार्स कर सकते हैं, जो दोनों अतिरिक्त नेटवर्क ट्रैफ़िक बनाते हैं बिना किसी कार्यात्मक लाभ के।

CSS फ़ाइलों को मिनिफाई करने के लिए, टिप्पणियाँ और अतिरिक्त स्पेस को हटाना आवश्यक है, साथ ही वेरिएबल नामों को संपीड़ित करना ताकि कोड को न्यूनतम किया जा सके और फ़ाइल आकार को कम किया जा सके। मिनिफाइड फ़ाइल संस्करण समान कार्यक्षमता प्रदान करता है जबकि नेटवर्क अनुरोधों की बैंडविड्थ को कम करता है।

उदाहरण

मिनिफाई करने से पहले

      
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
      
    

मिनिफाई करने के बाद

      
nav ul{margin:0;padding:0;list-style:none;}nav li{display:inline-block;}nav a{display:block;padding:6px 12px;text-decoration:none;}