21 أغسطس 2025العربية

اكتشف استعلامات حاويات CSS، التطور التالي في التصميم المتجاوب. تعلم كيفية إنشاء مكونات قابلة للتكيف بناءً على حجم الحاوية، وليس فقط حجم إطار العرض.

استعلامات حاويات CSS: إحداث ثورة في التصميم المتجاوب القائم على العناصر

كان التصميم المتجاوب حجر الزاوية في تطوير الويب لأكثر من عقد من الزمان. تقليدياً، اعتمدنا على استعلامات الوسائط لتكييف تصميماتنا بناءً على حجم إطار العرض. ومع ذلك، يمكن أن يبدو هذا النهج في بعض الأحيان مقيداً، خاصة عند التعامل مع التصميمات المعقدة القائمة على المكونات. أدخل استعلامات حاويات CSS - ميزة جديدة قوية تسمح للمكونات بالتكيف بناءً على حجم العنصر الذي تحتوي عليه، وليس فقط إطار العرض.

ما هي استعلامات حاويات CSS؟

تغير استعلامات الحاوية قواعد اللعبة لأنها تمكن من التصميم المتجاوب القائم على العناصر. بدلاً من السؤال "ما هو حجم الشاشة؟"، يمكنك أن تسأل "كم مساحة يتوفر لهذا المكون؟" هذا يفتح عالماً من الإمكانيات لإنشاء مكونات قابلة لإعادة الاستخدام وقابلة للتكيف حقاً.

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

لماذا تستخدم استعلامات الحاويات؟

توفر استعلامات الحاويات العديد من المزايا الرئيسية على استعلامات الوسائط التقليدية:

تحسين إمكانية إعادة استخدام المكونات: قم بإنشاء مكونات تتكيف بسلاسة مع التخطيطات المختلفة دون الحاجة إلى منطق استعلام الوسائط المعقد.
تبسيط التعليمات البرمجية: قلل من كمية CSS المطلوبة عن طريق تضمين السلوك المتجاوب داخل المكون نفسه.
تحسين إمكانية الصيانة: اجعل من السهل تحديث قاعدة التعليمات البرمجية الخاصة بك وصيانتها عن طريق عزل المنطق المتجاوب للمكونات الفردية.
تصميم أكثر بديهية: صمم المكونات التي تستجيب لبيئتها المباشرة، مما يؤدي إلى تجربة مستخدم أكثر طبيعية ويمكن التنبؤ بها.
مرونة أكبر: حقق تصميمات متجاوبة أكثر تعقيداً ودقة يصعب أو يستحيل تحقيقها باستخدام استعلامات الوسائط وحدها.

كيفية تنفيذ استعلامات حاويات CSS

دعنا نتعمق في الجوانب العملية لاستخدام استعلامات الحاويات. الخطوة الأولى هي الإعلان عن حاوية. يمكنك القيام بذلك باستخدام خاصية container-type على العنصر الأصل:

1. تحديد حاوية

تقبل خاصية container-type عدة قيم:

size: ستستجيب استعلامات الحاوية لكل من الأبعاد المضمنة والكتلية للحاوية.
inline-size: ستستجيب استعلامات الحاوية فقط للبعد المضمن (العرض في أوضاع الكتابة الأفقية) للحاوية. هذا هو الخيار الأكثر شيوعاً وغالباً ما يكون الأكثر فائدة.
block-size: ستستجيب استعلامات الحاوية فقط للبعد الكتلي (الارتفاع في أوضاع الكتابة الأفقية) للحاوية.
normal: العنصر ليس حاوية استعلام. هذه هي القيمة الافتراضية.
style: ستستجيب استعلامات الحاوية لاستعلامات النمط واستعلامات اسم الحاوية (المغطاة لاحقاً)، مما يسمح لك بالاستعلام عن الخصائص المخصصة المحددة في الحاوية.

فيما يلي مثال لتحديد حاوية تستجيب لحجمها المضمن:


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

