सीएसएस बॉक्स मॉडल: Difference between revisions

From Vigyanwiki
No edit summary
 
(One intermediate revision by one other user not shown)
Line 123: Line 123:


{{W3C Standards}}
{{W3C Standards}}
[[Category: वेब विकास]] [[Category: सीएसएस ढांचे]] [[Category: व्यापक शैली पत्रक]]


 
[[Category:Collapse templates]]
 
[[Category: Machine Translated Page]]
[[Category:Created On 16/06/2023]]
[[Category:Created On 16/06/2023]]
[[Category:Vigyan Ready]]
[[Category:Lua-based templates]]
[[Category:Machine Translated Page]]
[[Category:Navigational boxes| ]]
[[Category:Navigational boxes without horizontal lists]]
[[Category:Pages with script errors]]
[[Category:Sidebars with styles needing conversion]]
[[Category:Template documentation pages|Documentation/doc]]
[[Category:Templates Vigyan Ready]]
[[Category:Templates generating microformats]]
[[Category:Templates that add a tracking category]]
[[Category:Templates that are not mobile friendly]]
[[Category:Templates that generate short descriptions]]
[[Category:Templates using TemplateData]]
[[Category:Wikipedia metatemplates]]
[[Category:वेब विकास]]
[[Category:व्यापक शैली पत्रक]]
[[Category:सीएसएस ढांचे]]

Latest revision as of 09:36, 16 July 2023

Box Model
CSS Box Model Module Level 3
Boxmodell-detail.png
The CSS box model
Native name
CSS Box Model Module Level 3
StatusW3C Candidate Recommendation Snapshot
Latest versionLevel 3
December 22, 2020 (2020-12-22)[1]
OrganizationWorld Wide Web Consortium
CommitteeCSS Working Group
Editors
  • Elika J. Etemad[1]
  • Bert Bos[2]
  • Anton Prowse[2]
Base standardsCSS
DomainCSS
Websitewww.w3.org/TR/css-box-3/
Cascading Style Sheets
Concepts
Philosophies
Tools
Comparisons

वेब विकास में, सी.एस.एस बॉक्स मॉडल से तात्पर्य है कि एच.टी.एम.एल तत्वों को ब्राउज़र इंजन में कैसे प्रतिरूपित किया जाता है और उन एच.टी.एम.एल तत्वों के आयाम सी.एस.एस गुणों से कैसे प्राप्त होते हैं। यह एच.टी.एम.एल वेबपेजों की रचना के लिए एक मौलिक अवधारणा है।[3] बॉक्स मॉडल के दिशानिर्देशों का वर्णन वेब मानकों विश्वव्यापी वेब संकाय | वर्ल्ड वाइड वेब कंसोर्टियम (W3C) विशेष रूप से सी.एस.एस कार्यरत समूह द्वारा किया गया है। 1990 के दशक के अंत और 2000 के दशक के प्रारंभ में मुख्यधारा के ब्राउज़रों में बॉक्स मॉडल के गैर-मानक अनुरूप कार्यान्वयन हुए थे। 1998 में सी.एस.एस_2 के आगमन के साथ, जिसने box-sizing संपत्ति का प्रारम्भ किया, समस्या ज्यादातर हल हो गई थी।

विशिष्टता

कैस्केडिंग स्टाइल शीट्स (सीएसएस) विनिर्देश बताता है कि ग्राफिकल ब्राउज़रों द्वारा वेब पृष्ठों के तत्वों को कैसे प्रदर्शित किया जाता है। सी.एस.एस1 विनिर्देश का खंड 4 एक "स्वरूपण मॉडल" को परिभाषित करता है जो ब्लॉक-स्तरीय तत्व देता है - जैसे p और blockquote—एक चौड़ाई और ऊंचाई, और इसके आसपास के तीन स्तर के बॉक्स: विस्तारण, बॉर्डर और मार्जिन।[4] जबकि विनिर्देश शब्द "बॉक्स मॉडल" का स्पष्ट रूप से उपयोग नहीं करता है, यह शब्द वेब विकासकर्ता और वेब ब्राउज़र विक्रेताओं द्वारा व्यापक रूप से उपयोग किया जाता है।

