چند بار کنٹینر سائز کے سوالات نے میری مدد کی ہوگی۔

CSS کنٹینر کے سوالات اب بھی حاصل کر رہے ہیں اور ہم میں سے بہت سے لوگ ان سے اپنے ہاتھ گیلے کر رہے ہیں، چاہے یہ چھوٹے تجربات کے لیے ہی کیوں نہ ہو۔ وہ بہت اچھے ہیں، لیکن مکمل نہیں، براؤزر کی حمایت — کچھ پروجیکٹس میں ان کے استعمال کا جواز پیش کرنے کے لیے کافی ہے، لیکن شاید اس حد تک نہیں جہاں ہمیں تبدیل کرنے کا لالچ دیا جائے۔ میڈیا کے سوالات چمکدار نئے کنٹینر سائز کے سوالات کے ساتھ ماضی کے منصوبوں سے۔

وہ یقینی طور پر کارآمد ہیں! درحقیقت، میں پہلے ہی کچھ ایسے حالات سے گزر چکا ہوں جہاں میں واقعی ان تک پہنچنا چاہتا تھا لیکن صرف سپورٹ کی ضروریات پر قابو نہیں پا سکا۔ اگر میں ان کو استعمال کرنے کے قابل ہوتا تو ان حالات میں ایسا ہی ہوتا۔

درج ذیل تمام ڈیمو اس تحریر کے وقت کروم یا سفاری میں بہترین دیکھے جائیں گے۔ فائر فاکس کا منصوبہ ہے۔ جہاز کی حمایت ورژن 109 میں۔

کیس 1: کارڈ گرڈ

آپ کو اس قسم کی توقع کرنی تھی، ٹھیک ہے؟ یہ ایک ایسا عام نمونہ ہے کہ لگتا ہے کہ ہم سب کسی نہ کسی وقت اس کی زد میں آتے ہیں۔ لیکن حقیقت یہ ہے کہ اگر میں معیاری میڈیا سوالات پر ان کا استعمال کرنے کے قابل ہوتا تو کنٹینر سائز کے سوالات میرے لیے ایک بہت بڑا وقت بچانے والے ہوتے۔

ہم کہتے ہیں کہ آپ کو اس کارڈ گرڈ کو اس ضرورت کے ساتھ بنانے کا کام سونپا گیا ہے کہ ہر کارڈ کو 1:1 پہلو تناسب رکھنے کی ضرورت ہے:

یہ لگتا ہے اس سے زیادہ سخت ہے! مسئلہ یہ ہے کہ ویو پورٹ کی چوڑائی پر جزو کے مواد کو سائز دینے سے آپ کو اس بات کے رحم و کرم پر چھوڑ دیا جاتا ہے کہ جزو ویو پورٹ پر کس طرح کا ردعمل ظاہر کرتا ہے — اسی طرح جس طرح سے کسی دوسرے آبائی کنٹینر اس کا جواب دیتے ہیں۔ اگر، مثال کے طور پر، آپ چاہتے ہیں کہ کارڈ کی سرخی کے فونٹ کا سائز کم ہو جائے جب کارڈ کسی مخصوص ان لائن سائز سے ٹکرائے تو ایسا کرنے کا کوئی قابل بھروسہ طریقہ نہیں ہے۔

آپ فونٹ کا سائز ترتیب دے سکتے ہیں۔ vw یونٹس، مجھے لگتا ہے، لیکن جزو اب بھی براؤزر کے ویو پورٹ کی چوڑائی سے منسلک ہے۔ اور اس سے مسائل پیدا ہوسکتے ہیں جب کارڈ گرڈ کو دوسرے سیاق و سباق میں استعمال کیا جاتا ہے جس میں ایک جیسے بریک پوائنٹس نہیں ہوسکتے ہیں۔

اپنے حقیقی دنیا کے پروجیکٹ میں، میں جاوا اسکرپٹ کے نقطہ نظر پر اترا جو کہ:

1. نیا سائز دینے والے ایونٹ کے لیے سنیں۔
2. ہر کارڈ کی چوڑائی کا حساب لگائیں۔
3. ہر کارڈ میں اس کی چوڑائی کی بنیاد پر ان لائن فونٹ کا سائز شامل کریں۔
4. استعمال کرتے ہوئے اندر کی ہر چیز کو اسٹائل کریں۔ em یونٹ

