سي ايس ايس ماڊل خانو

ويب ڊولپمينٽ ۾ **سي ايس ايس باڪس ماڊل** ان طريقي ڏانهن اشارو ڪري ٿو جنهن ۾ ايڇ ٽي ايم ايل عنصرن کي برائوزر انجڻن ۾ ماڊل ڪيو ويندو آهي ۽ انهن HTML عنصرن جا ماپون سي ايس ايس خاصيتن مان ڪيئن طئي ٿينديون آهن. اهو ايڇ ٽي ايم ايل ويب صفحن جي ترتيب ۽ جوڙجڪ لاءِ بنيادي تصور آهي. باڪس ماڊل جون هدايتون ويب معيارن ۾ بيان ڪيل آهن جيڪي خاص طور تي ورلڊ وائڊ ويب ڪنسرشيم (W3C) جي سي ايس ايس ورڪنگ گروپ  پاران تيار ڪيون وڃن ٿيون. 1990ع واري ڏهاڪي جي آخر ۽ 2000ع جي شروعاتي سالن ۾ ڪيترن ئي برائوزرن ۾ باڪس ماڊل جا غير معياري عملدرآمد موجود هئا. جڏهن CSS2 1998ع ۾ متعارف ٿيو ۽ `box-sizing` خاصيت شامل ڪئي وئي، ته گهڻو ڪري اهو مسئلو حل ٿي ويو.

## خاصيتون

ڪيسڪيڊنگ اسٽائل شيٽون (CSC) جي وضاحت ٻڌائي ٿي ته ويب صفحن جا عنصر گرافڪ برائوزرن ۾ ڪيئن ظاهر ٿيندا آهن. CSS1 وضاحت جي سيڪشن 4 هڪ "فارميٽنگ ماڊل " بيان ڪري ٿي جيڪو بلاڪ-ليول عنصرن—جهڙوڪ `p` ۽ `blockquote`—کي ويڪر ۽ اوچائي ڏئي ٿو، ۽ انهن جي چوڌاري ٽن سطحن جا باڪس بيان ڪري ٿو: padding، border ۽ margin. جيتوڻيڪ وضاحت ۾ "ماڊل خانو" يا باڪس ماڊل جو لفظ سڌو استعمال نه ڪيو ويو، پر اهو اصطلاح ويب ڊولپرز ۽ برائوزر ٺاهيندڙن ۾ وڏي پيماني تي استعمال ٿيڻ لڳو.

سڀئي ايڇ ٽي ايم ايل عنصر "باڪس" طور سمجهي سگهجن ٿا، جنهن ۾ `div` ٽئگ، `p` ٽئگ يا `a` ٽئگ شامل آهن. انهن مان هر باڪس جون پنج تبديلي لائق ماپون هونديون آهن:

* `height` ۽ `width` باڪس جي اصل مواد (متن، تصويرون وغيره) جي ماپن کي بيان ڪن ٿيون  
* `padding` مواد ۽ باڪس جي ڪنڊ (border) جي وچ واري جڳهه کي بيان ڪري ٿو  
* `border` باڪس جي چوڌاري موجود لڪير هوندي آهي (جهڙوڪ solid، dotted يا dashed)  
* `margin` باڪس جي ڪنڊ جي ٻاهرئين جڳهه کي بيان ڪري ٿو  

W3C پاران جاري ڪيل CSS1 وضاحت (1996ع، بعد ۾ 1999ع ۾ نظرثاني) مطابق جڏهن ڪنهن بلاڪ-ليول عنصر لاءِ ويڪر يا اوچائي واضح طور تي مقرر ڪئي وڃي، ته اها صرف نظر ايندڙ عنصر جي ويڪر يا اوچائي کي ظاهر ڪري ٿي، جڏهن ته padding، border ۽ margin بعد ۾ شامل ڪيا ويندا آهن. CSS3 کان اڳ هن باڪس ماڊل کي **W3C باڪس ماڊل** چيو ويندو هو، جڏهن ته CSS3 ۾ ان کي `content-box` سڏيو وڃي ٿو.

باڪس جي ڪل ويڪر هيئن حساب ڪئي ويندي آهي:

`margin-left` + `border-left` + `padding-left` + `width` + `padding-right` + `border-right` + `margin-right`

