Normalize.css और Reset CSS में क्या अंतर है?

Question

मुझे पता है कि CSS Reset क्या है, लेकिन हाल ही में मैंने Normalize.css नामक इस नई चीज़ के बारे में सुना

Normalize.css और Reset CSS में क्या अंतर है ?

CSS को सामान्य करने और CSS को रीसेट करने में क्या अंतर है?

यह सीएसएस रीसेट के लिए सिर्फ एक नया चर्चा शब्द है?

Answer 1

मैं normalize.css पर काम करता हूं।

मुख्य अंतर हैं:

1. Normalize.css सब कुछ "अस्थिर" के बजाय उपयोगी चूक को संरक्षित करता है। उदाहरण के लिए, तत्व जैसे " supया subसिर्फ काम" के बाद normalize.css (और वास्तव में अधिक मजबूत बनाये जाते हैं), जबकि वे रीसेट.css सहित सामान्य पाठ से नेत्रहीन अभेद्य हैं। तो, normalize.css आप पर एक विज़ुअल स्टार्टिंग पॉइंट (समरूपता) नहीं लगाता है। यह हर किसी के स्वाद के लिए नहीं हो सकता है। सबसे अच्छी बात यह है कि दोनों के साथ प्रयोग करें और देखें कि आपकी वरीयताओं के साथ कौन सी जैल है।

2. Normalize.css कुछ सामान्य बग्स को ठीक करता है जो रीसेट के लिए गुंजाइश से बाहर हैं। यह reset.css से एक व्यापक गुंजाइश है, और भी जैसी आम समस्याओं को बग फिक्स प्रदान करता है: एचटीएमएल 5 तत्वों, की कमी के लिए प्रदर्शन सेटिंग्स fontप्रपत्र तत्वों द्वारा विरासत, सही करने font-sizeके लिए प्रतिपादन pre, IE9 में एसवीजी अतिप्रवाह और buttonआईओएस में स्टाइल बग।

3. Normalize.css आपके dev टूल को अव्यवस्थित नहीं करता है। Reset.css का उपयोग करते समय एक सामान्य जलन एक बड़ी विरासत श्रृंखला है जो ब्राउज़र CSS डीबगिंग टूल में प्रदर्शित होती है। लक्षित स्टाइल के कारण यह normalize.css के साथ ऐसा कोई मुद्दा नहीं है।

4. Normalize.css अधिक मॉड्यूलर है। परियोजना अपेक्षाकृत स्वतंत्र खंडों में टूट गई है, जिससे आपके लिए वर्गों को संभावित रूप से निकालना आसान हो गया है (जैसे फॉर्म सामान्यकरण) अगर आपको पता है कि उन्हें आपकी वेबसाइट की कभी आवश्यकता नहीं होगी।

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

मैंने normalize.css के बारे में एक लेख में इसके बारे में अधिक विस्तार से लिखा है

Comments

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

— नेकोलास

और यह कई रीसेट के साथ एक महत्वपूर्ण समस्या है, इस तथ्य सहित कि सब कुछ शून्य करने से भी ब्राउज़र धीमा हो जाता है।

— रोब

और यह भी resets का लाभ है - इस तरह से मुद्दों को आकार देने की यादों को सामान्य बनाने: github.com/yahoo/pure/issues/395

— डैनियल सोकोलोव्स्की

क्या मुझे वह बात याद आती है जब मुझे लगता है कि, हाँ, आम तौर पर आप नहीं चाहते कि पैडिंग और मार्जिन शून्य हो लेकिन, नहीं, आप डिफ़ॉल्ट भी नहीं चाहते हैं?

— 15

व्यक्तिगत रूप से मैं सामान्य हो गया हूं, हालांकि मैं अभी भी इसका उपयोग करता हूं। यहाँ बहुत सारे अंक वास्तव में ओवरब्लो (बेहतर प्रलेखन ...?) हैं। सामान्यीकृत किया जाता है, इसलिए यह आप पर एक विज़ुअल शुरुआती बिंदु थोपता है (इसके बावजूद कि यह उत्तर क्या कहता है)। यह पुराना भी हो सकता है। Reset.css आपके द्वारा उपयोग किए जाने के बाद कभी भी पुराना नहीं हो सकता। और आप यह सोच सकते हैं कि आपके द्वारा विकसित किए जा रहे किसी भी अन्य नंबर की तुलना में मार्जिन और पैडिंग 0 होना चाहिए, इसलिए जब आप विकास कर रहे हों, तो यह सब कुछ रीसेट करने में सहायक होता है। ब्राउज़र के मुद्दों के लिए सामान्यीकरण अच्छा है, हालांकि, और इसका मुख्य कारण मैं इसका उपयोग करता हूं।