सभी एच.टी.एम.एल तत्वों को "बॉक्स" माना जा सकता है, इसमें div उपनाम, p उपनाम, या a उपनाम समिलित हैं। उनमें से प्रत्येक बॉक्स में पाँच परिवर्तनीय आयाम हैं:

  • height और width बॉक्स की वास्तविक सामग्री (पाठ, चित्र, ...) के आयामों का वर्णन करते है।
  • padding इस सामग्री और बॉक्स की सीमा के बीच की जगह का वर्णन करता है।
  • border बॉक्स के चारों ओर किसी भी प्रकार की रेखा (ठोस, बिंदीदार, धराशायी ...), यदि मौजूद हो, है।
  • margin सीमा के आसपास का स्थान है।

1996 में W3C द्वारा जारी और 1999 में संशोधित सी.एस.एस1 विनिर्देश के अनुसार, जब किसी ब्लॉक-स्तरीय तत्व के लिए चौड़ाई या ऊंचाई स्पष्ट रूप से निर्दिष्ट की जाती है, तो इसे केवल दृश्य तत्व की चौड़ाई या ऊंचाई निर्धारित करनी चाहिए, जिसमें विस्तारण, बॉर्डर, और बाद में लागू मार्जिन।[4][5] सी.एस.एस3 से पहले, इस बॉक्स मॉडल को W3C बॉक्स मॉडल के रूप में जाना जाता था, सी.एस.एस3 में इसे content-box के रूप में जाना जाता है।

एक बॉक्स की कुल चौड़ाई इसलिए left-margin + left-border + left-padding + width + right-padding + right-border + right-marginहै। इसी प्रकार, एक बॉक्स की कुल ऊंचाई top-margin + top-border + top-padding + height + bottom-padding + bottom-border + bottom-margin के बराबर होती है

उदाहरण के लिए, निम्नलिखित सीएसएस कोड 

.myClass {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: solid 10px black;
  margin: 10px;
}

'myClass' से संबंधित प्रत्येक ब्लॉक के बॉक्स आयाम निर्दिष्ट करेगा। इसके अलावा, ऐसे प्रत्येक बॉक्स की कुल ऊंचाई 160 पिक्सेल और चौड़ाई 260 पिक्सेल होगी।

सी.एस.एस3 ने इंटरनेट एक्सप्लोरर बॉक्स मॉडल को मानक के रूप में प्रस्तुत किया, जिसे border-boxकहा जाता है।[6]


इतिहास

W3C और इंटरनेट एक्सप्लोरर बॉक्स मॉडल के बीच चौड़ाई की व्याख्या के तरीके में अंतर।

एच.टी.एम.एल 4 और सी.एस.एस से पहले, बहुत कम एच.टी.एम.एल तत्व बॉर्डर और विस्तारण दोनों का समर्थन करते थे, इसलिए किसी तत्व की चौड़ाई और ऊंचाई की परिभाषा बहुत विवादास्पद नहीं थी। हालाँकि, यह तत्व के आधार पर भिन्न होता है। किसी तालिका की एच.टी.एम.एल चौड़ाई विशेषता उसकी सीमा सहित तालिका की चौड़ाई को परिभाषित करती है।[7] दूसरी ओर, छवि की एच.टी.एम.एल चौड़ाई विशेषता छवि की चौड़ाई को परिभाषित करती है (किसी भी सीमा के भीतर)।[8] उन आरम्भिक दिनों में विस्तारण का समर्थन करने वाला एकमात्र तत्व टेबल सेल था। सेल के लिए "चौड़ाई को सेल विस्तारण को छोड़कर पिक्सेल में सेल सामग्री के लिए सुझाई गई चौड़ाई" के रूप में परिभाषित किया गया था।[9]

1996 में, सी.एस.एस[10] कई और तत्वों के लिए मार्जिन, बॉर्डर और विस्तारण को प्रस्तावित किया। इसने टेबल सेल के समान सामग्री, सीमा, मार्जिन और विस्तारण के संबंध में एक परिभाषा चौड़ाई को अपनाया।[11] इसके बाद से इसे W3C बॉक्स मॉडल के रूप में जाना जाने लगा।

उस समय, बहुत कम ब्राउज़र विक्रेताओं ने अक्षर के लिए W3C बॉक्स मॉडल लागू किया था। उस समय के दो प्रमुख ब्राउज़र, नेटस्केप 4.0 और इंटरनेट एक्सप्लोरर 4.0 दोनों ने चौड़ाई और ऊंचाई को सीमा से सीमा तक की दूरी के रूप में परिभाषित किया।[12] इसे पारंपरिक [13] या इंटरनेट एक्सप्लोरर बॉक्स मॉडल कहा गया है।[14]

