سی ایس ایس کنٹینر کے سوالات کا استعمال کرتے ہوئے جوابی ڈیزائن اور اسکرول اثرات کیسے بنائیں

کنٹینر کے استفسارات آپ کو ویب صفحہ کے مخصوص حصوں کو ہدف بنانے اور اسٹائل کرنے کی اجازت دیتے ہیں تاکہ ویو پورٹ کے بجائے کنٹینر کے سائز کی بنیاد پر حسب ضرورت، جوابی ڈیزائنز بنائیں۔

اس گائیڈ میں، ہم آپ کو جوابی ڈیزائن کے لیے کچھ مفید متبادل دکھائیں گے۔ ہم CSS میں سکرول اثرات کے بارے میں بھی سیکھتے ہیں۔

شرطیں

سکرول کے قابل سوالات اور کنٹینر پر مبنی اسکرول اثرات کو دیکھنے سے پہلے، درج ذیل کو نوٹ کریں:

• CSS کی خصوصیات اور کلیدی اصطلاحات کا بنیادی علم – درج ذیل خصوصیات کو سمجھیں: height، overflowاور یہ ترتیب کو کیسے متاثر کرتا ہے۔

• وینیلا سی ایس ایس لکھنے کا تجربہ کریں۔ — فریم ورک پر بھروسہ کیے بغیر سلیکٹرز، اصولوں کے سیٹ، اور اسٹائل لگانے سے واقف ہوں۔

• ایچ ٹی ایم ایل کی ساخت کا کام کرنے والا علم – چونکہ اسکرولنگ رویے کا انحصار والدین کے عنصر پر ہوتا ہے، اس لیے یہ جاننا ضروری ہے کہ کنٹینر اور اس کے بچے کیسے تعامل کرتے ہیں۔

• (اختیاری لیکن مددگار) جوابی ڈیزائن کے تصورات کی کچھ نمائش کے ساتھ، آپ دیکھ سکتے ہیں کہ اسکرول کے قابل پیرنٹ عناصر ایک وسیع تر ترتیب حکمت عملی میں کس طرح فٹ ہوتے ہیں۔

ہم کیا احاطہ کریں گے:

کنٹینر کے سوالات کا استعمال کیسے کریں۔

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

آئیے بطور مثال نیویگیشن بار کو لیں۔ فرض کریں کہ آپ چاہتے ہیں کہ لنکس ایک دوسرے کو اوورلیپ کریں اگر سائز یہ ہیں: nav عنصر کا سائز اس سے کم ہے: 450px جب اسکرین کا سائز اس سے چھوٹا ہوتا ہے تو یہ پس منظر کا رنگ بھی تبدیل کرتا ہے: 450px.

بنانا nav عنصر کے لنکس ایک دوسرے کو اوورلیپ کرتے ہیں جب: nav عنصر کا سائز اس سے کم ہے: 450pxہم سنگل پیرنٹ لنک کے اندر لنک لپیٹ کر شروع کرتے ہیں۔ nav:

پھر استعمال کریں۔ container-type ریپنگ عنصر یا والدین کے لیے کنٹینر کے استفسار کی وضاحت کرنے کے لیے (nav) عنصر۔ اس میں درج ذیل میں سے ایک قدر ہو سکتی ہے:

• inline-size: استعمال کیا جاتا ہے جب آپ صفحہ پر بنیادی عنصر کے x-axis (چوڑائی) کو ٹریک کرنا چاہتے ہیں۔

• block-size: استعمال کیا جاتا ہے جب آپ صفحہ پر بنیادی عنصر کے y-axis (اونچائی) کو ٹریک کرنا چاہتے ہیں۔

• کنٹینر اسکرول حالت: استعمال کیا جاتا ہے جب آپ پیرنٹ عناصر کو اسکرول کرتے وقت ٹریک کرنا چاہتے ہیں اور جب آپ کے پاس عناصر کی پوزیشن ہوتی ہے۔ sticky یہ اسکرین پر پھنس گیا ہے۔