— चक ले बट

Answer 2

प्रमुख अंतर यह है कि:

• CSS रीसेट का उद्देश्य सभी निर्मित ब्राउज़र स्टाइल को हटाना है। H1-6, p, strong, em, et cetera जैसे मानक तत्व बिल्कुल एक जैसे दिखते हैं, जिनकी कोई सजावट नहीं है। फिर आप स्वयं सभी सजावट जोड़ना चाहते हैं ।

• सामान्यीकृत सीएसएस का उद्देश्य अंतर्निहित ब्राउज़र स्टाइल को ब्राउज़र में सुसंगत बनाना है। H1-6 जैसे तत्व ब्राउज़रों में एक सुसंगत तरीके से बोल्ड, बड़ा एट cetera दिखाई देंगे। फिर आपको अपने डिज़ाइन की ज़रूरतों को पूरा करने के लिए केवल अंतर जोड़ना चाहिए ।

यदि आपका डिज़ाइन a) टाइपोग्राफी एट सीटेरा के लिए सामान्य सम्मेलनों का अनुसरण करता है, और b) Normalize.css आपके लक्षित दर्शकों के लिए काम करता है, तो CSS रीसेट के बजाय Normalize.CSS का उपयोग करने से आपका खुद का CSS छोटा और लिखने में तेज़ हो जाएगा।

Comments

@ जितेंद्र व्यास: - वास्तव में केवल एक ही तरीका है: अच्छी तरह से टिप्पणी की गई Normalize.CSS कोड पढ़ें, और तय करें कि यह आपकी आवश्यकताओं के लिए एक अच्छा फिट है या नहीं। github.com/necolas/normalize.css/blob/master/normalize.css

— जेस्पर एम

एक अन्य नोट: Normalize.css का उद्देश्य जितना संभव हो उतना विनीत होना है, जो एक डेवलपर को विशिष्टता संघर्षों से लड़ने के बिना अपने कोड को आसान लिखने की अनुमति देता है।

— zzzzBov

तो हम कहते हैं कि जब मैं विकास करना चाहता हूँ रीसेट का उपयोग करें। और एक बार जब मैं normalize.css या कुछ JS चाहता हूं जो उन सभी चीजों को लेता है जो मैंने नहीं बदले हैं और ब्राउज़र में समान हैं। या मैंने बदल दिया है और बदलने के बाद वे ब्राउज़र में समान हो गए हैं और ग्राहक पक्ष के लिए उन्हें हटा दें। इसलिए रिसेट उस क्लाइंट प्रोग्राम को तेजी से क्लाइंट साइड में विकसित करने में मदद करेगा। दोनों खुश। और जीने का बहुत होशियार तरीका।

— मुहम्मद उमेर

व्यवहार में आप वैसे भी सामान्यीकृत शैलियों के सभी को अधिलेखित कर देंगे। सिद्धांत महान है, लेकिन इस OOCSS दुनिया में यह कभी भी व्यवहार में नहीं आता है।

— चक ले बट

Answer 3

Normalize.css मुख्य रूप से शैलियों का एक सेट है, जो इसके लेखक के विचार के आधार पर अच्छा लगेगा, और यह ब्राउज़रों के अनुरूप दिखाई देगा। मूल रूप से तत्वों से स्टाइल स्ट्रिप्स को रीसेट करें ताकि आपके पास हर चीज की स्टाइलिंग पर अधिक नियंत्रण हो।

मैं दोनों का उपयोग करता हूं।

कुछ शैलियों को रीसेट से, कुछ को normalize.css से। उदाहरण के लिए, Normalize.css से, यह सुनिश्चित करने के लिए एक शैली है कि सभी इनपुट तत्वों में एक ही फ़ॉन्ट है, जो घटित नहीं होता है (पाठ इनपुट और टेक्स्टारस के बीच)। रीसेट की कोई ऐसी शैली नहीं है, इसलिए इनपुट में अलग-अलग फ़ॉन्ट हैं, जो सामान्य रूप से नहीं चाहते हैं।

इसलिए, दो सीएसएस फ़ाइलों का उपयोग करके आधारभूत रूप से, सब कुछ 'समान' करने का बेहतर काम करता है ;;

सादर!

Comments

