समरूप विकास के लिए Normalize.css का उपयोग करना

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

इस पोस्ट में मैं कवर करूँगा सामान्यीकरण की मूल बातें और यह सामान्य सीएसएस रीसेट की तुलना कैसे करता है. यह एक जटिल पुस्तकालय नहीं है और इसे समझने में एक दो घंटे से अधिक का समय नहीं लगना चाहिए। लेकिन Normalize की कुंजी सीख रहा है किस तरह इसे ठीक से और विवेकपूर्ण तरीके से लागू करने के लिए.

ब्राउज़र रीसेट बनाम सामान्यीकृत

सालों से मैंने एरिक मेयेर के सीएसएस रीसेट के एक अनुकूलित संस्करण का उपयोग किया है। ये मेरी अधिकांश परियोजनाओं के लिए पर्याप्त हैं और इससे कोई बड़ी समस्या नहीं हुई है। हालाँकि सामान्यीकरण ने मेरे रीसेट के दृश्य को बदल दिया क्योंकि यह एक सीएसएस रीसेट की तुलना में अलग तरह से काम करता है। यह महत्वपूर्ण है कि आप मतभेदों को समझें.

एक के रूप में सामान्य करने के बारे में सोचो परिधान सभी ब्राउज़रों पर लगातार लागू होते हैं, और एक के बारे में सोचो सीएसएस रीसेट एक थर्मोन्यूक्लियर विस्फोट के रूप में सभी ब्राउज़रों में.

शैलियों और प्रारूपों के शीर्षक, पैराग्राफ, ब्लॉकक्वाट्स और सामान्य तत्वों को सामान्य करें ताकि वे समरूप दिखाई देना (या पर्याप्त पास) सभी समर्थित ब्राउज़रों में। सीएसएस रीसेट स्लेट को पूरी तरह से साफ कर देता है ताकि वहाँ रहे हैं कोई चूक नहीं किसी भी चीज के लिए.

एक सीएसएस रीसेट के साथ आपके शीर्षक आपके पैराग्राफ के समान दिख सकते हैं; तत्वों का कोई पैडिंग, मार्जिन या किसी प्रकार का अंतर नहीं है। एक सीएसएस रीसेट के साथ आपको नए कोड की आपूर्ति करनी चाहिए शैली को बढ़ाने के लिए। सामान्यीकृत करने के साथ आपको ए पूर्व-तैयार शैली जिस पर बनाया जा सकता है.

तो क्या इनमें से एक दूसरे से बेहतर है? यह एक गरमागरम बहस का विषय है, हालाँकि तर्क का एक बिंदु यह बताता है कि सामान्यीकृत करें संगतता के लिए बेहतर काम करता है और छोटे फ़ाइल आकार का उत्पादन करता है.

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

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

यदि आप एक सीएसएस रीसेट की कोशिश करना चाहते हैं तो यहां कुछ लोकप्रिय विकल्प हैं:

एरिक मेयेर के निवासी
HTML5 रीसेट करें
HTML5Doctor रीसेट करें

विन्यास को सामान्य करें

सामान्यक निर्माता निकोलस गैलाघेर ने इस कथन के साथ एक परिचयात्मक पोस्ट लिखी:

“Normalize.css एक छोटी सीएसएस फ़ाइल है जो HTML तत्वों के डिफ़ॉल्ट स्टाइल में बेहतर क्रॉस-ब्राउज़र संगति प्रदान करती है। यह एक आधुनिक, HTML5-ready, पारंपरिक CSS रीसेट के लिए वैकल्पिक है.”

वर्षों में यह दुनिया भर में डेवलपर्स द्वारा उपयोग किए जाने वाले एक विश्वसनीय पुस्तकालय में विकसित हुआ है। बूटस्ट्रैप और प्योर सीएसएस में कुछ हद तक सामान्यीकरण का भी उपयोग किया गया है.

