الأيام الأولى من استعلامات نمط الحاوية

ما زلنا في أيامنا الأولى مع استعلامات الحاوية. من المبكر جدًا الحصول على دعم واسع للمتصفح ، لكن Chromium يدعمه بالفعل ، Safari بدأ دعمه في الإصدار 16، ومن المفترض أن يكون Firefox ليس بعيدا.

عادةً ما تقارن معظم محادثات الأيام الأولى التي تدور حول استعلامات الحاوية بناء الجملة باستعلامات الوسائط.

/* 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 عنصر. حلو!

ولكن بعد الاستماع إلى CSS Podcast الحلقة 59وطعن أونا وآدم في مستقبل استفسارات الحاوية: استعلامات النمط! مسودة العمل الحالية لمواصفات المستوى 3 لوحدة احتواء CSS يحدد استعلامات نمط الحاوية:

A استعلام عن نمط الحاوية يسمح بالاستعلام عن القيم المحسوبة ل حاوية الاستعلام. إنه مزيج منطقي من الفرد ميزات النمط () أن كل استعلام يمثل خاصية واحدة محددة لحاوية الاستعلام.

لكن لا توجد أمثلة على النحو حتى الآن - فقط وصف موجز:

بناء جملة أ  هو نفسه بالنسبة لـ إعلان، وكان الاستعلام الخاص به صحيحًا إذا كانت القيمة المحسوبة للخاصية المعينة في حاوية الاستعلام تطابق القيمة المحددة (والتي يتم حسابها أيضًا فيما يتعلق بحاوية الاستعلام) ، وغير معروف إذا كانت الخاصية أو قيمتها غير صالحة أو غير مدعومة ، وخطأ بخلاف ذلك . الجمع المنطقي بين التركيب المنطقي والمنطق ميزات النمط الى استعلام عن النمط هو نفسه ل استعلامات ميزة CSS. (انظر supports.)

لذا ، نعم ، بالنظر إلى الوقت الذي يجب أن نتوقع فيه تنفيذ شيء مثل هذا:

.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. يمكننا delcare مثل ذلك:

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

…لكن جميع استعلامات الحاوية style استعلامات بشكل افتراضي. نحن سوف. على الأقل كما هي عليه اليوم. ميريام سوزان لديها لطيفة الخطوط العريضة للمشكلات المحتملة التي قد تظهر مع ذلك.

أين يمكن أن يكون الاستعلام عن أنماط الحاوية مفيدًا؟ أنا لا أعرف حتى الآن! لكن عقلي يذهب إلى عدة أماكن:

• قيم الخصائص المخصصة: لقد رأينا خصائص مخصصة مستخدمة مثل مؤشرات الحالة ، مثل طريقة التبديل الجاف آنا غطت فترة إلى الوراء. تتغير القيمة وكذلك الأنماط.
• نهج الوضع المظلم البديل: بدلاً من استناد كل شيء إلى تغيير فئة الجسم الذي يعيد تعيين قيم الخصائص المخصصة ، ربما يمكننا تغيير لوحة ألوان كاملة إذا تغير لون خلفية الجسم ، على سبيل المثال.
• شروط استعلام أكثر تعقيدًا: مثل ، على سبيل المثال ، نريد تطبيق الأنماط عندما يكون ملف size و style استيفاء شروط الحاوية.

ذكر Una أيضًا في CSS Podcast أن استعلامات نمط الحاوية يمكن أن تساعد في منع بعض مواقف التصميم المحرجة ، مثل ما إذا كان لدينا نص مائل بخط مائل بالفعل blockquote:

blockquote {
  container-name: quote;
}

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