यह एक अच्छा, व्यावहारिक जवाब है। यह एक या दूसरे जरूरी नहीं है। प्रत्येक से आप जो चाहते हैं वह लें। मुझे एक पूर्ण रीसेट पसंद है, लेकिन नॉर्मलाइज़र कुछ अच्छे बिट्स और टुकड़े प्रदान करता है जो अच्छी तरह से काम करते हैं।

— २१:०१

@ricmetalster, तो क्या आपको reset.css और normalize.css से कार्यात्मकताओं को संयोजित करने के लिए अपने स्वयं के सीएसएस को फिर से लिखना पड़ा?

— ayjay

यदि आप दोनों का उपयोग करना चाहते हैं, तो क्या आप "रीसेट" को पहले "सामान्यीकृत" कर सकते हैं और फिर अपनी शैलियों को शीर्ष पर जोड़ सकते हैं?

— क्रेग

मैं "इसे खत्म नहीं करता हूं" दृष्टिकोण और दोनों का उपयोग करता हूं और उन्हें अपने SASS आयात @import '_normalize' && '_reset' में शामिल करता हूं

— killscreen

Answer 4

पहला reset.cssसबसे खराब पुस्तकालय है जिसका आप उपयोग कर सकते हैं, क्योंकि यह HTML की मानक संरचना को हटा देता है और आपके द्वारा लिखी गई हर चीज को प्रदर्शित करता है, मार्जिन पैडिंग और अन्य विशेषताओं के मान निर्दिष्ट करने के बाद 0। इसलिए उदाहरण के लिए आप पाएंगे कि <H1>, जैसा होगा वैसा ही होगा <H6>।

दूसरी ओर Normalize.cssमानक संरचना का उपयोग करता है और इसमें मौजूद लगभग सभी त्रुटियों को भी ठीक करता है। उदाहरण के लिए यह एक ब्राउज़र से दूसरे में एक फॉर्म दिखाने के साथ समस्या को ठीक करता है। इस फीचर्स को संशोधित करके सामान्यीकृत करें ताकि आपके तत्व सभी ब्राउज़रों पर समान दिखाई दें।

Comments

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

— देबज्योति घोष

रीसेट का एक मुख्य उद्देश्य उन मुद्दों पर मुकाबला करना है जो ब्राउज़र लागू शैलियों से बढ़ते हैं जो बहुत उपयोगी है। मुझे भी लगता है कि इसे पुस्तकालय नहीं माना जाना चाहिए।

— आइजैक पाक

@gdebojyoti कुछ उपयोग के मामले हैं, लेकिन मैं बहुत कम ही चाहता हूं कि मेरे सभी शीर्षक समान आकार के हों, चाहे उनकी संबंधित शैलियाँ कुछ भी हों।

— जेम्स बेनिंजर

Answer 5

वैसे इसके वर्णन से ऐसा प्रतीत होता है कि यह उपयोगकर्ता के डिफ़ॉल्ट स्टाइल को सभी ब्राउज़रों के अनुरूप बनाने के बजाय सभी डिफ़ॉल्ट स्टाइल को एक रीसेट के रूप में अलग करने की कोशिश करता है।

कई सीएसएस रीसेट के विपरीत , उपयोगी डिफॉल्ट को संरक्षित करता है।

Comments

तो रीसेट पर सामान्यीकृत सीएसएस का उपयोग करना बेहतर है?

— जितेन्द्र व्यास

@ जितेंद्र व्यास - नहीं। उपकरण अलग-अलग होते हैं, बेहतर या बदतर नहीं तो एक-दूसरे। वह चुनें जो आपको उन समस्याओं को हल करने में मदद करता है जो आपके पास सबसे अच्छी हैं।

— क्वेंटिन

मैं बहस करने के लिए कि सामान्य होता है रीसेट करने की तुलना में बेहतर। यह कम सीएसएस तार में स्थानांतरित किया जा सकता है, यूए चूक का बेहतर उपयोग, और तत्वों को प्रदर्शित करने के लिए कैसे किया जाता है की एक बेहतर समझ है ।

— रयान किनल

Answer 6

रीसेट करना कस्टम डिज़ाइन विनिर्देशों को पूरा करने के लिए एक आवश्यकता लगती है, विशेष रूप से जटिल, गैर-बॉयलरप्लेट प्रकार डिजाइन परियोजनाओं पर। ऐसा लगता है कि सामान्य रूप से विशुद्ध रूप से वेब प्रोग्रामिंग को ध्यान में रखते हुए आगे बढ़ना एक अच्छा तरीका है, लेकिन अक्सर वेबसाइटें वेब प्रोग्रामिंग और यूआई / यूएक्स डिजाइन नियमों के बीच एक विवाह होती हैं।