يمكنك أيضاً استخدام خاصية container المختصرة لتحديد كل من container-type و container-name (التي سنناقشها لاحقاً) في إعلان واحد:


.card-container {
  container: card / inline-size;
}

في هذه الحالة، 'card' هو اسم الحاوية.

2. كتابة استعلامات الحاويات

بمجرد تحديد حاوية، يمكنك استخدام القاعدة @container لكتابة استعلاماتك. بناء الجملة مشابه لاستعلامات الوسائط، ولكن بدلاً من استهداف أبعاد إطار العرض، فأنت تستهدف أبعاد الحاوية:


@container card (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card__image {
    width: 50%;
  }
  .card__content {
    width: 50%;
  }
}

في هذا المثال، نستهدف الحاوية "card" ونطبق الأنماط على عناصر .card و .card__image و .card__content عندما يكون عرض الحاوية 400 بكسل على الأقل. لاحظ الـ `card` قبل `(min-width: 400px)`. هذا أمر بالغ الأهمية عندما تكون قد سميت الحاوية الخاصة بك باستخدام `container-name` أو خاصية `container` المختصرة.

إذا لم تسمِ الحاوية الخاصة بك، يمكنك حذف اسم الحاوية:


@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card__image {
    width: 50%;
  }
  .card__content {
    width: 50%;
  }
}

يمكنك استخدام نفس مجموعة ميزات الوسائط المتوفرة في استعلامات الوسائط، مثل min-width و max-width و min-height و max-height و orientation.

3. أسماء الحاويات

يمكن أن يكون تسمية الحاويات مفيداً، خاصة عند التعامل مع الحاويات المتداخلة أو التخطيطات المعقدة. يمكنك تعيين اسم إلى حاوية باستخدام خاصية container-name:


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

بعد ذلك، في استعلامات الحاويات الخاصة بك، يمكنك استهداف الحاوية باسمها:


@container card (min-width: 400px) {
  /* أنماط للحاوية 'card' */
}

4. استعلامات النمط

تتيح لك استعلامات نمط الحاوية التفاعل مع نمط الحاوية الخاصة بك بدلاً من حجمها. هذا قوي بشكل خاص عند دمجه مع الخصائص المخصصة. أولاً، يجب عليك تحديد الحاوية الخاصة بك باستخدام container-type: style:


.component-container {
  container-type: style;
}

ثم يمكنك استخدام @container style(--theme: dark) للاستعلام عن قيمة الخاصية المخصصة --theme:


.component-container {
  --theme: light;
}

@container style(--theme: dark) {
  .component {
    background-color: black;
    color: white;
  }
}

يسمح هذا لمكوناتك بالتكيف بناءً على تكوين يتم تعيينه من خلال CSS بدلاً من حجم إطار العرض. هذا يفتح إمكانيات رائعة للتنسيق والأسلوب الديناميكي.

أمثلة عملية لاستعلامات الحاويات

لنلقِ نظرة على بعض الأمثلة الملموسة لكيفية استخدام استعلامات الحاويات في سيناريوهات العالم الحقيقي:

المثال 1: مكون البطاقة

تخيل مكون بطاقة يعرض معلومات حول المنتج. في حاوية ضيقة، قد نرغب في تجميع الصورة والمحتوى عمودياً. في حاوية أوسع، يمكننا عرضها جنباً إلى جنب.

HTML:


<div class="card-container">
  <div class="card">
    <img class="card__image" src="product.jpg" alt="Product Image">
    <div class="card__content">
      <h3 class="card__title">عنوان المنتج</h3>
      <p class="card__description">وصف المنتج يذهب هنا.</p>
      <a href="#" class="card__link">تعرف على المزيد</a>
    </div>
  </div>
</div>

CSS:


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

.card {
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  padding: 16px;
}

.card__image {
  width: 100%;
  margin-bottom: 16px;
}