بہت کام لگتا ہے، ٹھیک ہے؟ لیکن مختلف سیاق و سباق میں مختلف اسکرین سائزز میں مطلوبہ اسکیلنگ حاصل کرنا ایک مستحکم حل ہے۔

کنٹینر کے سوالات بہت بہتر ہوتے کیونکہ وہ ہمیں فراہم کرتے ہیں۔ کنٹینر استفسار یونٹسجیسے جیسے cqw یونٹ آپ کو شاید پہلے ہی مل گیا ہے، لیکن 1cqw مساوی ہے 1% کنٹینر کی چوڑائی۔ ہمارے پاس بھی ہے۔ cqi یونٹ جو کنٹینر کی ان لائن چوڑائی کا پیمانہ ہے، اور cqb کنٹینر کے بلاک کی چوڑائی کے لیے۔ لہذا، اگر ہمارے پاس ایک کارڈ کنٹینر ہے 500px وسیع، ایک 50cqw قدر کا حساب لگاتا ہے۔ 250px.

اگر میں اپنے کارڈ گرڈ میں کنٹینر کے سوالات استعمال کرنے کے قابل ہوتا، تو میں سیٹ اپ کر سکتا تھا۔ .card ایک کنٹینر کے طور پر جزو:

.card { 
  container: card / size;
}

تب میں اس کے ساتھ اندرونی چادر سیٹ کر سکتا تھا۔ padding جس میں ترازو ہوتا ہے۔ 10% کی .cardکی چوڑائی کا استعمال کرتے ہوئے cqw یونٹ:

.card__inner { 
  padding: 10cqw; 
} 

کارڈ کے کناروں اور اس کے مشمولات کے درمیان وقفہ کاری کو مسلسل پیمانہ کرنے کا یہ ایک اچھا طریقہ ہے اس سے کوئی فرق نہیں پڑتا ہے کہ کارڈ کو کسی بھی ویو پورٹ کی چوڑائی پر استعمال کیا جاتا ہے۔ میڈیا کے سوالات کی ضرورت نہیں!

ایک اور خیال؟ استعمال کریں۔ cqw اندرونی مواد کے فونٹ سائز کے لیے اکائیاں، پھر پیڈنگ لاگو کریں۔ em یونٹ:

.card__inner { 
  font-size: 5cqw; 
  padding: 2em;
} 

5cqw ایک صوابدیدی قدر ہے - صرف ایک جس پر میں نے طے کیا۔ وہ بھرتی اب بھی برابر ہے۔ 10cqw جب سے em یونٹ سے متعلق ہے .card__inner حرف کا سائز!

کیا آپ نے اسے پکڑ لیا؟ دی 2em سے متعلق ہے 5cqw فونٹ کا سائز جو سیٹ ہے۔ ایک ہی کنٹینر پر. کنٹینرز اس سے مختلف کام کرتے ہیں جس کے ہم عادی ہیں، جیسا کہ em اکائیاں ایک ہی عنصر کی نسبت ہیں۔ font-size value. لیکن جو میں نے جلدی سے دیکھا وہ یہ ہے کہ کنٹینر استفسار یونٹس سے متعلق ہیں۔ قریب ترین والدین جو کہ ایک کنٹینر بھی ہے۔.

مثال کے طور پر، 5cqw کی بنیاد پر پیمانہ نہیں ہے۔ .card اس مثال میں عنصر کی چوڑائی:

.card { 
  container: card / size; 
  container-name: card; 
  font-size: 5cqw; 
}

بلکہ، یہ کسی بھی قریب ترین والدین کے لیے پیمانہ ہے جس کی تعریف کنٹینر کے طور پر کی گئی ہے۔ اسی لیے میں نے ایک سیٹ اپ کیا۔ .card__inner لپیٹ

کیس 2: متبادل ترتیب

مجھے ایک مختلف پروجیکٹ میں کارڈ کے ایک اور جزو کی ضرورت تھی۔ اس بار، مجھے لینڈ اسکیپ لے آؤٹ سے پورٹریٹ لے آؤٹ میں منتقلی کے لیے کارڈ کی ضرورت تھی… پھر واپس لینڈ اسکیپ پر، اور اسکرین کے چھوٹے ہونے پر دوبارہ پورٹریٹ پر واپس۔