Comments

यह उपयोग के मामलों के 99% से अधिक है।

— माइकल

@ मिचेल कौन सा? रीसेट या सामान्य करें? (बस इस विषय पर लोगों के मन को समझने की कोशिश कर रहे हैं)

— ब्रेन

@ दोनों रीसेट और सामान्य करें। प्रत्येक तत्व के लिए डिफ़ॉल्ट सीएसएस मूल्यों को जानना एक अच्छा फ्रंट एंड डेवलपर होने का हिस्सा है। मैं उन्हें क्रूर ताकतों के रूप में देखता हूं जो अनावश्यक हैं।

— माइकल

@ मिकेल> Knowing the default CSS values for each element is part of being a good front end developer- यह कहने के लिए कि आप एक प्रोग्रामिंग भाषा के बजाय इलेक्ट्रॉनों के साथ काम करेंगे, क्योंकि यह वही है जो एक अच्छा डेवलपर बनाता है। उपकरणों का कुशलता से उपयोग करना किसी को एक अच्छा डेवलपर बनाता है, दूसरा रास्ता आमतौर पर समय बर्बाद करने वाले जोल की श्रेणी में आता है

— nicholaswmin

Answer 7

कभी-कभी, सबसे अच्छा समाधान दोनों का उपयोग करना है। कभी-कभी, इसका न तो उपयोग करना है। और कभी-कभी, यह एक या दूसरे का उपयोग करना है। यदि आप चाहते हैं कि सभी शैलियों, सभी ब्राउज़रों में मार्जिन और पैडिंग रीसेट सहित, रीसेट का उपयोग करें। फिर सभी सजावट और स्टाइलिंग खुद को लागू करें। यदि आप बिल्ट-इन स्टाइलिंग को पसंद करते हैं, लेकिन अधिक क्रॉस-ब्राउज़र सिंक्रोनाइज़ेशन चाहते हैं यानी सामान्यीकरण तो normalize.css का उपयोग करें। लेकिन यदि आप reset.css और normalize.css दोनों का उपयोग करना चुनते हैं, तो पहले reset.css स्टाइलशीट को लिंक करें और फिर normalize.css स्टाइलशीट (तुरंत) बाद में। कभी-कभी यह हमेशा एक बात नहीं होती है कि कौन सा बेहतर है, लेकिन दोनों का उपयोग कब करना है और कब दोनों का उपयोग करना है। IMHO।

Answer 8

इस सवाल का जवाब पहले ही कई बार दिया जा चुका है, मैं उनमें से प्रत्येक के लिए संक्षिप्त सारांश, सितंबर 2019 तक एक उदाहरण और अंतर्दृष्टि:

• Normalize.css - जैसा कि नाम से पता चलता है, यह अपने उपयोगकर्ता एजेंटों के लिए ब्राउज़रों में शैलियों को सामान्य करता है, अर्थात सभी ब्राउज़रों के बीच समान रूप से होने के कारण डिफ़ॉल्ट रूप से वे भिन्न होते हैं।

उदाहरण : डिफ़ॉल्ट रूप से Google Chrome के <h1>अंदर टैग टैग <section>के "अपेक्षित" आकार से छोटा होगा <h1>। दूसरी ओर Microsoft एज "अपेक्षित" आकार बना रहा है<h1> टैग । Normalize.css इसे सुसंगत बनाएगा।

वर्तमान स्थिति : npm रिपॉजिटरी से पता चलता है कि normalize.css पैकेज में वर्तमान में प्रति सप्ताह 500k से अधिक डाउनलोड हैं। रिपॉजिटरी के प्रोजेक्ट में गिटहब सितारे 36k से अधिक हैं।

• सीसेट को रीसेट करें - जैसा कि नाम से पता चलता है, यह सभी शैलियों को रीसेट करता है , अर्थात यह सभी ब्राउज़र के उपयोगकर्ता एजेंट शैलियों को हटा देता है।

उदाहरण : यह नीचे ऐसा कुछ करेगा:

html, body, div, span, ..., audio, video {  
   margin: 0;  
   padding: 0;  
   border: 0;  
   font-size: 100%;  
   font: inherit;  
   vertical-align: baseline; 
}

वर्तमान स्थिति : यह Normalize.css की तुलना में बहुत कम लोकप्रिय है, रीसेट-सीएसएस पैकेज दिखाता है कि यह प्रति सप्ताह 26k डाउनलोड के आसपास कुछ है। गिटहब सितारे केवल 200 हैं, क्योंकि इसे परियोजना के भंडार से देखा जा सकता है ।