إطلاق العنان للتصميم المتجاوب: دليل شامل لاستعلامات الحاويات في CSS

لسنوات، اعتمد تصميم الويب المتجاوب بشكل أساسي على استعلامات الوسائط (media queries)، مما سمح للمواقع بتكييف تخطيطها وتنسيقها بناءً على عرض وارتفاع إطار العرض. ورغم فعالية هذا النهج، إلا أنه قد يبدو محدودًا في بعض الأحيان، خاصة عند التعامل مع المكونات المعقدة التي تحتاج إلى التكيف بشكل مستقل عن حجم الشاشة الكلي. هنا يأتي دور استعلامات الحاويات في CSS (CSS Container Queries) – وهي أداة جديدة قوية تسمح للعناصر بالاستجابة لحجم العنصر الحاوي لها، بدلاً من إطار العرض نفسه. وهذا يطلق مستوى جديدًا من المرونة والدقة في التصميم المتجاوب.

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

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

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

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

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

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

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

يتضمن تنفيذ استعلامات الحاويات في CSS خطوتين رئيسيتين: تحديد الحاوية وكتابة الاستعلامات.

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

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

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

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

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

هذا الكود يعلن أن العنصر الذي يحمل الفئة .card-container هو حاوية. نحن نحدد inline-size للسماح بالاستعلامات بناءً على عرض الحاوية. وقد أعطيناه أيضًا الاسم cardContainer.

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

بمجرد تحديد الحاوية، يمكنك كتابة استعلامات الحاوية باستخدام قاعدة @container. الصيغة مشابهة لاستعلامات الوسائط:

@container cardContainer (min-width: 400px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

يطبق هذا الاستعلام التنسيقات الموجودة داخل الأقواس المعقوفة فقط عندما يكون عرض الحاوية المسماة cardContainer بحد أدنى 400 بكسل. إنه يستهدف العنصر .card (يفترض أنه ابن للعنصر .card-container) ويعدل تخطيطه. إذا كانت الحاوية أضيق من 400 بكسل، فلن يتم تطبيق هذه التنسيقات.

الصيغة المختصرة: يمكنك أيضًا استخدام النسخة المختصرة من قاعدة `@container` عندما لا تحتاج إلى تحديد اسم للحاوية:

@container (min-width: 400px) {
  /* تنسيقات تُطبق عندما يكون عرض الحاوية 400 بكسل على الأقل */
}

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

لنلقِ نظرة على بعض الأمثلة العملية لكيفية استخدام استعلامات الحاويات لإنشاء تخطيطات أكثر تجاوبًا وقابلية للتكيف.

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

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

HTML:

<div class="card-container">
  <div class="card">
    <img src="image.jpg" alt="Card Image" class="card-image">
    <div class="card-content">
      <h3>Card Title</h3>
      <p>This is some sample content for the card.</p>
      <a href="#">Learn More</a>
    </div>
  </div>
</div>

CSS:

.card-container {
  container-type: inline-size;
  border: 1px solid #ccc;
  margin-bottom: 20px;
}

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

.card-image {
  width: 100%;
  height: auto;
}

.card-content {
  padding: 10px;
}

@container (min-width: 500px) {
  .card {
    flex-direction: row;
  }
  .card-image {
    width: 40%;
  }
  .card-content {
    width: 60%;
  }
}

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

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

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

HTML:

<nav class="nav-container">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS:

.nav-container {
  container-type: inline-size;
  background-color: #f0f0f0;
  padding: 10px;
}

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

.nav-container li {
  margin-bottom: 5px;
}

.nav-container a {
  display: block;
  padding: 5px 10px;
  text-decoration: none;
  color: #333;
}

@container (min-width: 600px) {
  .nav-container ul {
    display: flex;
  }

  .nav-container li {
    margin-right: 10px;
    margin-bottom: 0;
  }

  .nav-container a {
    display: inline-block;
  }
}

في هذا المثال، يتم الإعلان عن .nav-container كحاوية. عندما يكون عرض الحاوية أقل من 600 بكسل، سيتم عرض عناصر القائمة كقائمة عمودية. وعندما يبلغ عرض الحاوية 600 بكسل أو أكثر، سيتم عرض عناصر القائمة أفقيًا باستخدام flexbox.

المثال 3: قائمة المنتجات

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

HTML:

<div class="product-listing-container">
  <div class="product-item">
    <img src="product1.jpg" alt="Product 1">
    <h3>Product Name 1</h3>
    <p class="price">$19.99</p>
  </div>
  <div class="product-item">
    <img src="product2.jpg" alt="Product 2">
    <h3>Product Name 2</h3>
    <p class="price">$24.99</p>
  </div>
</div>

CSS:

.product-listing-container {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
}

.product-item {
  width: 100%;
  margin-bottom: 20px;
  border: 1px solid #eee;
  padding: 10px;
}

.product-item img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.product-item h3 {
  margin-top: 0;
  font-size: 1.2em;
}

.product-item .price {
  font-weight: bold;
  color: #007bff;
}

@container (min-width: 400px) {
  .product-item {
    width: 50%;
    padding: 15px;
  }
}

@container (min-width: 768px) {
  .product-item {
    width: 33.33%;
  }
}

يقوم كود CSS هذا أولاً بتأسيس `product-listing-container` كحاوية. بالنسبة للحاويات الضيقة (أقل من 400 بكسل)، يأخذ كل عنصر منتج 100٪ من العرض. عندما يتجاوز عرض الحاوية 400 بكسل، يتم ترتيب عناصر المنتج في عمودين. وعند تجاوز 768 بكسل، يتم عرض عناصر المنتج في ثلاثة أعمدة.

دعم المتصفحات والـ Polyfills

تحظى استعلامات الحاويات بدعم جيد في المتصفحات الحديثة، بما في ذلك Chrome و Firefox و Safari و Edge. ومع ذلك، قد لا تدعمها المتصفحات القديمة بشكل أصلي.

لدعم المتصفحات القديمة، يمكنك استخدام polyfill. الخيار الشائع هو container-query-polyfill، والذي يمكن العثور عليه على npm و GitHub. تملأ الـ Polyfills الفجوة للميزات غير المدعومة، مما يتيح لك استخدام استعلامات الحاويات حتى في المتصفحات القديمة.

أفضل الممارسات لاستخدام استعلامات الحاويات

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

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

المزالق الشائعة وكيفية تجنبها

• التبعيات الدائرية: كن حذرًا من إنشاء تبعيات دائرية بين استعلامات الحاويات. على سبيل المثال، إذا تأثر حجم الحاوية بالتنسيقات المطبقة داخل استعلام الحاوية، فقد يؤدي ذلك إلى سلوك غير متوقع.
• التحديد المفرط: تجنب استخدام محددات (selectors) مفرطة التحديد في استعلامات الحاويات الخاصة بك. هذا يمكن أن يجعل الكود صعب الصيانة ويمكن أن يؤدي إلى تعارض مع تنسيقات أخرى.
• تجاهل الحاويات المتداخلة: عند استخدام حاويات متداخلة، تأكد من أن استعلاماتك تستهدف الحاوية الصحيحة. قد تحتاج إلى استخدام أسماء حاويات أكثر تحديدًا لتجنب الالتباس.
• نسيان تعريف الحاوية: من الأخطاء الشائعة نسيان الإعلان عن عنصر كحاوية باستخدام `container-type`. بدون هذا، لن تعمل استعلامات الحاويات.

استعلامات الحاويات مقابل استعلامات الوسائط: اختيار الأداة المناسبة

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

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

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

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

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

الخاتمة

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

المصادر

• وحدة احتواء CSS المستوى 3 (مواصفات W3C)
• استعلامات الحاويات في CSS - وثائق MDN ويب
• Container Query Polyfill على GitHub