ساڳي طرح باڪس جي ڪل اوچائي:

`margin-top` + `border-top` + `padding-top` + `height` + `padding-bottom` + `border-bottom` + `margin-bottom`

مثال طور هيٺين CSS ڪوڊ:


```css
.my-class {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: solid 10px black;
  margin: 10px;
}
```


هي ڪوڊ 'my-class' سان لاڳاپيل هر بلاڪ جي باڪس جي ماپن کي بيان ڪندو. اهڙي هر باڪس جي ڪل اوچائي 140px ۽ ڪل ويڪر 240px ٿيندي.

CSS3 معيار ۾ **انٽرنيٽ ايڪسپلورر باڪس ماڊل** کي پڻ شامل ڪيو ويو، جنهن کي `border-box` سڏيو وڃي ٿو.

## تاريخ

HTML 4 ۽ CSS کان اڳ، تمام ٿورن HTML عنصرن وٽ border ۽ padding ٻنهي جو سهڪار موجود هو، تنهنڪري ڪنهن عنصر جي ويڪر ۽ اوچائي جي تعريف گهڻي تڪراري نه هئي. تنهن هوندي به، اها عنصر جي لحاظ کان مختلف هوندي هئي. ٽيبل جي HTML width خاصيت، ٽيبل جي border سميت ان جي ويڪر کي بيان ڪندي هئي. ٻئي طرف، تصوير جي HTML width خاصيت تصوير جي پنهنجي ويڪر کي بيان ڪندي هئي (ڪنهن به border جي اندر). انهن شروعاتي ڏينهن ۾ padding جو سهڪار رکندڙ واحد عنصر ٽيبل سيل هو. سيل جي ويڪر کي "سيل جي مواد لاءِ پکسلن ۾ تجويز ڪيل ويڪر، سيل padding کان سواءِ" طور بيان ڪيو ويندو هو.

1996ع ۾، CSS ڪيترن ئي وڌيڪ عنصرن لاءِ margin، border ۽ padding متعارف ڪرايا. هن ويڪر جي اهڙي تعريف اختيار ڪئي جيڪا مواد، border، margin ۽ padding جي حوالي سان ٽيبل سيل واري تعريف سان ملندڙ هئي. ان کي پوءِ *W3C باڪس ماڊل* جي نالي سان سڃاتو ويو.

ان وقت تمام ٿورا برائوزر ٺاهيندڙ W3C باڪس ماڊل کي مڪمل خاصيتن (specification) مطابق لاڳو ڪندا هئا. ان وقت جا ٻه وڏا برائوزر، Netscape 4.0 ۽ Internet Explorer 4.0، ويڪر ۽ اوچائي کي هڪ border کان ٻي border تائين فاصلي طور بيان ڪندا هئا. ان کي *روايتي* يا *Internet Explorer باڪس ماڊل* چيو ويو.

انٽرنيٽ ايڪسپلورر، "ڪئرڪس موڊ" ۾، مقرر ڪيل ويڪر يا اوچائي جي اندر مواد، پيڊنگ padding ۽ بارڊر کي شامل ڪري ڇڏيندو آهي؛ نتيجي ۾، باڪس جي ڏيک معياري رويي جي ڀيٽ ۾ وڌيڪ تنگ يا گهٽ اوچي نظر ايندي آهي.

