کنٹینر اسٹائل کے سوالات میں گہری کھدائی کرنا

میں نے کچھ لکھا کنٹینر طرز کے سوالات پر ابتدائی خیالات تھوڑی دیر پہلے. ابھی ابتدائی دن ہیں۔ وہ پہلے سے ہی میں بیان کر رہے ہیں CSS کنٹینمنٹ ماڈیول لیول 1 تفصیلات (فی الحال ایڈیٹر کے مسودے کی حیثیت میں) لیکن ابھی بھی کچھ شاندار بحثیں ہو رہی ہیں۔

بنیادی خیال یہ ہے کہ ہم ایک کنٹینر کی وضاحت کر سکتے ہیں اور پھر اس کے کمپیوٹنگ اسٹائل کی بنیاد پر اس کی اولاد پر مشروط طور پر سٹائل لاگو کر سکتے ہیں۔

@container ?  {
  /* conditional styles */
}

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

em, i, q {
  font-style: italic; /* default UA behavior */
}

/* When the container's font-style is italic, remove italics from these elements. */
@container style(font-style: italic) {
  em, i, q {
    font-style: normal;
  }
}

عام خیال یہی ہے۔ لیکن اگر آپ کو یہ معلوم نہیں تھا تو، مریم سوزان، جو قیاس کی ایڈیٹر ہیں، ایک جاری اور مکمل سیٹ رکھتی ہیں۔ کنٹینر طرز کے سوالات پر ذاتی نوٹس جو عوامی طور پر دستیاب ہے۔ اسے دوسرے دن اپ ڈیٹ کیا گیا تھا اور میں نے وہاں کچھ وقت گزارا تھا کہ میں نے طرز کے سوالات کے مزید اہم پہلوؤں کے گرد اپنا سر لپیٹنے کی کوشش کی۔ یہ غیر سرکاری چیز ہے، لیکن میں نے سوچا کہ میں کچھ ایسی چیزیں لکھوں گا جو مجھ سے الگ تھیں۔ کسے پتا؟ شاید یہ وہ چیز ہے جس کا ہم آخر کار انتظار کر سکتے ہیں!

ہر عنصر ایک سٹائل کنٹینر ہے

ہمیں واضح طور پر تفویض کرنے کی بھی ضرورت نہیں ہے۔ container-name or container-type اسٹائل کنٹینر کی وضاحت کرنا کیونکہ ہر چیز بطور ڈیفالٹ اسٹائل کنٹینر ہے۔

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

مجھے یہ پسند ہے. استفسار کے لیے یہ بہت CSS-y ہے کہ وہ میچ تلاش کرے، پھر اس وقت تک بلبلا کرنا جاری رکھیں جب تک کہ اسے مماثل حالت نہ مل جائے۔

میرے چھوٹے دماغ کے لیے یہ سمجھنا مشکل تھا کہ ہم اسٹائل پر مبنی ایک مضمر کنٹینر سے کیوں بچ سکتے ہیں لیکن اتنا زیادہ نہیں جب ہم جہتی سوالات سے نمٹ رہے ہوں، جیسے size اور inline-size. مریم نے اسے اچھی طرح سے بیان کیا:

جہتی سوالات کے لیے سی ایس ایس کی ضرورت ہوتی ہے۔ کنٹینمنٹ۔ کنٹینر کے سائز، ترتیب اور انداز پر تاکہ لے آؤٹ لوپس کو روکا جا سکے۔ کنٹینمنٹ بڑے پیمانے پر لاگو کرنے کے لئے ایک ناگوار چیز ہے، لہذا یہ ضروری تھا کہ مصنفین کو اس بات پر محتاط کنٹرول حاصل ہو کہ کون سے عناصر سائز کے کنٹینرز ہیں (یا نہیں ہیں)۔

طرز پر مبنی سوالات کی ایک ہی حد نہیں ہے۔ CSS میں پہلے سے ہی کوئی طریقہ نہیں ہے کہ نسلی طرزوں کا کسی آباؤ اجداد کے حسابی انداز پر اثر پڑے۔ لہذا کسی قسم کی روک تھام کی ضرورت نہیں ہے، اور عنصر کے طور پر قائم کرنے میں کوئی جارحانہ یا غیر متوقع ضمنی اثرات نہیں ہیں طرز استفسار کنٹینر.

(زور میرا)

یہ سب نتائج کی طرف آتا ہے - جس میں سے جہاں تک ہر چیز باکس سے باہر ایک اسٹائل استفسار کنٹینر ہونے کی وجہ سے کوئی نہیں ہے۔