.card__content {
  width: 100%;
}

@container (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card__image {
    width: 50%;
    margin-bottom: 0;
  }
  .card__content {
    width: 50%;
  }
}

في هذا المثال، ستعرض البطاقة في البداية الصورة والمحتوى مكدسين عمودياً. عندما يصل عرض الحاوية إلى 400 بكسل، ستتحول البطاقة إلى تخطيط أفقي.

المثال 2: قائمة التنقل

ضع في اعتبارك قائمة تنقل تحتاج إلى التكيف بناءً على المساحة المتاحة. في حاوية ضيقة (مثل الشريط الجانبي للجوال)، قد نرغب في عرض عناصر القائمة في قائمة رأسية. في حاوية أوسع (مثل رأس سطح المكتب)، يمكننا عرضها أفقياً.

HTML:


<nav class="nav-container">
  <ul class="nav">
    <li class="nav__item"><a href="#">الصفحة الرئيسية</a></li>
    <li class="nav__item"><a href="#">المنتجات</a></li>
    <li class="nav__item"><a href="#">الخدمات</a></li>
    <li class="nav__item"><a href="#">عنا</a></li>
    <li class="nav__item"><a href="#">اتصل</a></li>
  </ul>
</nav>

CSS:


.nav-container {
  container-type: inline-size;
}

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__item {
  margin-bottom: 8px;
}

.nav__item a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
}

@container (min-width: 600px) {
  .nav {
    display: flex;
  }
  .nav__item {
    margin-right: 16px;
    margin-bottom: 0;
  }
  .nav__item a {
    display: inline-block;
  }
}

في هذا المثال، ستعرض قائمة التنقل في البداية العناصر في قائمة رأسية. عندما يصل عرض الحاوية إلى 600 بكسل، ستتحول القائمة إلى تخطيط أفقي.

المثال 3: تخطيط المقال مع صورة مميزة

تخيل تخطيط مقال يحتاج إلى التكيف اعتماداً على المكان الذي يتم فيه وضعه. إذا كان في قسم معاينة صغير، يجب أن تكون الصورة فوق النص. إذا كان المقال الرئيسي، يمكن أن تكون الصورة على الجانب.

HTML


<article class="article-container">
    <div class="article">
        <img src="article-image.jpg" alt="Article Image" class="article-image">
        <div class="article-content">
            <h2>عنوان المقال</h2>
            <p>لوريم إيبسوم دولور سيت أميت، كونسيكتيتور أدايبايسينغ إليت...</p>
        </div>
    </div>
</article>

CSS


.article-container {
    container-type: inline-size;
}

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

.article-image {
    width: 100%;
    margin-bottom: 10px;
}

.article-content {
    width: 100%;
}

@container (min-width: 768px) {
    .article {
        flex-direction: row;
    }

    .article-image {
        width: 40%;
        margin-right: 20px;
        margin-bottom: 0;
    }

    .article-content {
        width: 60%;
    }
}

دعم المتصفح

دعم المتصفح لاستعلامات الحاويات ممتاز الآن عبر المتصفحات الحديثة، بما في ذلك Chrome و Firefox و Safari و Edge. من المهم التحقق من Can I Use للحصول على أحدث معلومات دعم المتصفح، حيث يمكن أن تتطور الميزات وتفاصيل التنفيذ.

اعتبارات وأفضل الممارسات

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

استعلامات الحاويات مقابل استعلامات الوسائط: متى تستخدم أي منهما؟

في حين أن استعلامات الحاويات توفر بديلاً قوياً لاستعلامات الوسائط، من المهم أن تفهم متى يكون كل نهج هو الأنسب.