"विचित्र मोड" में इंटरनेट एक्सप्लोरर में निर्दिष्ट चौड़ाई या ऊंचाई के भीतर सामग्री, विस्तारण और सीमाएं समिलित हैं; इसका परिणाम मानक व्यवहार का अनुसरण करने की तुलना में बॉक्स के संकीर्ण या छोटे प्रतिपादन में होता है।[15]

इंटरनेट एक्सप्लोरर बॉक्स मॉडल व्यवहार को प्रायः एक बग माना जाता था, क्योंकि जिस तरह से इंटरनेट एक्सप्लोरर के पुराने संस्करण बॉक्स मॉडल या वेब पेज में तत्वों के आकार को संभालते थे, जो कि कैस्केडिंग स्टाइल पत्रक भाषा के लिए W3C द्वारा अनुशंसित मानक तरीके से अलग है। पत्रक भाषा।[16][17] इंटरनेट एक्सप्लोरर 6 के अनुसार, ब्राउज़र एक वैकल्पिक प्रतिपादन मोड (जिसे मानक-अनुपालन मोड कहा जाता है) का समर्थन करता है जो इस विसंगति को हल करता है। फिर भी, पिछड़े संगतता कारणों के लिए, सभी संस्करण अभी भी पूर्व निर्धारित मूल्य से सामान्य, गैर-मानक तरीके से व्यवहार करते हैं (क्विर्क्स मोड देखें)। मैक के लिए इंटरनेट एक्सप्लोरर इस अमानक व्यवहार से प्रभावित नहीं है।

वैकल्पिक हल

यदि पृष्ठ में कुछ एच.टी.एम.एल दस्तावेज़ प्रकार की घोषणाएँ हैं, तो इंटरनेट एक्सप्लोरर संस्करण इंटरनेट एक्सप्लोरर 6 और उस से आगे के संस्करण बग से प्रभावित नहीं होते हैं। पश्चगामी संगतता के कारणों के लिए विचित्र मोड में होने पर ये संस्करण बग्गी व्यवहार को बनाए रखते हैं।[18] उदाहरण के लिए, विचित्र तरीका प्रवर्तित किया गया है:

  • जब दस्तावेज़ प्रकार की घोषणा अनुपस्थित या अपूर्ण हो;
  • जब कोई एच.टी.एम.एल 3 या पहले का दस्तावेज़ मिलता है;
  • जब एक एच.टी.एम.एल 4.0 संक्रमणकालीन या फ़्रेमसेट दस्तावेज़ प्रकार की घोषणा का उपयोग किया जाता है और एक सिस्टम परिज्ञापक (URI) मौजूद नहीं होता है;
  • जब एक एस.जी.एम.एल टिप्पणी या अन्य अपरिचित सामग्री दस्तावेज़ प्रकार की घोषणा से पहले प्रकट होती है
  • यदि दस्तावेज़ प्रकार की घोषणा से पहले कोई XML घोषणा होती है, तो इंटरनेट एक्सप्लोररr 6 भी विचित्र मोड का उपयोग करता है।[19]

W3C बॉक्स मॉडल का उपयोग करके वेब पेजों को प्रदर्शित करने के लिए इंटरनेट एक्सप्लोरर संस्करण 5 और इससे पहले के संस्करण को बाध्य करने के लिए कई समाधान तैयार किए गए हैं। ब्राउज़र से कुछ नियमों को छिपाने के लिए ये वैकल्पिक हल आमतौर पर इंटरनेट एक्सप्लोरर के सी.एस.एस चयनकर्ता प्रसंस्करण में असंबंधित बग का शोषण करते हैं। इन वैकल्पिक हल में सबसे अच्छी तरह से जाना जाने वाला बॉक्स मॉडल हैक टैंटेक सेलिक द्वारा विकसित किया गया है, जो माइक्रोसॉफ्ट के एक पूर्व कर्मचारी हैं, जिन्होंने मैकिंटोश के लिए इंटरनेट एक्सप्लोरर पर काम करते समय इस विचार को विकसित किया था। इसमें विंडोज़ के लिए इंटरनेट एक्सप्लोरर के लिए चौड़ाई घोषणा निर्दिष्ट करना समिलित है, और उसके बाद सीएसएस-अनुरूप ब्राउज़रों के लिए इसे किसी अन्य चौड़ाई घोषणा के साथ ओवरराइड (स्वचालित प्रक्रिया को रद्द करके अपने नियंत्रण में लाना) करना समिलित है। यह दूसरी घोषणा विंडोज़ के लिए इंटरनेट एक्सप्लोरर से अन्य बगों का शोषण करके छिपी हुई है जिस तरह से यह सीएसएस नियमों को पार करती है। इन सी.एस.एस हैक्स का कार्यान्वयन इंटरनेट एक्सप्लोरर 7 के सार्वजनिक विमोचन द्वारा और जटिल हो गया है, जिसमें कुछ समस्याओं को ठीक किया गया है, लेकिन अन्य को नहीं, जिससे इन हैक्स का उपयोग करने वाले पृष्ठों में अवांछित परिणाम उत्पन्न हुए हैं।[18]

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

