बॉक्स मॉडल: इंटरनेट एक्सप्लोरर बनाम W3C


25

आज, इंटरनेट एक्सप्लोरर बॉक्स मॉडल समस्या ज्यादातर एक गैर-मुद्दा है। अधिकांश वेब डेवलपर्स <!DOCTYPE>मानकों के अनुपालन को लागू करने के लिए एक टैग रखते हैं, और कोई भी वास्तव में इंटरनेट एक्सप्लोरर 5.5 का समर्थन करने के बारे में परवाह नहीं करता है।

हालांकि, कुछ डेवलपर्स IE बॉक्स मॉडल की रक्षा में व्यक्तिपरक, वैचारिक तर्क के साथ आए हैं। उन्होंने दावा किया है कि IE बॉक्स मॉडल W3C मॉडल की तुलना में अधिक "सहज" है, क्योंकि W3C मॉडल बॉक्स की सामग्री को मापता है , जबकि IE मॉडल बॉक्स को ही मापता है:

यहाँ छवि विवरण दर्ज करें

मैं उनकी बात देख सकता हूं, लेकिन यह मूल रूप से एक व्यक्तिपरक तर्क है, और सबसे महत्वपूर्ण बात मानकों का अनुपालन है।

हालांकि, हाल ही में मैं गंभीर व्यावहारिक कारणों के लिए IE बॉक्स मॉडल को प्राथमिकता देने आया हूं । W3C बॉक्स मॉडल किसी तत्व को किसी अन्य तत्व की सटीक ऑनस्क्रीन पिक्सेल चौड़ाई में गतिशील रूप से आकार देना मुश्किल बनाता है। कारण यह है कि style.widthकिसी तत्व की संपत्ति तत्व के कुल ऑनस्क्रीन आकार के लिए जिम्मेदार नहीं है: आपको किसी भी अतिरिक्त सीमा और गद्दी को भी ध्यान में रखना होगा। यह एक समस्या नहीं है अगर दोनों तत्व एक ही सीएसएस वर्ग का उपयोग करते हैं - लेकिन अगर उनके पास अलग-अलग सीएसएस कक्षाएं हैं, तो यह अविश्वसनीय रूप से चुनौतीपूर्ण हो सकता है।

मान लीजिए कि हमारे पास दो divs हैं: A और B. A को html में 400px div के रूप में हार्ड-कोड किया गया है, जबकि B को गतिशील रूप से जावास्क्रिप्ट का उपयोग करके बनाया गया है। नेत्रहीन, हम चाहते हैं कि बी ए की सटीक चौड़ाई हो। पुराने IE बॉक्स मॉडल के तहत, यह तुच्छ है। हम बस कहते हैं: B.style.width = A.style.widthया यहां तक ​​कि B.style.width = A.offsetWidth + "px"

लेकिन W3C बॉक्स मॉडल के साथ, यह इतना सरल नहीं है। अब हमें स्टाइल शीट के बारे में भी चिंता करनी होगी। यदि B में A की समान CSS क्लास है, तो हम कह सकते हैं B.style.width = A.style.width। लेकिन अगर यह नहीं है - और हम इसे सौंदर्य कारणों से नहीं चाहते हैं - हम मुसीबत में हैं। अब हमें ए और बी दोनों की सीमा में कुल पिक्सेल को ध्यान में रखना होगा और यह विशेष रूप से मुश्किल हो सकता है यदि सीमा और पैडिंग असंगत इकाइयों में निर्दिष्ट होती है (सीमा के बाद से एक आम घटना अक्सर 1px लाइन होती है, जबकि पैडिंग ईएमएस में निर्दिष्ट किया जा सकता है)। फिर हमें एक सामान्य इकाई (उन्हें px या px to em) में बदलने के अर्ध-असंभव कार्य का सामना करना पड़ता है । यह सब सिर्फ स्क्रीन पर लाइन अप करने के लिए दो divs प्राप्त करने के लिए है।

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

यह सब W3C मॉडल पर IE बॉक्स-मॉडल का पक्ष लेने के लिए एक बहुत शक्तिशाली कारण की तरह लगता है (कम से कम वैचारिक रूप से - व्यवहार में IE बॉक्स-मॉडल मृत है)।

प्रश्न : W3C ने इस बॉक्स मॉडल को क्यों चुना? क्या W3C बॉक्स मॉडल के कुछ फायदे हैं जो मैं बस नहीं देख रहा हूं? या मैं बस यहाँ समस्या अतिरंजित कर रहा हूँ?


3
हालांकि मैं आम तौर पर आईई को अलग करने वाली चीजों को नापसंद करता हूं, यह तर्क काफी दिलचस्प है।
FUZxxl

8
आप वास्तव में बस विफलता को उजागर कर रहे हैं CSS सामान्य रूप से लेआउट का वर्णन करने में है, और हाँ IE वास्तव में एक बेहतर बॉक्स मॉडल था।
रायथल

11
उस स्थिति में जब आप नहीं जानते, अब आप अपनी CSS फ़ाइल में किस बॉक्स मॉडल का उपयोग कर सकते हैं। यदि आप IE बॉक्स मॉडल का उपयोग करना चाहते हैं, तो विशेषता "बॉक्स-आकार" का उपयोग करें और "बॉर्डर-बॉक्स" पर इसका मान सेट करें।
फिशबास्केटगार्डो

जवाबों:


9

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

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

* {
    -mox-box-sizing: border-box;
    box-sizing: border-box;
}

इस विषय पर जेफ कॉफमैन को उद्धृत करने के लिए :

यह देखते हुए कि कल्पना ने इसे दूसरे तरीके से परिभाषित किया है, हालाँकि, इसकी गलत व्याख्या को अपनाने के लिए इसे Microsoft को भेजा गया संकेत वेब के लिए बुरा होगा। Microsoft पहले से ही एक आलिंगन, विस्तार और बुझाने वाले दृष्टिकोण का उपयोग कर रहा था, जहाँ उन्होंने जानबूझकर ऐसे उत्पाद बनाए जो प्रतियोगियों से अलग तरीके से काम करते थे ताकि उपयोगकर्ताओं को Microsoft संस्करणों में लॉक किया जा सके। वे वेब के साथ सफल होने के बहुत करीब आ गए: लगभग 2000 से 2005 तक IE इतना लोकप्रिय था कि कई साइटों को इसके लिए डिज़ाइन किया गया था। IE के दृष्टिकोण को यहां अपनाने के बाद Microsoft को बताया जा सकता है कि "आप IE के साथ जो चाहें कर सकते हैं और हम इसे कानूनी बनाने के लिए मानकों को समायोजित करेंगे"।

इसलिए बॉक्स मॉडल W3C और Microsoft के बीच शक्ति-संघर्ष का शिकार हुआ।


1
मैं एक वैश्विक ओवरराइड से बचूंगा *। मैं इसके स्थान पर चुनिंदा रूप से इसे ओवरराइड करना चाहता हूँ जहाँ यह आवश्यक है।
कोडइन्चोस
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.