کنٹینر اسٹائل کے سوالات کے ابتدائی دن

ہم ابھی بھی کنٹینر کے سوالات کے ساتھ ابتدائی دنوں میں ہیں۔ وسیع براؤزر سپورٹ کے لیے بہت جلد، لیکن Chromium پہلے ہی اس کی حمایت کرتا ہے، Safari ورژن 16 میں اس کی حمایت شروع کردی، اور فائر فاکس غالباً ہے۔ زیادہ پیچھے نہیں.

زیادہ تر ابتدائی دنوں کی گفتگو کنٹینر کے سوالات کے گرد گھومتی ہے عام طور پر نحو کا موازنہ میڈیا کے سوالات سے کرتی ہے۔

/* Stacked flex container */
.post {
  display: flex;
  flex-direction: column;
}

/* Change direction when viewport is 600px or wider */
@media(min-width: 600px) {
  .post {
    flex-direction: row;
  }
}

/* Define the container */
.posts {
  container-name: posts;
  container-type: inline-size;
}

.post {
  display: flex;
  flex-direction: column;
}

/* Query the container's min-width */
@container posts (min-width: 600px) {
  /* Change styles when `posts` container is 600px or wider */
  .post {
    flex-direction: row;
  }
}

ان دونوں کے لیے سوالات کر رہے ہیں۔ min-width: 600. فرق یہ ہے کہ میڈیا استفسار ان طرز کی تبدیلیوں کو متحرک کرنے کے لیے ویو پورٹ کی چوڑائی کو دیکھ رہا ہے جبکہ کنٹینر کا استفسار .posts عنصر پیاری!

لیکن سننے کے بعد سی ایس ایس پوڈ کاسٹ قسط 59، یونا اور ایڈم نے کنٹینر کے سوالات کے مستقبل کی طرف اشارہ کیا: طرز کے سوالات! CSS کنٹینمنٹ ماڈیول لیول 3 اسپیک کا موجودہ ورکنگ ڈرافٹ کنٹینر طرز کے سوالات کی وضاحت کرتا ہے۔:

A کنٹینر طرز استفسار استفسار کرنے کی اجازت دیتا ہے۔ شمار شدہ اقدار کی استفسار کنٹینر. یہ فرد کا ایک بولین مجموعہ ہے۔ سٹائل کی خصوصیات () کہ ہر ایک استفسار کنٹینر کی ایک واحد، مخصوص خاصیت کرتا ہے۔

لیکن ابھی تک نحو پر کوئی مثال نہیں - صرف ایک مختصر تفصیل:

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

تو، ہاں، وقت دیا جاتا ہے کہ ہمیں کچھ اس طرح سے نکالنے کی توقع کرنی چاہئے:

.posts {
  container-name: posts;
}

@container posts (background-color: #f8a100) {
  /* Change styles when `posts` container has an orange background */
  .post {
    color: #fff;
  }
}

یہ ایک خوبصورت گونگا مثال ہے. ایک بات قابل غور ہے کہ container-type اب کنٹینر پر مبنی نہیں ہے۔ inline-size لیکن بذریعہ style. ہم اسے اس طرح خوش کر سکتے ہیں:

.posts {
  container-name: posts;
  container-type: style; /* unnecessary */
}

… لیکن تمام کنٹینر سوالات ہیں style ڈیفالٹ کے طور پر سوالات. ٹھیک ہے. کم از کم جیسا کہ آج کھڑا ہے۔ مریم سوزین کے پاس اچھا ہے۔ ممکنہ مسائل کا خاکہ جو ظاہر ہو سکتا ہے۔ اس کے ساتھ.

کنٹینر کے انداز سے استفسار کرنا کہاں کام آ سکتا ہے؟ میں ابھی تک نہیں جانتا! لیکن میرا ذہن چند جگہوں پر جاتا ہے:

• حسب ضرورت جائیداد کی قدریں: ہم نے ریاستی اشارے کی طرح استعمال ہونے والی حسب ضرورت خصوصیات دیکھی ہیں، جیسے DRY-سوئچنگ کا طریقہ انا نے کچھ دیر پہلے احاطہ کیا۔. قدر بدلتی ہے، اور اسی طرح انداز بھی۔
• متبادل ڈارک موڈ اپروچ: اس سب کو باڈی کلاس تبدیلی پر مبنی کرنے کے بجائے جو حسب ضرورت پراپرٹی کی قدروں کو دوبارہ تفویض کرتا ہے، ہو سکتا ہے کہ ہم ایک پورے رنگ پیلیٹ کو تبدیل کر سکتے ہیں، اگر کہتے ہیں، جسمانی پس منظر کا رنگ بدل جاتا ہے۔
• مزید پیچیدہ استفسار کی شرائط: جیسے کہ، ہم سٹائل کو لاگو کرنا چاہتے ہیں جب size اور style کنٹینر کی شرائط پوری ہوتی ہیں۔

یونا نے سی ایس ایس پوڈ کاسٹ میں یہ بھی بتایا کہ کنٹینر اسٹائل کے سوالات کچھ عجیب و غریب اسٹائلنگ حالات کو روکنے میں مدد کرسکتے ہیں، جیسے کہ اگر ہمارے پاس پہلے سے ہی ترچھا متن میں ترچھا لکھا ہوا ہو۔ blockquote:

blockquote {
  container-name: quote;
}

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