استعلامات الوسائط: استخدم استعلامات الوسائط عندما تحتاج إلى تكييف تصميمك بناءً على حجم الشاشة الإجمالي أو خصائص الجهاز (مثل الاتجاه والدقة). تعتبر استعلامات الوسائط مثالية لإجراء تغييرات واسعة على تصميمك لضمان إمكانية استخدامه على أجهزة مختلفة.
استعلامات الحاويات: استخدم استعلامات الحاويات عندما تحتاج إلى تكييف المكونات الفردية بناءً على المساحة المتاحة لها. تعتبر استعلامات الحاويات مثالية لإنشاء مكونات قابلة لإعادة الاستخدام يمكنها التكيف بسلاسة مع سياقات مختلفة داخل تطبيقك.

في كثير من الحالات، من المحتمل أن تستخدم مجموعة من كل من استعلامات الوسائط واستعلامات الحاويات. استخدم استعلامات الوسائط لإنشاء التصميم العام لتطبيقك، ثم استخدم استعلامات الحاويات لضبط مظهر وسلوك المكونات الفردية داخل هذا التصميم.

مستقبل التصميم المتجاوب

تمثل استعلامات حاويات CSS خطوة مهمة إلى الأمام في تطور التصميم المتجاوب. من خلال تمكين الاستجابة القائمة على العناصر، فإنها تمكن المطورين من إنشاء مكونات أكثر مرونة وقابلة لإعادة الاستخدام وقابلة للصيانة. مع استمرار تحسين دعم المتصفح، من المتوقع أن تصبح استعلامات الحاويات أداة أساسية في ترسانة كل مطور ويب.

الاعتبارات العالمية

عند تنفيذ استعلامات الحاويات لجمهور عالمي، ضع في الاعتبار ما يلي:

اتجاه النص: تأكد من أن استعلامات الحاويات تعمل بشكل صحيح مع اتجاهات النص من اليسار إلى اليمين (LTR) ومن اليمين إلى اليسار (RTL). استخدم الخصائص المنطقية مثل inline-start و inline-end بدلاً من الخصائص المادية مثل left و right.
أحجام الخطوط: قد تتطلب اللغات المختلفة أحجام خطوط مختلفة للحصول على أفضل قابلية للقراءة. استخدم أحجام خطوط نسبية (على سبيل المثال، em و rem) لضمان توسيع نطاق النص الخاص بك بشكل مناسب.
طول المحتوى: قد تتطلب بعض اللغات مساحة أكبر للتعبير عن نفس المعلومات مثل اللغة الإنجليزية. تأكد من اختبار تصميماتك بلغات مختلفة للتأكد من أن مكوناتك يمكنها استيعاب أطوال محتوى مختلفة.
التقاليد الثقافية: ضع في اعتبارك التقاليد الثقافية عند تصميم مكوناتك. على سبيل المثال، قد يختلف موضع الصور والنص عبر الثقافات المختلفة.

الخلاصة

تعد استعلامات حاويات CSS أداة قوية لبناء تطبيقات ويب متجاوبة وقابلة للتكيف حقاً. من خلال تبني التصميم المتجاوب القائم على العناصر، يمكنك إنشاء مكونات تتكيف بسلاسة مع السياقات المختلفة، وتبسيط التعليمات البرمجية الخاصة بك، وتحسين تجربة المستخدم بشكل عام. مع استمرار نمو دعم المتصفح، من المتوقع أن تصبح استعلامات الحاويات جزءاً أساسياً من تطوير الويب الحديث. احتضن هذه التكنولوجيا، وجرّب إمكانياتها، وافتح مستوى جديداً من المرونة في تصميماتك المتجاوبة. يتيح هذا النهج إمكانية أفضل لإعادة استخدام المكونات، وإمكانية الصيانة، وعملية تصميم أكثر سهولة، مما يجعلها أداة لا تقدر بثمن لمطوري الواجهة الأمامية في جميع أنحاء العالم. يشجع الانتقال إلى استعلامات الحاويات على اتباع نهج أكثر تركيزاً على المكونات في التصميم، مما يؤدي إلى تجارب ويب أكثر قوة وقابلية للتكيف للمستخدمين في جميع أنحاء العالم.