आज का वेब ब्राउजर पागल दिनों से लंबा सफर तय कर चुका है जहां किसी भी प्रकार की क्रॉस-ब्राउज़र स्थिरता इच्छापूर्ण सोच थी। आज के वेब ब्राउज़र सभी मानक-अनुरूप हैं। वे अच्छी तरह से एक साथ खेलते हैं और विभिन्न ब्राउज़रों में एक काफी लगातार पेज प्रदर्शन प्रदान करते हैं। इसमें Google क्रोम, माइक्रोसॉफ्ट एज, मोज़िला फ़ायरफ़ॉक्स, ओपेरा, सफारी, और आजकल वेबसाइट तक पहुंचने के लिए इस्तेमाल होने वाले असंख्य मोबाइल उपकरणों पर पाए जाने वाले विभिन्न ब्राउज़रों के नवीनतम संस्करण शामिल हैं।
जबकि वेब ब्राउजर की बात आती है और सीएसएस कैसे प्रदर्शित करते हैं, वहीं प्रगति निश्चित रूप से की जाती है, फिर भी इन विभिन्न सॉफ्टवेयर विकल्पों के बीच असंगतताएं होती हैं। आम विसंगतियों में से एक यह है कि वे ब्राउज़र डिफ़ॉल्ट रूप से मार्जिन, पैडिंग और सीमाओं की गणना कैसे करते हैं।
बॉक्स मॉडल के इन पहलुओं के कारण सभी HTML तत्वों को प्रभावित करते हैं, और क्योंकि वे पृष्ठ लेआउट बनाने में आवश्यक हैं, एक असंगत प्रदर्शन का अर्थ है कि एक पृष्ठ एक ब्राउज़र में बहुत अच्छा लग सकता है, लेकिन दूसरे में थोड़ा सा दिखता है। इस समस्या का मुकाबला करने के लिए, कई वेब डिज़ाइनर बॉक्स मॉडल के इन पहलुओं को सामान्यीकृत करते हैं। इस अभ्यास को मार्जिन, पैडिंग और सीमाओं के मानों को "शून्य आउट" के रूप में भी जाना जाता है।
ब्राउज़र डिफ़ॉल्ट पर एक नोट
वेब ब्राउज़र में सभी के पृष्ठ के कुछ प्रदर्शन पहलुओं के लिए डिफ़ॉल्ट सेटिंग्स होती हैं। उदाहरण के लिए, हाइपरलिंक्स नीले होते हैं और डिफ़ॉल्ट रूप से रेखांकित होते हैं। यह विभिन्न ब्राउज़रों में सुसंगत है, और यद्यपि यह कुछ ऐसा है जो अधिकांश डिजाइनर अपनी विशिष्ट परियोजना की डिजाइन आवश्यकताओं के अनुरूप बदलते हैं, तथ्य यह है कि वे सभी एक ही चूक के साथ शुरू कर रहे हैं, इन बदलावों को आसान बनाना आसान बनाता है। अफसोस की बात है, मार्जिन, पैडिंग और सीमाओं के लिए डिफ़ॉल्ट मान क्रॉस-ब्राउज़र स्थिरता के समान स्तर का आनंद नहीं लेता है।
मार्जिन और पैडिंग के लिए सामान्य मान
असंगत बॉक्स मॉडल की समस्या को हल करने का सबसे अच्छा तरीका है HTML तत्वों के सभी मार्जिन और पैडिंग मान शून्य पर सेट करना। इस सीएसएस नियम को अपनी स्टाइलशीट में जोड़ने के कुछ तरीके हैं जो आप कर सकते हैं:
* {मार्जिन: 0; पैडिंग: 0; }यह सीएसएस नियम * या वाइल्डकार्ड चरित्र का उपयोग करता है। उस चरित्र का अर्थ है "सभी तत्व" और यह मूल रूप से प्रत्येक HTML तत्व का चयन करेगा और मार्जिन और पैडिंग को 0 पर सेट करेगा। भले ही यह नियम बहुत ही विशिष्ट है, क्योंकि यह आपके बाहरी स्टाइलशीट में है, तो डिफ़ॉल्ट ब्राउज़र की तुलना में इसकी उच्च विशिष्टता होगी मूल्य करते हैं। चूंकि वे डिफ़ॉल्ट हैं जो आप ओवरराइट कर रहे हैं, यह एक शैली जो आप कर रहे हैं उसे पूरा कर लेगी।
एक और विकल्प इन मानों को HTML और बॉडी तत्वों पर लागू करना है। चूंकि आपके पृष्ठ पर मौजूद सभी अन्य तत्व इन दो तत्वों के बच्चे होंगे, सीएसएस कैस्केड इन मानों को उन सभी अन्य तत्वों पर लागू करना चाहिए।
एचटीएमएल, बॉडी {मार्जिन: 0; पैडिंग: 0; }यह आपके ब्राउज़र को सभी ब्राउज़रों पर एक ही स्थान पर शुरू करेगा, लेकिन याद रखने की एक बात यह है कि एक बार जब आप सभी मार्जिन और पैडिंग बंद कर देते हैं, तो आपको देखने के लिए अपने वेब पेज के विशिष्ट हिस्सों के लिए उन्हें चुनिंदा रूप से चालू करना होगा और महसूस करें कि आपका डिज़ाइन कॉल करता है।
सीमाओं
आप सोच रहे होंगे "लेकिन डिफ़ॉल्ट रूप से किसी भी ब्राउज़र के शरीर तत्व के चारों ओर सीमा नहीं है"। यह सख्ती से सच नहीं है। इंटरनेट एक्सप्लोरर के पुराने संस्करणों में तत्वों के चारों ओर एक पारदर्शी या अदृश्य सीमा है। जब तक आप सीमा को 0 पर सेट न करें, वह सीमा आपके पृष्ठ लेआउट को गड़बड़ कर सकती है। यदि आपने निर्णय लिया है कि आप IE के इन पुरातन संस्करणों का समर्थन करना जारी रखेंगे, तो आपको अपने शरीर और HTML शैलियों को निम्नलिखित जोड़कर इसे संबोधित करने की आवश्यकता होगी:
एचटीएमएल, बॉडी {
मार्जिन: 0 पीएक्स;
पैडिंग: 0 पीएक्स;
सीमा: 0 पीएक्स;
}
मार्जिन और पैडिंग को बंद करने के समान ही, यह नई शैली डिफ़ॉल्ट सीमाओं को भी बंद कर देगी। आप आलेख में पहले दिखाए गए वाइल्डकार्ड चयनकर्ता का उपयोग करके भी वही काम कर सकते हैं।
जेनिफर क्रिनिन द्वारा मूल लेख। 9/27/16 को जेरेमी गिरार्ड द्वारा संपादित।