میں نے اس جزو کو ان دو مخصوص ویو پورٹ رینجز پر پورٹریٹ بنانے کا گھناؤنا کام کیا تھا۔ نیا میڈیا استفسار رینج نحو!)، لیکن ایک بار پھر، مسئلہ یہ ہے کہ اس کے بعد اس پر سیٹ کیے گئے میڈیا کے سوالات، اس کے والدین، اور کسی بھی دوسری چیز پر مقفل کردیا جاتا ہے جو ویو پورٹ کی چوڑائی کا جواب دے سکتا ہے۔ ہم کوئی ایسی چیز چاہتے ہیں جو کسی بھی حالت میں کام کرے بغیر یہ سوچے کہ مواد کہاں ٹوٹنے والا ہے!

کنٹینر کے سوالات نے اس کو ہوا کا جھونکا بنا دیا ہوگا، شکریہ @container قاعدہ:

.info-card {
  container-type: inline-size;
  container-name: info-card;
}

@container info-card (max-width: 500px) {
  .info-card__inner {
    flex-direction: column;
  }
}

ایک سوال، لامحدود روانی:

لیکن ٹھہرو! کچھ ایسی چیز ہے جس پر آپ دھیان رکھنا چاہتے ہیں۔ خاص طور پر، پروپ بیسڈ ڈیزائن سسٹم کے اندر اس طرح کے کنٹینر استفسار کو استعمال کرنا مشکل ہو سکتا ہے۔ مثال کے طور پر، یہ .info-card اجزاء میں بچوں کے اجزاء شامل ہوسکتے ہیں جو اپنی ظاہری شکل کو تبدیل کرنے کے لیے سہارے پر انحصار کرتے ہیں۔

یہ ایک بڑی بات کیوں ہے؟ کارڈ کے پورٹریٹ لے آؤٹ کو متبادل اسٹائل کی ضرورت ہو سکتی ہے لیکن آپ CSS کے ساتھ JavaScript پرپس کو تبدیل نہیں کر سکتے۔ اس طرح، آپ کو مطلوبہ طرزوں کی نقل تیار کرنے کا خطرہ ہے۔ میں نے اصل میں اس پر چھوا اور ایک اور مضمون میں اس کے ارد گرد کام کرنے کا طریقہ. اگر آپ کو اپنے اسٹائل کی خاصی مقدار کے لیے کنٹینر کے استفسارات استعمال کرنے کی ضرورت ہے، تو آپ کو اپنے پورے ڈیزائن سسٹم کو ان کے اردگرد رکھنے کی ضرورت ہو گی، بجائے اس کے کہ انہیں موجودہ ڈیزائن سسٹم میں جوتوں سے جوڑ کر جو میڈیا کے سوالات پر بھاری ہو۔

کیس 3: SVG اسٹروک

یہاں ایک اور انتہائی عام نمونہ ہے جسے میں نے حال ہی میں استعمال کیا ہے جہاں کنٹینر کے سائز کے سوالات کے نتیجے میں زیادہ پالش پروڈکٹ ہوتا۔ کہتے ہیں کہ آپ کے پاس سرخی کے ساتھ ایک آئیکن بند ہے:

  
    
   
  Heading

میڈیا کے سوالات کے بغیر بھی، عنوان کے سائز کے ساتھ آئیکن کو پیمانہ کرنا کافی سیدھا ہے۔ مسئلہ، اگرچہ، یہ ہے کہ SVG کا stroke-width ایک چھوٹے سائز میں یہ سب کچھ اچھی طرح سے محسوس کرنے کے لئے بہت پتلا ہو سکتا ہے، اور شاید ایک بڑے سائز پر ایک سپر موٹی اسٹروک کے ساتھ بہت زیادہ توجہ حاصل کر سکتا ہے.

مجھے ہر آئیکن مثال کے طور پر اس کے سائز اور اسٹروک کی چوڑائی کا تعین کرنے کے لئے کلاسز بنانا اور لاگو کرنا پڑا۔ یہ ٹھیک ہے اگر آئیکن کسی ایسے سرخی کے ساتھ ہو جس کو ایک مقررہ فونٹ سائز کے ساتھ اسٹائل کیا گیا ہو، میرا اندازہ ہے، لیکن یہ اتنا اچھا نہیں ہے جب مسلسل تبدیل ہونے والی سیال قسم کے ساتھ کام کریں۔

