استعلامات الحاوية وتعشيش CSS

اجعل مكوّناتك متجاوبة مع حاويتها بدلًا من المنفذ، ونظّم أوراق أنماطك بالتعشيش الأصيل.

10 دقيقة · 3 أسئلة

استعلامات الوسائط تقيس المنفذ: بطاقة معروضة في شريط جانبي ضيق وفي شبكة رئيسية معًا لا تستطيع التكيّف بشكل صحيح بها، لأن عرض الشاشة نفسه يقابل سياقين مختلفين. استعلامات الحاوية تحلّ هذا الفصل: يستعلم المكوّن عن حجم حاويته. الشرط المسبق: عيّن حاوية صراحةً بـ container-type (inline-size لقياس المحور الأفقي فقط، وهي الحالة الشائعة)، مع تسميتها اختياريًا عبر container-name.

.sidebar {
  container-type: inline-size;
  container-name: sidebar;
}

@container sidebar (min-width: 400px) {
  .widget {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 12px;
  }
}

وحدات الحاوية تكمل الصورة: 1cqi تساوي 1% من الحجم السطري للحاوية المستعلَم عنها (وتوجد أيضًا cqw وcqh وcqb وcqmin وcqmax). ودمجها مع clamp() ينتج طباعة مرنة لكل مكوّن: البطاقة نفسها تحصل على عنوان متناسب مع عمودها، أينما وُضعت.

.card-slot {
  container-type: inline-size;
}

.card h2 {
  font-size: clamp(1rem, 5cqi, 1.75rem);
}

@container (max-width: 300px) {
  .card .meta {
    display: none;
  }
}

‏التعشيش الأصيل يجلب أخيرًا التعشيش دون معالج مسبق. المحدِّد & يشير إلى سياق الأب؛ واستعلامات الوسائط و@container تتعشّش مباشرةً داخل القاعدة. فرق حاسم عن Sass: يُعامَل الأب المُعشَّش كأنه ملفوف في :is(). نتيجتان: خصوصية الأب هي خصوصية أقوى محدِّداته إن كان قائمة، و& .child لا يجري ربط سلاسل نصية - فنمط Sass ‏&__element لتوليد أسماء BEM غير موجود أصيلًا.

.menu {
  display: flex;
  gap: 8px;

  & > li {
    list-style: none;

    &:hover {
      background: #f3f4f6;
    }
  }

  @media (min-width: 768px) {
    gap: 16px;
  }
}

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. لماذا يُفضَّل استعلام الحاوية على استعلام الوسائط لبطاقة قابلة لإعادة الاستخدام؟
   • تقييمه أسرع بالنسبة لمحرك التصيير
   • يتفاعل مع حجم حاوية البطاقة، وهي نفسها على أي شاشة يكون فيها العمود ضيقًا
   • يعمل دون تصريح أي شرط مسبق في CSS
   • يستطيع الاستعلام عن ارتفاع المنفذ إضافةً إلى عرضه
2. بماذا تقابل 5cqi؟
   • 5% من عرض المنفذ
   • 5% من الحجم السطري للحاوية المستعلَم عنها
   • 5 أضعاف حجم خط الحاوية
3. بماذا يختلف التعشيش الأصيل عن تعشيش Sass؟
   • التعشيش الأصيل يمنع تعشيش استعلامات الوسائط داخل القاعدة
   • التعشيش الأصيل يعامل الأب كأنه ملفوف في :is() ولا يسمح بالربط بنمط &__element
   • التعشيش الأصيل يتطلب معالجًا مسبقًا لتصريف الرمز &
   • التعشيش الأصيل يقصر التعشيش على مستوى واحد