इंटरनेट एक्सप्लोरर के बॉक्स मॉडल के लिए समर्थन

वेब डिजाइनर डग बोमन ने कहा है कि मूल इंटरनेट एक्सप्लोरर बॉक्स मॉडल एक बेहतर, अधिक तार्किक दृष्टिकोण का प्रतिनिधित्व करता है।[21] पीटर-पॉल कोच एक भौतिक बॉक्स का उदाहरण देते हैं, जिसका आयाम हमेशा संभावित विस्तारण सहित बॉक्स को ही संदर्भित करता है, लेकिन इसकी सामग्री को कभी नहीं।[13]उनका कहना है कि यह बॉक्स मॉडल ग्राफिक डिजाइनरों के लिए अधिक उपयोगी है, जो अपनी सामग्री की चौड़ाई के बजाय बॉक्स की दृश्यमान चौड़ाई के आधार पर प्रारूप बनाते हैं।[22] बर्नी ज़िम्मरमैन का कहना है कि इंटरनेट एक्सप्लोरर बॉक्स मॉडल एच.टी.एम.एल तालिका मॉडल में उपयोग किए जाने वाले सेल आयामों और विस्तारण की परिभाषा के करीब है।[23]

W3C ने सी.एस.एस3 में एक बॉक्स-साइज़िंग गुण समिलित किया है। कब box-sizing: border-box; एक तत्व के लिए निर्दिष्ट किया गया है, तत्व की कोई भी गद्दी या सीमा निर्दिष्ट चौड़ाई और ऊंचाई के अंदर खींची जाती है, जैसा कि आमतौर पर लीगेसी (वसीयत) एच.टी.एम.एल उपयोगकर्ता एजेंटों द्वारा कार्यान्वित किया जाता है।[24] इंटरनेट एक्सप्लोररr 8, वेबकिट ब्राउज़र जैसे कि ऐप्पल सफारी (वेब ​​ब्राउज़र) 5.1+ और गूगल क्रोम, गेको- आधारित ब्राउज़र जैसे मोज़िला फ़ायरफ़ॉक्स 29.0 और बाद में, ओपेरा (वेब ​​ब्राउज़र) 7.0 और बाद का संस्करण, और कॉन्करर 3.3.2 और बाद में सी.एस.एस3 बॉक्स-साइज़िंग गुण का समर्थन करता है। 29.0 से पहले के गेको ब्राउज़र ब्राउज़र-विशिष्ट का उपयोग करके समान कार्यक्षमता का समर्थन करते हैं -moz-box-sizing संपत्ति।[25] border-box बूटस्ट्रैप (फ्रंट-एंड फ्रेमवर्क) में उपयोग किया जाने वाला व्यतिक्रम बॉक्स मॉडल है।