• اگر ایک کنٹینر پایا جاتا ہے: اس کنٹینر کے خلاف حالات حل کیے جاتے ہیں۔
• اگر ایک سے زیادہ کنٹینرز آپس میں ملتے ہیں: قریبی رشتہ دار کنٹینر کو ترجیح دی جاتی ہے۔
• اگر کوئی مماثلت نہیں ملتی ہے: unknown لوٹا

وہی ہے۔ باقی سی ایس ایس کی طرح "معاف کرنے والا" جذبہ.

ایک کنٹینر جہتی اور طرز کے سوالات کی حمایت کر سکتا ہے۔

ہم کہتے ہیں کہ ہم بغیر کسی واضح انداز کے سوال کی وضاحت کرنا چاہتے ہیں۔ container-name:

@container style(font-style: italic) {
  em {
    font-style: normal;
  }
}

یہ کام کرتا ہے کیونکہ تمام عناصر سٹائل کنٹینرز ہیں، کوئی بات نہیں container-type. یہی وہ چیز ہے جو ہمیں واضح طور پر اسٹائل سے استفسار کرنے اور قریب ترین میچ پر بھروسہ کرنے کی اجازت دیتی ہے۔ اور یہ بالکل ٹھیک ہے کیونکہ، دوبارہ، اسٹائل کنٹینرز قائم کرتے وقت کوئی منفی اثرات نہیں ہوتے۔

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

.card-container {
  container: card / inline-size; /* implictly a style query container as well */
}

ایک کنٹینر کو استفسار کرنے سے خارج کرنا

شاید ہم نہیں چاہتے کہ ایک کنٹینر ملاپ کے عمل میں حصہ لے۔ اسی جگہ پر سیٹ کرنا ممکن ہو سکتا ہے۔ container-type: none ایک عنصر پر.

.some-element {
  container-type: none;
}

واضح انداز کے استفسار کنٹینرز اس بات پر زیادہ کنٹرول پیش کرتے ہیں کہ کیا پوچھا جاتا ہے۔

اگر، کہتے ہیں، ہمیں ایک طرز استفسار لکھنا تھا۔ padding ، بہترین مماثل کنٹینر کا تعین کرنے کا کوئی قابل اعتماد طریقہ نہیں ہے، قطع نظر اس کے کہ ہم کسی واضح نام والے کنٹینر کے ساتھ کام کر رہے ہیں یا قریب ترین براہ راست والدین کے ساتھ۔ اس لیے کہ padding وراثت میں ملنے والی جائیداد نہیں ہے۔

لہذا، ان صورتوں میں، ہمیں استعمال کرنا چاہئے container-name براؤزر کو واضح طور پر مطلع کرنے کے لیے کہ وہ کن کنٹینرز سے کھینچ سکتے ہیں۔ ہم ایک کنٹینر کو متعدد واضح نام بھی دے سکتے ہیں تاکہ اسے مزید شرائط سے مماثل بنایا جا سکے۔

.card {
  container-name: card layout theme;
}

اوہ، اور container-name اختیاری اور کسی بھی تعداد کو قبول کرتا ہے۔ قابل اعتماد ایک کنٹینر کے نام! یہ اور بھی لچکدار ہے جب براؤزر کو مماثلت کی تلاش کے دوران انتخاب کرنے میں مدد کرنے کی بات آتی ہے۔

.theme {
  container-name: theme;
}
.grid {
  container-name: layout;
}
.card {
  container-name: card layout theme;
}

مجھے حیرت ہے کہ کیا ایک کنٹینر کے گزر جانے کی صورت میں اسے "فال بیک" بھی سمجھا جا سکتا ہے۔

طرز کے سوالات کو یکجا کیا جا سکتا ہے۔

۔ or اور and آپریٹرز ہمیں چیزوں کو خشک رکھنے کے لیے wueries کو یکجا کرنے کی اجازت دیتے ہیں:

@container bubble style(--arrow-position: start start) or style(--arrow-position: end start) {
  .bubble::after {
    border-block-end-color: inherit;
    inset-block-end: 100%;
  }
}

/* is the same as... */
@container bubble style(--arrow-position: start start) {
  /* etc. */
}
@container bubble style(--arrow-position: end start) {
  /* etc. */
}

ٹوگل کرنے کے انداز

کنٹینر اسٹائل کے سوالات اور کے درمیان تھوڑا سا اوورلیپ ہے۔ a کی وضاحت کے لیے کام کیا جا رہا ہے۔ toggle() تقریب. مثال کے طور پر، ہم دو کے ذریعے سائیکل کر سکتے ہیں font-style اقدار، کہتے ہیں italic اور normal:

em, i, q {
  font-style: italic;
}