زیادہ تر معاملات میں آپ کو کسی عنصر کے سائز کو اس کے ایکس محور کے سائز سے ٹریک کرنے کی ضرورت ہوگی۔ container-type اس کی وجہ یہ ہے کہ ہم بنیادی عنصر کے سائز کی بنیاد پر طرزیں لاگو کرنا چاہتے ہیں۔ یہاں nav کیونکہ یہ بنیادی عنصر ہے۔

nav { 
  container-type: inline-size;
}

پھر at علامت (@) اگلی بار container کلیدی لفظ

پھر width پیرنٹ کنٹینر (nav) سے تنگ ہو جاتا ہے: 450px. اگر شرط درست ہے تو شامل کریں۔ flex-wrap عناصر کو جوڑنے کے لیے:

@container (width > 450px) {
  ul {
    flex-wrap: wrap;
  }
}

میڈیا کے استفسار کے لیے نیچے دیے گئے کوڈ پر ایک نظر ڈالیں۔

@media (width < 450px) {
  nav {
    background: green;
  }
}

اوپر میڈیا کے استفسار میں nav عنصر میں green پس منظر کا رنگ جب اسکرین کا سائز اس سے چھوٹا ہو۔ 450px.

کنٹینر کے سوالات کے لیے، عناصر ایک دوسرے کے اوپر ڈھیر ہوتے ہیں جب: nav عنصر کا سائز اس سے کم ہے: 450px.

تو فرق یہ ہے کہ میڈیا کے سوالات کو مدنظر رکھا جاتا ہے۔ مکمل سکرین کا سائز کنٹینر کے سوالات درج ذیل کو مدنظر رکھتے ہیں: بنیادی عنصر کا سائز.

ہاں:

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

میمو: کنٹینر اسکرول حالت براؤزر سپورٹ بہت اچھا نہیں ہے۔ اس کو فی الحال سفاری اور فائر فاکس کے علاوہ تمام براؤزرز میں سے تقریباً 71% کی حمایت حاصل ہے۔ پیداواری ماحول میں استعمال کرتے وقت احتیاط برتیں۔

سکرول کے قابل سوالات

سکرول ایبل سوالات کا استعمال پیرنٹ ایلیمنٹ اسکرول بار کے رویے کو چیک کرنے کے لیے کیا جاتا ہے۔ اگر پیرنٹ عنصر میں اسکرول کا رویہ ہے تو اسکرولنگ کے لیے کنٹینر کے سوالات لاگو ہوتے ہیں۔

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

کسی عنصر کو سکرول کے قابل بنانے کے لیے، ایک مقررہ اونچائی سیٹ کریں اور اسے لگائیں۔ overflow. اس کی وجہ سے جب بھی مواد متعین جگہ سے تجاوز کر جائے گا تو اسکرول بارز ظاہر ہوں گے۔

ہاں:

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

پہلے ایچ ٹی ایم ایل container-type کی scroll-state:

html {
  container-type: scroll-state;
}

مندرجات کے سیکشن کو اسٹائل کریں اور اسے صفحہ کے اوپری دائیں طرف رکھیں۔

.toc {
  position: fixed;
  top: 5rem;
  left:90%;
  align-self: start;
  opacity: 0;
}

میں نے مندرجات کا ٹیبل صفحہ کے دائیں جانب رکھا اور اسے اسکرین کے اوپری حصے پر اس طرح لنگر انداز کیا: 5rem. بھی opacity کی 0.

اب ہمیں یہ یقینی بنانا ہوگا کہ ہم کنٹینر اسکرول بار کو اس کنٹینر کے اوپری حصے تک اسکرول کر سکتے ہیں۔ اگر درست ہے تو، مندرجات کے جدول کو چھپائیں۔

@container scroll-state(scrollable: top) {
  .toc {
    transition: opacity 0.4s linear;
    opacity: 1;  
  }
}