किसी प्रोजेक्ट में Normalize का उपयोग करने के दो तरीके हैं: अपनी खुद की Normalize स्टाइलशीट को अनुकूलित करने के लिए स्रोत को संपादित करें, या इसे आधार के रूप में उपयोग करें और शीर्ष पर शैलियों को जोड़ें.

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

वैकल्पिक रूप से कुछ डेवलपर्स में पूरी Normalize.css फ़ाइल शामिल होती है और उसके ऊपर अपनी स्वयं की स्टाइलशीट का निर्माण होता है। पूर्ण सामान्यीकृत स्टाइलशीट कोड की 420+ पंक्तियों को फैलाती है जो ~ 6.8KB असम्पीडित के बराबर होती है.

न तो विधि अन्य की तुलना में बेहतर है और यह प्रत्येक परियोजना के लिए सबसे अच्छा काम करता है, या अपने पसंदीदा वर्कफ़्लो का पालन करने लायक है.

आरंभ करने के लिए या तो GitHub से Normalize की एक प्रति डाउनलोड करें या इसे किसी बाहरी CDN से होस्ट करें। आप एनपीएम से सामान्यीकरण के नवीनतम संस्करण को भी खींच सकते हैं जैसे:

npm स्थापित - save normalize.css

यदि आप कोई भी फाइल डाउनलोड नहीं करना चाहते हैं, तो आप एक नया CodePen प्रोजेक्ट भी बना सकते हैं, जो एक बटन के क्लिक पर नॉर्मलाइज़ कर सकता है.

चूँकि Normalize मॉड्यूलर है, आप अस्थायी रूप से अनुभागों को हटा सकते हैं या यहाँ तक कि Normalize का अपना कस्टम निर्माण भी कर सकते हैं। फिर आप एम्बेडेड प्रोजेक्ट के लिए शैलियों को हटाते हुए प्रत्येक प्रोजेक्ट को HTML5 डिस्प्ले तत्वों जैसे चुनिंदा भागों के साथ शुरू कर सकते हैं.

प्रत्येक सामान्य नियम में एक सीएसएस टिप्पणी होती है जो यह बताती है कि यह क्या करता है और कौन से मुद्दों / बगों को हल करता है। कुछ सेटिंग की तरह स्पष्ट हैं प्रदर्शन क्षेत्र नए HTML5 तत्वों पर.

अन्य इस एसवीजी कोड की तरह कम स्पष्ट हैं जो इंटरनेट एक्सप्लोरर में अतिप्रवाह छुपाता है:

svg: not (: root) overflow: hidden;

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

Normalize.css वेब डिज़ाइन में

Normalize v4.0 का नवीनतम संस्करण व्यापक ब्राउज़र समर्थन प्रदान करता है.

क्रोम (अंतिम दो)
एज (अंतिम दो)
फ़ायरफ़ॉक्स (पिछले दो)
फ़ायरफ़ॉक्स ईएसआर
इंटरनेट एक्सप्लोरर 8+
ओपेरा (अंतिम दो)
सफ़ारी ६+

मैं जो बता सकता हूं, वह सामान्यीकृत फ़ायरफ़ॉक्स जैसे लगातार अपडेट वाले ब्राउज़रों के पुराने संस्करणों का समर्थन कर सकता है। लेकिन वो “आधिकारिक” समर्थन में केवल क्रोम / एज / एफएफ / ओपेरा के दो सबसे हाल के संस्करण शामिल हैं.

इसके अलावा IE6 + और Safari 4+ को Normalize v1 के साथ समर्थित किया गया है, लेकिन वह संस्करण अब अपडेट नहीं किया गया है.

यह महत्वपूर्ण है कि आप Google Analytics जैसे टूल के साथ ब्राउज़र संस्करणों की जाँच करें। यह आपको एक बेहतर विचार देगा कि क्या नॉर्मलाइज आधुनिक वेब डिजाइन कार्य के लिए एक उपयोगी उपकरण हो सकता है.

आगे के संसाधन

विशेष रूप से सामान्य बनाने के बारे में सिखाने के लिए बहुत कुछ नहीं है इसलिए अधिकांश सीखने से होता है.

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

परिचय वीडियो