@container style(font-style: italic) {
  em, i, q {
    font-style: normal;
  }
}

ٹھنڈا لیکن سی ایس ایس ٹوگلز کی تجویز سے پتہ چلتا ہے کہ toggle() فنکشن ایک آسان طریقہ ہوگا:

em, i, q {
  font-style: toggle(italic, normal);
}

لیکن بائنری استعمال کیس کے اس طرح سے باہر کچھ بھی ہے جہاں toggle() کم موزوں ہے. طرز کے سوالات، اگرچہ، جانے کے لئے اچھے ہیں. مریم تین مثالوں کی نشاندہی کرتی ہے جہاں طرز کے سوالات a سے زیادہ موزوں ہیں۔ toggle():

/* When font-style is italic, apply background color. */
/* Toggles can only handle one property at a time. */
@container style(font-style: italic) {
  em, i, q {
    background: lightpink;
  }
}

/* When font-style is italic and --color-mode equals light */
/* Toggles can only evaluate one condition at a time */
@container style((font-style: italic) and (--color-mode: light)) {
  em, i, q {
    background: lightpink;
  }
}

/* Apply the same query condition to multiple properties */
/* Toggles have to set each one individually as separate toggles */
@container style(font-style: italic) {
  em, i, q {
    /* clipped gradient text */
    background: var(--feature-gradient);
    background-clip: text;
    box-decoration-break: clone;
    color: transparent;
    text-shadow: none;
  }
}

طرز کے سوالات "کسٹم پراپرٹی ٹوگل ہیک" کو حل کرتے ہیں۔

نوٹ کریں کہ طرز کے سوالات اس کے لیے ایک رسمی حل ہیں۔ "CSS کسٹم پراپرٹی ٹوگل ٹرک". وہاں، ہم نے ایک خالی کسٹم پراپرٹی سیٹ کی ہے (--foo: ;) اور کوما سے الگ کردہ فال بیک طریقہ استعمال کریں جب کہ حسب ضرورت پراپرٹی کو حقیقی قدر پر سیٹ کیا جائے تو خصوصیات کو آن اور آف کرنے کے لیے "ٹوگل" کریں۔

button {
  --is-raised: ; /* off by default */
  
  border: 1px solid var(--is-raised, rgb(0 0 0 / 0.1));
  box-shadow: var(
    --is-raised,
    0 1px hsl(0 0% 100% / 0.8) inset,
    0 0.1em 0.1em -0.1em rgb(0 0 0 / 0.2)
  );
  text-shadow: var(--is-raised, 0 -1px 1px rgb(0 0 0 / 0.3));
}

button:active {
  box-shadow: var(--is-raised, 0 1px 0.2em black inset);
}

#foo {
  --is-raised: initial; /* turned on, all fallbacks take effect. */
}

یہ بہت اچھا ہے، یہ بھی بہت کام ہے کہ اسٹائل کنٹینر کے سوالات کو معمولی بنا دیتا ہے۔

طرز کے سوالات اور سی ایس ایس سے تیار کردہ مواد

کے ذریعہ تیار کردہ مواد کے لیے content کی پراپرٹی ::before اور ::after چھدم عناصر، مماثل کنٹینر وہ عنصر ہے جس پر مواد تیار ہوتا ہے۔

.bubble {
  --arrow-position: end end;
  container: bubble;
  border: medium solid green;
  position: relative;
}

.bubble::after {
  content: "";
  border: 1em solid transparent;
  position: absolute;
}

@container bubble style(--arrow-position: end end) {
  .bubble::after {
    border-block-start-color: inherit;
    inset-block-start: 100%;
    inset-inline-end: 1em;
  }
}

طرز کے سوالات اور ویب اجزاء

ہم ایک ویب جزو کو کنٹینر کے طور پر بیان کر سکتے ہیں اور انداز کے لحاظ سے اس سے استفسار کر سکتے ہیں۔ سب سے پہلے، ہمارے پاس ہے جزو کا:

  

    

      …
    
    

      …
      …
    
  

پھر ہم استعمال کرتے ہیں :host سیٹ کرنے کے لیے ایک کنٹینر کے طور پر سیوڈو عنصر container-name، ایک container-type، اور اس پر کچھ اعلی درجے کی صفات:

:host {
  container: media-host / inline-size;
  --media-location: before;
  --media-style: square;
  --theme: light;
}

کے اندر عناصر کے پیرامیٹرز سے استفسار کر سکتے ہیں۔ عنصر:

@container media-host style(--media-style: round) {
  [part='img'] {
    border-radius: 100%;
  }
}

اس کے بعد کیا ہے؟

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