میں نے کنٹینر کے سوال کی وضاحت کی اور پھر اس کے بعد اسکرول اسٹیٹ کی ورڈ کو شامل کیا۔ چیک کرتا ہے کہ آیا بنیادی عنصر کا اسکرول بار قابل سکرول ہے۔

استعمال کریں scrollable اسکرول سمت کی وضاحت کرتا ہے۔ پر سیٹ کریں top جانچ کریں کہ آیا کنٹینر مندرجہ ذیل ترتیب دے کر اوپر کی طرف سکرول کر سکتا ہے: bottom جانچ کریں کہ آیا آپ نیچے سکرول کر سکتے ہیں۔

اگر آپ کے پاس اسکرول کرنے کی گنجائش ہے، تو آپ کو مندرجات کا جدول نظر آئے گا، لیکن اگر آپ اوپر اسکرول نہیں کر سکتے ہیں، تو آپ دیکھیں گے کہ مندرجات کا جدول پوشیدہ ہے۔

بھی y تصریح کار جو کنٹینر کے اوپر اور نیچے اسکرول کی سمتیں بتاتے ہیں۔

ہاں:

آپ مثال میں دیکھ سکتے ہیں کہ مندرجات کا جدول ہمیشہ سکرین پر نظر آتا ہے کیونکہ اسکرول بار دونوں سمتوں (اوپر اور نیچے) میں اسکرول کر سکتا ہے۔

سوال ختم کر دیا گیا

ایک ٹوٹا ہوا استفسار ان عناصر کی جانچ کے لیے استعمال کیا جاتا ہے جن میں: position کی sticky جب کوئی عنصر صفحہ پر پھنس جائے تو طرزیں لگائیں۔

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

ہاں:

ہم ایک سادہ نیوبار ڈیزائن کریں گے جو روٹ کو تبدیل کرتا ہے۔ box-shadow جب یہ اسکرین کے اوپری حصے پر رک جاتا ہے۔

یہاں ہم ریپر عنصر کو ترتیب دیتے ہیں جسے ہم لپیٹ رہے ہیں۔ nav اسے کنٹینر استفسار بنائیں position کی sticky آپ ٹریک کر سکتے ہیں کہ آیا یہ اسکرین کے اوپری حصے پر پھنس گیا ہے۔

header {
  position: sticky;
  top: 0rem;
  container-type: scroll-state;
}

پھر آپ اس کی تعریف کر سکتے ہیں۔ @container جب کوئی عنصر اسکرین پر رک جاتا ہے تو اسے چلانے کے لیے:

@container scroll-state(stuck:top) {
  nav {
    box-shadow:
      0 14px 28px rgba(0, 0, 0, 0.55),
      0 1px 0 rgba(255, 255, 255, 0.06) inset;
    background-color: #0a0a0a;
  }
}

آپ نے درج ذیل کی تصدیق کی ہے۔ scroll-state ایک عمل انجام دیتا ہے اور پھر چیک کرتا ہے کہ آیا عنصر قوسین کے اندر ہے۔ position: sticky ہے پینٹ یہ صفحہ کے اوپری حصے میں ہے۔ اگر سچ ہے تو پس منظر کا رنگ ہے۔ nav تبدیلی اور box-shadow شامل کیا جائے گا.

حتمی نتیجہ اس طرح ہونا چاہئے:

بنیادی طور پر nav نہیں ہے box-shadowلیکن اگر میں سکرول کرتا ہوں۔ nav عنصر صفحہ کے اوپری حصے میں پھنس گیا ہے۔ box-shadow اور دیگر قوانین منسلک ہیں۔ @container استفسار کی تعریف اس پر لاگو ہوتی ہے: nav عنصر

ختم

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

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

کنٹینر کے سوالات میں اعلی براؤزر کی حمایت حاصل ہے، فی الحال تمام بڑے براؤزرز پر 95% تعاون یافتہ ہے۔