مینوئل ماتزووک: max() چالبازی۔

بذریعہ a مینوئل ماتوزوک کی پوسٹ جو کہ ڈیمو کے ذریعے ہے۔ تیمانی عفیف.

.wrapper {
  margin-inline: max(0px, ((100% - 64rem) / 2)); 
}

یہاں جو کچھ ہو رہا ہے اس کا مینوئل کے ٹوٹ جانے کو پڑھنے کے لیے آپ خود پر احسان کر رہے ہوں گے، لیکن یہ بنیادی طور پر اس طویل نحو کے برابر کام کرتا ہے:

.wrapper {
  max-width: 64rem;
  margin: 0 auto;
  width: 100%;
}

…کہاں:

• زیادہ سے زیادہ () CSS عددی اقدار کی کوما سے الگ کردہ فہرست کو قبول کرتا ہے، جہاں لاگو قدر سب سے بڑی ہے (یا بطور MDN اسے رکھتا ہے۔، "سب سے زیادہ مثبت") سیٹ میں ایک۔
• 0px سیٹ میں پہلی قدر ہے، اس بات کو یقینی بناتے ہوئے کہ سب سے چھوٹی قدر ہمیشہ صفر پکسلز سے زیادہ ہو گی۔
• (100% - 64rem) سیٹ میں دوسری "قدر" ہے، لیکن اسے حساب کے طور پر ظاہر کیا جاتا ہے (نوٹ کریں کہ calc() غیر ضروری ہے) جو کہ کو کم کرتا ہے۔ max-width عنصر کا (64rem) اس کی مکمل دستیابی سے width (100%)۔ جو بچا ہے وہ جگہ ہے جو عنصر کے ذریعہ نہیں لی جاتی ہے۔
• ((100% - 64rem) / 2)) اس باقی جگہ کو یکساں طور پر تقسیم کرتا ہے کیونکہ ہم اسے عنصر کی ان لائن حدود کے درمیان تقسیم کر رہے ہیں۔
• max(0px, ((100% - 64rem) / 2)) مقابلے 0px اور (100% - 64rem) / 2). سب سے بڑی قدر استعمال ہوتی ہے۔ یہ زیادہ تر معاملات میں مساوات کا نتیجہ ہوگا، لیکن اگر 64rem عنصر کی مکمل کی حسابی قدر سے کہیں زیادہ ہے۔ 100% چوڑائی، یہ اس قدر کو صفر پر مقفل کر دے گا تاکہ یہ یقینی بنایا جا سکے کہ اس کا نتیجہ کبھی منفی قدر میں نہیں آتا۔
• margin-inline وہ خاصیت ہے جسے جیتنے والی قدر سیٹ کرتی ہے، جو عنصر کے ان لائن سائیڈز پر مارجن کا اطلاق کرتی ہے — یہ منطقی شارٹ ہینڈ ہے جو کہ اسی قدر کو سیٹ کرنے کے مترادف ہے۔ margin-left اور margin-right جسمانی خصوصیات.

یہ ایک ہی قسم کا خیال ہے۔ کرس نے کچھ دیر پہلے شیئر کیا۔ جو CSS استعمال کرتا ہے۔ max()کو حل کرنے کا فنکشن "اندرونی مسئلہ" - ایک کنٹینر جو مکمل خون بہہ جانے والے پس منظر کے رنگ کو سپورٹ کرتا ہے جبکہ اس کے اندر موجود مواد کو روکتا ہے۔ padding.

max(), calc(), margin-inline… یہ بہت سی نئی سی ایس ایس ہے! اور مینوئل اس کے وسط میں صحیح سمیک ڈیب ہے۔ 100 دنوں میں ان اور دیگر جدید CSS خصوصیات کے بارے میں لکھنا.

براہ راست لنک →