*انٽرنيٽ ايڪسپلورر باڪس ماڊل* واري عمل کي اڪثر bug سمجهيو ويندو هو، ڇاڪاڻ ته انٽرنيٽ ايڪسپلورر جي پراڻن نسخن ۾ باڪس ماڊل يا ويب صفحي جي عنصرن جي sizing کي سنڀالڻ جو طريقو W3C طرفان ڪيسڪيڊنگ اسٽائل شيٽون (CSC) ٻولي لاءِ سفارش ڪيل معياري طريقي کان مختلف هو. انٽرنيٽ ايڪسپلورر 6 کان شروع ٿي، برائوزر هڪ متبادل رينڊرنگ موڊ  (جنهن کي "اسٽينڊرڊز ڪمپلينٽ موڊ" چيو ويو) جو سهڪار ڏيڻ لڳو، جيڪو هن فرق کي ختم ڪري ٿو. پر پٺتي واري مطابقت جي ڪري، سڀئي نسخا اڃا به ڊيفالٽ طور عام غير معياري طريقي سان ئي هلندا رهيا (ڏسو ڪئرڪس موڊ (ڪئرڪس موڊ). انٽرنيٽ ايڪسپلورر فار ميڪ هن غير معياري رويي کان متاثر نه ٿيو.

### عارضي حل
انٽرنيٽ ايڪسپلورر جا نسخا انٽرنيٽ ايڪسپلورر 6 ۽ ان کان پوءِ وارا هن بگ (bug) کان متاثر ناهن ٿيندا جيڪڏهن صفحي ۾ ڪجهه خاص ايڇ ٽي ايم ايل دستاويز نموني پڌرنامو يا پڌرناما  موجود هجن. اهي نسخا پٺتي واري مطابقت جي ڪري ڪئرڪس موڊ ۾ اڃا به بگ وارو رويو برقرار رکندا آهن. مثال طور، quirks mode هن حالتن ۾ فعال ٿيندو آهي:
* جڏهن دستاويز نموني پڌرنامو يا پڌرناما غير موجود يا اڻپورو هجي؛
* جڏهن HTML&nbsp;3 يا ان کان اڳ وارو دستاويز ملي؛
* جڏهن HTML&nbsp;4.0 عارضي يا فريم وارو دستاويز نموني پڌرنامو استعمال ٿئي ۽ نظام جي نشاندهي ڪندڙ (URI) موجود نه هجي؛
* جڏهن دستاويز نموني پڌرنامي کان اڳ ڪو SGML تبصرو يا ٻيو اڻسڃاتل مواد موجود هجي؛
* انٽرنيٽ ايڪسپلورر&nbsp;6 پڻ ڪئرڪس موڊ استعمال ڪري ٿو جيڪڏهن دستاويز نموني پڌرنامي کان اڳ ايڪس ايم ايل پڌرنامو موجود هجي.

انٽرنيٽ ايڪسپلورر  5 ۽ ان کان اڳ وارن نسخن کي W3C باڪس ماڊل مطابق ويب صفحا ڏيکارڻ تي مجبور ڪرڻ لاءِ مختلف ورڪ ارائونڊ workaround تيار ڪيا ويا. اهي ورڪ ارائونڊ اڪثر انٽرنيٽ ايڪسپلورر جي سي ايس ايس سليڪٽر پروسيسنگ   ۾ غير لاڳاپيل بگن جو فائدو وٺندا هئا ته جيئن ڪجهه قاعدا برائوزر کان لڪائي سگهجن. انهن ورڪ ارائونڊ مان سڀ کان مشهور "باڪس ماڊل ھيڪ " هو، جيڪو مائڪروسوفٽ جي اڳوڻي ملازم تانتيڪ سيلڪ تيار ڪيو؛ هن اهو خيال ميڪنتوش لاءِ انٽرنيٽ ايڪسپلورر تي ڪم ڪندي تيار ڪيو. ان ۾ انٽرنيٽ ايڪسپلورر وزڊم لاءِ هڪ ويڪر وارو پڌرنامو ڏيڻ، ۽ پوءِ سي ايس ايس شڪايت واري برائوزرن لاءِ ٻي ويڪر واري پڌرنامي سان ان کي برتر ڪرڻ شامل هو. هي ٻي declaration ونڊوز واري انٽرنيٽ پڌرنامي کان سي ايس ايس قائدن جي پارسنگ جي ٻين بگن ذريعي لڪائي ويندي هئي. انهن سي ايس ايس ھيڪ کي لاڳو ڪرڻ جو ڪم انٽرنيٽ ايڪسپلورر&nbsp;7 جي عام رليز کان پوءِ اڃا وڌيڪ پيچيده ٿي ويو، ڇاڪاڻ ته هن ۾ ڪجهه مسئلا حل ڪيا ويا هئا پر ٻيا نه، جنهن سبب انهن hackن استعمال ڪندڙ صفحن ۾ اڻڄاتل نتيجا پيدا ٿيا.

باڪس ماڊل hack غير قابل اعتماد ثابت ٿيا، ڇاڪاڻ ته اهي برائوزرن جي CSS سهڪار ۾ موجود bugن تي دارومدار رکندا هئا، جيڪي پوءِ ايندڙ نسخن ۾ درست ٿي سگهن ٿا. انهيءَ سبب ڪجهه ويب ڊولپرن سفارش ڪئي ته يا ته ساڳئي عنصر لاءِ ويڪر ۽ پيڊنگ ٻنهي کي گڏ بيان ڪرڻ کان پاسو ڪيو وڃي، يا مشروط تبصرو۽/يا سي ايس ايس ھيڪ فلٽر استعمال ڪري انٽرنيٽ ايڪسپلورر جي پراڻن نسخن ۾ باڪس ماڊل بگ کان بچاءُ ڪيو وڃي.

## انٽرنيٽ ايڪسپلورر جي باڪس ماڊل لاءِ سهڪار

ويب ڊزائنر ڊگ بومين (Doug Bowman) جو چوڻ آهي ته اصل انٽرنيٽ ايڪسپلورر باڪس ماڊل هڪ بهتر ۽ وڌيڪ منطقي طريقو پيش ڪري ٿو. پيٽر-پال ڪوخ (Peter-Paul Koch) هڪ حقيقي دٻي (box) جو مثال ڏئي ٿو، جنهن جا ماپ هميشه دٻي پاڻ ڏانهن اشارو ڪندا آهن، جنهن ۾ ممڪن پيڊنگ padding شامل هوندي آهي، پر ان جو مواد نه. هن مطابق هي باڪس ماڊل گرافڪ ڊزائنرن لاءِ وڌيڪ ڪارائتو آهي، ڇاڪاڻ⁠تہ اهي ڊزائن عام طور باڪس جي نظر ايندڙ ويڪر جي بنياد تي ٺاهيندا آهن، نه ته ان جي مواد جي ويڪر تي. برني زيمرمن (Bernie Zimmermann) جو چوڻ آهي ته انٽرنيٽ ايڪسپلورر جو باڪس ماڊل HTML ٽيبل ماڊل ۾ سيل جي ماپن ۽ پيڊنگ padding جي تعريف سان وڌيڪ ويجهو آهي.

W3C، CSS3 ۾ خاني جي ماپ واري"box-sizing" خاصيت شامل ڪئي. جڏهن ڪنهن عنصر لاءِ `box-sizing: border-box;` مقرر ڪيو وڃي ٿو، ته عنصر جو پيڊنگ padding يا بارڊر border مقرر ڪيل ويڪر ۽ اوچائي جي اندر ئي شامل ٿي ويندو آهي، "جيئن پراڻن HTML يوزر ايجنٽن ۾ عام طور لاڳو ڪيو ويندو هو". انٽرنيٽ ايڪسپلورر 8، ويب ڪِٽ بنياد برائوزر جهڙوڪ ايپل سفاري 5.1 ۽ ان کان پوءِ جا نسخا ۽ گوگل ڪروم، گيڪو بنياد برائوزر جهڙوڪ موزيلا فائر فاڪس 29.0 ۽ ان کان پوءِ، اوپيرا 7.0 ۽ ان کان پوءِ، ۽ Konqueror 3.3.2 ۽ ان کان پوءِ CSS3 جي خاني جي ماپ واري خاصيت کي سهڪار ڏين ٿا. گيڪو برائوزرن جا 29.0 کان اڳ وارا نسخا ساڳي ڪارڪردگي برائوزر مخصوص خاصيت `-moz-box-sizing` ذريعي مهيا ڪندا هئا. `border-box` اهو ڊيفالٽ باڪس ماڊل آهي جيڪو بوٽ اسٽريپ فريم ورڪ ۾ استعمال ٿيندو آهي.

## پڻ ڏسو
* لي آئوٽ (ڪمپيوٽنگ)

## حوالا

## ٻاهريان ڳنڍڻا
* ورلڊ وائڊ ويب ڪنسرشيم (W3C) طرفان باڪس ماڊل جي وضاحت
* CSS باڪس ماڊل بابت سبق
* Tantek Çelik طرفان “box model hack” جي وضاحت

* Cascading Style Sheet Compatibility in Internet Explorer 7 – MSDN مضمون، جولاءِ 2006
* Firefox ۽ Internet Explorer ۾ CSS باڪس ماڊل جي فرقن بابت وضاحت