سرخی کا فونٹ سائز ویو پورٹ کی چوڑائی پر مبنی ہو سکتا ہے، لہذا SVG آئیکن کو اس کے مطابق ایڈجسٹ کرنے کی ضرورت ہے جہاں اس کا اسٹروک کسی بھی سائز پر کام کرتا ہے۔ آپ اسٹروک کی چوڑائی کو سرخی کے مطابق بنا سکتے ہیں۔ font-size اسے ترتیب دے کر em یونٹس لیکن اگر آپ کے پاس فالج کے سائز کا ایک مخصوص سیٹ ہے جس پر آپ کو قائم رہنے کی ضرورت ہے، تو یہ کام نہیں کرے گا کیونکہ یہ دوسری صورت میں لکیری طور پر ترازو کرتا ہے — اسے کسی مخصوص میں ایڈجسٹ کرنے کا کوئی طریقہ نہیں ہے۔ stroke-width ویو پورٹ کی چوڑائی پر میڈیا کے سوالات کا سہارا لیے بغیر کچھ پوائنٹس پر قدر۔

لیکن یہاں یہ ہے کہ اگر میں اس وقت کنٹینر کے سوالات کی آسائش رکھتا تو میں کیا کرتا:

.icon {
  container: icon / size; 
  width: 1em; 
  height: 1em; 
}

.icon svg {
  width: 100%; 
  height: 100%; 
  fill: none; 
  stroke: #ccc; 
  stroke-width: 0.8; 
}

@container icon (max-width: 70px) {
  .icon svg {
    stroke-width: 1.5; 
  }
}
@container icon (max-width: 35px) {
  .icon svg {
    stroke-width: 3;
  }
}

نفاذ کا موازنہ کریں اور دیکھیں کہ کنٹینر کے استفسار کا ورژن SVG کے اسٹروک کو کنٹینر کی چوڑائی کی بنیاد پر مخصوص چوڑائیوں پر کس طرح کھینچتا ہے۔

بونس: کنٹینر سائز کے سوالات کی دیگر اقسام

ٹھیک ہے، تو میں نے اصل میں ایک حقیقی پروجیکٹ پر اس میں حصہ نہیں لیا ہے۔ لیکن جب میں کنٹینر کے سوالات کے بارے میں معلومات کو تلاش کر رہا تھا، میں نے محسوس کیا کہ ایسی اضافی چیزیں ہیں جن سے ہم کنٹینر پر استفسار کر سکتے ہیں جو کنٹینر کے سائز یا جسمانی جہتوں سے متعلق ہیں۔

زیادہ تر مثالیں جو میں نے دیکھی ہیں۔ width, max-width، اور min-width, height, block-size، اور inline-size جیسا کہ میں اس مضمون میں کر رہا ہوں۔

@container info-card (max-width: 500px) {
  .info-card__inner {
    flex-direction: column;
  }
}

لیکن MDN مزید دو چیزوں کا خاکہ پیش کرتا ہے۔ ہم کے خلاف استفسار کر سکتے ہیں. ایک ہے۔ orientation جو بالکل معنی خیز ہے کیونکہ ہم اسے میڈیا کے سوالات میں ہر وقت استعمال کرتے ہیں۔ یہ کنٹینر کے سوالات سے مختلف نہیں ہے:

@media screen (orientation: landscape) { 
  .info-card__inner {
    /* Style away! */
  }
} 

@container info-card (orientation: landscape) { 
  .info-card__inner {
    /* Style away! */
  }
} 

دیگر؟ یہ ہے aspect-ratio، یقین کرو یا نہ کرو:

@container info-card (aspect-ratio: 3/2) { 
  .info-card__inner {
    /* Style away! */
  }
} 

دونوں مثالوں کے ساتھ کھیلنے کے لیے یہاں ایک قابل تدوین ڈیمو ہے:

مجھے ابھی تک ان میں سے کسی کے لیے بھی کوئی اچھا استعمال کیس نہیں ملا۔ اگر آپ کے پاس کوئی آئیڈیا ہے یا ایسا لگتا ہے کہ اس سے آپ کے پروجیکٹس میں آپ کی مدد ہو سکتی ہے تو مجھے تبصرے میں بتائیں!