CSS Academy · पाठ

Autoprefixer और cssnano

Autoprefixer से विक्रेता प्रीफ़िक्स अपने-आप जोड़ें और cssnano से CSS आउटपुट को छोटा करें।

पाठ 2, कुल 4 में से13 चरण

Autoprefixer और cssnano, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 2वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

Autoprefixer क्या है

Autoprefixer एक PostCSS प्लगइन है जो आपके द्वारा समर्थित ब्राउज़रों के आधार पर CSS गुणों में वेंडर उपसर्ग (-webkit-, -moz-, -ms-) स्वतः जोड़ता है। इसके लिए Can I Use के डेटा का उपयोग किया जाता है।

Autoprefixer कैसे काम करता है

आप बिना उपसर्गों के मानक CSS लिखते हैं। Autoprefixer आपकी Browserslist कॉन्फ़िगरेशन पढ़ता है और बिल्ड प्रक्रिया के दौरान आपके लक्षित ब्राउज़रों के लिए आवश्यक उपसर्ग जोड़ता है।

<div class="flex">Flexbox row (display: flex — Autoprefixer would add -webkit-box/-ms-flexbox for older targets)</div>

Browserslist कॉन्फ़िगरेशन

Autoprefixer लक्षित ब्राउज़र निर्धारित करने के लिए Browserslist का उपयोग करता है। इसे .browserslistrc या package.json में परिभाषित करें:

# .browserslistrc
> 1%
last 2 versions
not dead

आधुनिक CSS को कुछ ही उपसर्गों की आवश्यकता होती है

2024 तक, अधिकांश आधुनिक CSS (Grid, Flexbox, कस्टम प्रॉपर्टीज़ और रूपांतरणों) को किसी उपसर्ग या बहुत कम उपसर्गों की आवश्यकता होती है। Autoprefixer विशेष रूप से appearance, user-select और नए API जैसे अत्याधुनिक गुणों के लिए उपयोगी है।

PostCSS में Autoprefixer जोड़ना

अपने PostCSS कॉन्फ़िगरेशन में autoprefixer शामिल करें:

// postcss.config.js
const autoprefixer = require('autoprefixer');

module.exports = {
  plugins: [autoprefixer]
};

cssnano क्या है

cssnano एक PostCSS प्लगइन है जो रिक्त स्थान, टिप्पणियाँ और अनावश्यक घोषणाएँ हटाकर तथा सुरक्षित अनुकूलन लागू करके CSS को लघु करता है — इससे सबसे छोटी संभव CSS फ़ाइल बनती है।

cssnano प्रीसेट

cssnano अनुकूलन प्रीसेट प्रदान करता है:

default: सुरक्षित लघुकरण (रिक्त स्थान, टिप्पणियाँ और डुप्लिकेट हटाना)
advanced: आक्रामक अनुकूलन, जो विशिष्टता बदल सकते हैं (सावधानी से उपयोग करें)

// postcss.config.js
const cssnano = require('cssnano');

module.exports = {
  plugins: [
    cssnano({ preset: 'default' })
  ]
};

cssnano क्या करता है

cssnano के अनुकूलनों में शामिल हैं:

रिक्त स्थान और टिप्पणियाँ हटाना
रंगों को सबसे छोटे रूप में बदलना (#ffffff → #fff)
समान नियमों को मिलाना
अनावश्यक गुण हटाना
शून्य मानों को छोटा करना (0px → 0)

कॉन्फ़िगरेशन में दोनों को मिलाना

दोनों प्लगइन्स वाला प्रोडक्शन PostCSS कॉन्फ़िगरेशन:

module.exports = {
  plugins: [
    require('autoprefixer'),
    process.env.NODE_ENV === 'production' && require('cssnano')({ preset: 'default' })
  ].filter(Boolean)
};

लघुकरण के साथ स्रोत मानचित्र

डेवलपमेंट बिल्ड में cssnano का उपयोग करते समय हमेशा स्रोत मानचित्र बनाएँ। वे डीबगिंग के लिए लघुकृत परिणाम को स्रोत CSS से जोड़ते हैं, ताकि DevTools में जाँच आसान हो।

cssnano के विकल्प

अन्य CSS लघुकारकों में शामिल हैं: clean-css, lightningcss (बहुत तेज़ Rust-आधारित) और बिल्ड उपकरणों में अंतर्निहित लघुकारक, जैसे Vite का आंतरिक CSS लघुकारक (जो esbuild का उपयोग करता है)।

त्वरित जाँच

Autoprefixer आपके CSS में कौन से वेंडर उपसर्ग जोड़ेगा, यह किससे निर्धारित होता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावलोकन

Autoprefixer आपकी Browserslist के लक्षित ब्राउज़रों के आधार पर वेंडर उपसर्ग स्वतः जोड़ता है, इसलिए उपसर्गों को मैन्युअल रूप से लिखने की आवश्यकता नहीं रहती। cssnano रिक्त स्थान और टिप्पणियाँ हटाकर तथा सुरक्षित अनुकूलन लागू करके CSS को लघु करता है। प्रोडक्शन PostCSS प्रसंस्करण-प्रवाह में दोनों का उपयोग करें। आधुनिक CSS को पहले की तुलना में कम उपसर्गों की आवश्यकता होती है — अपने वास्तविक ब्राउज़र लक्ष्यों से इसकी जाँच करें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ CSS सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

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

क्या “Autoprefixer और cssnano” पाठ निःशुल्क है?

हाँ—“Autoprefixer और cssnano” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Autoprefixer और cssnano” में मैं क्या सीखूँगा?

Autoprefixer से विक्रेता प्रीफ़िक्स अपने-आप जोड़ें और cssnano से CSS आउटपुट को छोटा करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 2वाँ पाठ है।

“Autoprefixer और cssnano” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

PostCSS क्या करता है और कैसे काम करता है
Autoprefixer और cssnano
कस्टम PostCSS प्लगइन
Vite और Webpack में PostCSS

← CSS Academy पर वापस जाएँ