संदर्भ

  1. ↑ 1.0 1.1 Etemad, Elika J., ed. (2020-12-22). "CSS Box Model Module Level 3". W3C. Level 3. CSS Working Group. Retrieved 2021-04-09.
  2. ↑ 2.0 2.1 Bos, Bert; Prowse, Anton, eds. (2018-07-06). "CSS Basic Box Model Level 3". W3C. 31 July 2018. CSS Working Group. Retrieved 2021-04-09.
  3. ↑ "CSS". MDN Web Docs. 2019-03-23. Retrieved 30 March 2019.
  4. ↑ 4.0 4.1 Wium Lie, Håkon; Bos, Bert (11 January 1999). "Cascading Style Sheets, level 1 § Formatting model". World Wide Web Consortium. Retrieved 26 October 2017.
  5. ↑ Håkon Wium Lie; Bert Bos (17 December 1996). "कैस्केडिंग स्टाइल शीट्स, स्तर 1". World Wide Web Consortium. Retrieved 2006-12-09.
  6. ↑ Peter-Paul Koch (2013). "CSS - box-sizing". quirksmode.org. Retrieved 30 March 2019.
  7. ↑ Raggett, Dave (23 January 1996). "The HTML3 Table Model". World Wide Web Consortium. Retrieved 26 October 2017."RFC 1942 HTML Tables". IETF. The default table width is the space between the current left and right margins.
  8. ↑ Raggett, Dave; Le Hors, Arnaud; Jacobs, Ian (24 December 1999). "13 Objects, Images, and Applets § Width and height". World Wide Web Consortium. Retrieved 26 October 2017.
  9. ↑ Raggett, Dave (14 January 1997). "HTML 3.2 Reference Specification". World Wide Web Consortium. Retrieved 26 October 2017.
  10. ↑ Wium Lie, Håkon; Bos, Bert (17 December 1996). "कैस्केडिंग स्टाइल शीट्स, स्तर 1". World Wide Web Consortium. Retrieved 26 October 2017.
  11. ↑ Wium Lie, Håkon; Bos, Bert (17 December 1996). "कैस्केडिंग स्टाइल शीट्स, स्तर 1". World Wide Web Consortium. Retrieved 26 October 2017.
  12. ↑ Koch, Peter-Paul. "बॉक्स मॉडल ट्वीकिंग". XS4ALL. Retrieved 26 October 2017.
  13. ↑ 13.0 13.1 Koch, Peter-Paul. "सीएसएस - बॉक्स-साइज़िंग". QuirksMode. Retrieved 26 October 2017.
  14. ↑ 14.0 14.1 Johansson, Roger (21 December 2006). "इंटरनेट एक्सप्लोरर और सीएसएस बॉक्स मॉडल". 456 Berea Street. Retrieved 26 October 2017.
  15. ↑ Lance Silver (March 2001). "CSS Enhancements in Internet Explorer 6". Microsoft Developer Network. Microsoft. Retrieved 2007-06-24.
  16. ↑ Shafer, Dan (2005). HTML Utopia: Designing Without Tables Using CSS. Melbourne: Sitepoint. pp. 124 & Appendix C. ISBN 0-9579218-2-9.
  17. ↑ Shea, David; Molly E. Holzschlag (2005). सीएसएस डिजाइन का ज़ेन. Berkeley: Peachpit Press. ISBN 0-321-30347-4.
  18. ↑ 18.0 18.1 Markus Mielke (26 September 2006). "Cascading Style Sheet Compatibility in Internet Explorer 7". Microsoft Developer Network. Microsoft. Retrieved 2007-06-24. "Pages authored under non-strict mode (quirks) will not change behavior in IE7 and will not be affected by broken CSS filters.Pages authored under non-strict mode (or "quirks mode") will not change behavior in IE7."
  19. ↑ "!DOCTYPE". Microsoft Developer Network. Microsoft. Retrieved 2007-01-13. "The following examples show how to use the !DOCTYPEdeclaration to specify the DTD a document conforms to, and to switch Internet Explorer 6 and later to standards-compliant mode."
  20. ↑ Arve Bersvendsen (February 2004). "आईई के लिए हैक-मुक्त सीएसएस". Arve Bersvendsen's weblog. Archived from the original on 15 January 2007. Retrieved 16 January 2007.
  21. ↑ "Vorsprung durch Webstandards | Douglas Bowman declares his love to CSS". Vorsprungdurchwebstandards.de. Archived from the original on 2010-06-14. Retrieved 2010-07-07.
  22. ↑ "Vorsprung durch Webstandards | Peter-Paul Koch declares his love to CSS". Vorsprungdurchwebstandards.de. Archived from the original on 2010-02-27. Retrieved 2010-07-07.
  23. ↑ "बॉक्स मॉडल प्रबुद्धता, बर्नी ज़िम्मरमैन". Bernzilla.com. 4 April 2003. Archived from the original on 27 December 2010. Retrieved 2010-07-07.
  24. ↑ "CSS3 Basic User Interface Module". World Wide Web Consortium.
  25. ↑ "-मोज़-बॉक्स-साइज़िंग". Mozilla Developer Center. Mozilla. 11 April 2009. Retrieved 2009-04-11. It is possible to use this property to emulate the behavior of browsers that do not correctly support the CSS box model specification.


बाहरी संबंध

Retrieved from ‘https://www.vigyanwiki.in/index.php?title=सीएसएस_बॉक्स_मॉडल&oldid=218895’