البدء باستخدام استعلامات الحاوية في لغة CSS

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

سنشرح في الفقرات التالية ما هي هذه الاستعلامات؟ وكيف يمكننا استخدامها لبناء تصاميم أكثر أناقة ومرونة؟ وهل ما زلنا بحاجة إلى استعلامات الوسائط Media Queries أم أن استعلامات الحاوية ستحل محلها؟

مشكلة استخدام استعلامات الوسائط في التصميم

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

يمكننا تقسيم هذا التصميم إلى جزأين أو شبكتين: شبكة على الطرف الأيسر مكونة من 4 أعمدة، وشبكة على الطرف الأيمن مؤلفة من عمود واحد على النحو التالي.

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

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

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

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

وضع المحتوى ضمن المساحة المتوفرة

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

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

ما هي استعلامات الحاوية Container Queries؟

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

تخطيط عناصر صفحة الويب باستخدام استعلامات الحاوية

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

إنشاء الحاوية

تحتاج إلى عنصر حاوية للاستعلام عنه قبل البدء بكتابة استعلام الحاوية، وبما أن المثال الذي بين أيدينا هو موقع أخباري فإننا بحاجة إلى عنصر الحاوية الذي يغلف كل مقالة على حدة ويتعامل معها على أنها حاوية container. والاختيار الأنسب في هذه الحالة هو عنصر القائمة <li> نظرًا لأن موقعنا يعرض قائمة من المقالات، ولذلك سنضع صنف لعنصر القائمة يحمل الاسم article-container لتمييزها.

<ul class="grid">
  <li class="article-container">
    <article>...</article>
  </li>
  <li class="article-container">
    <article>...</article>
  </li>
  <li class="article-container">
    <article>...</article>
  </li>
  ...
</ul>

سننشئ الحاوية باستخدام خاصيتين من خصائص CSS هما اسم الحاوية container-name و نوع الحاوية container-type، بالنسبة لاسم الحاوية فهو اسم اختياري ولكن يفضل اختيار اسم مناسب خاصة عندما نستخدم أكثر من حاوية ضمن الصفحة، وبما أن صفحتنا تتحدث عن المقالات سنختار لها اسم article.

أما بالنسبة للخاصية container-type فيجب أن تأخذ القيمة inline-size وهذه القيمة هي قيمة منطقية تشير إلى العرض عندما نستخدم نظام الكتابة الأفقي وإلى الارتفاع عندما نستخدم نظام الكتابة العمودي (المستخدم في لغات مثل الصينية واليابانية التقليدية).

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

ويمكنك كتابة اسم ونوع الحاوية container في سطر برمجي واحد للاختصار كما يلي:

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

الاستعلام عن الحاوية

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

إذا لم تعرف الحاوية المناسبة، فسيكون سلوك الاستعلام مشابهًا لسلوك استعلام الوسائط، وبالتالي سيتم الاستعلام عن حجم إطار العرض viewport لا عن حجم العنصر المحدد.

/* Without a named container */
@container (width > 700px) {
  /* Styles applied to elements within any container when the container is over 700px wide  */
}

في هذه الحالة ستطبق التنسيقات على أي عنصر داخل أي حاوية container عرضها أكبر من 700 بكسل.

من المفيد بالطبع تحديد حاوية ذات اسم مميز حتى نتأكد من الحاوية التي نستعلم عنها ولتجنب المشكلات خاصة عند التعامل مع تصاميم تحتوي على حاويات متداخلة فيما بينها كما يلي:

/* Specifying a named container */
@container article (width > 700px) {
  /* Styles applied to elements within the 'article' container when the container is over 700px wide  */
}

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

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

article {
  display: grid;
  gap: 1rem;
}

@container article (inline-size > 500px) {
  /* Styles for horizontal article */
  article {
    grid-template-columns: 1fr 2fr;
  }
}

@container article (inline-size > 800px) {
  article {
    /* Styles for article in a large space (e.g. featured article) */
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    font-size: 1.2rem;
  }

  h3 {
    font-size: 2rem;
  }
}

صيغة استعلام الوسائط الجديد

ربما تلاحظ اختلافًا بسيطًا بين طريقة كتابة استعلامات الحاوية وطريقة كتابة استعلامات الوسائط العادية، فبدلًا من استخدام الخاصتين min-width و
max-width، نستخدم صيغة مجال استعلام الوسائط، وهذه الميزة تقلل عدد الاستعلامات.

/* Old syntax for styles between 700px and 900px */
@container (min-width: 700px) and (max-width: 900px) {
}

/* New syntax */
@container (700px <= width <= 900px) {
}

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

لنعد كتابة استعلام الحاوية في مثالنا السابق باستخدام الخاصية inline-size بدلًا من الخاصة min-width

@container article (inline-size > 700px) {
  article {
    /* Styles for horizontal article */
  }
}

يطبق التنسيق في هذه الحالة إذا كانت الحاوية article تمتد لعرض يزيد على 700 بكسل.

الحاويات المتداخلة Nested Containers

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

وهذا يعني أننا بحاجة إلى إنشاء حاوية إضافية محيطة بشبكتنا، وبالتالي سنحتاج إلى تعديل كود HTML لتضمين الحاوية الإضافية

<div class="grid-container">
  <ul class="grid">
    <li class="article-container">...</li>
    <li class="article-container">...</li>
    <li class="article-container">...</li>
    ...
  </ul>
</div>

أما كود CSS فسيصبح كما يلي:

.grid-container {
  container: layout / inline-size;
}

سنكتب في الكود التالي استعلامات حاوية مخصصة لعمودين. واستعلامات حاوية مخصصة لأربعة أعمدة على التناوب في حال توفر المساحة الكافية.

/* Initial styles for single column layout */
.grid {
  display: grid;
  gap: 1rem;
}

@container layout (inline-size > 800px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* The featured article should span two columns */
  .article-container:first-child {
    grid-column: span 2;
  }
}

@container layout (inline-size > 1000px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .article-container:first-child {
    grid-column: span 4;
  }

  .article-container:nth-child(2),
  .article-container:nth-child(3) {
    grid-column: span 2;
  }
}

إذا غيرت حجم العنصر أو المكون، ستلاحظ كيف ستستجيب كل من تصميم الشبكة والمقالات المتداخلة للمساحة المتوفرة.

وحدات الحاوية Container Units

من خبرتك السابقة، قد تكون على دراية بالفعل بوحدات قياس إطار العرض viewport units المستخدمة لتحديد حجم العناصر بما يتناسب مع حجم نافذة العرض مثل vw التي تمثل نسبة مئوية من كامل عرض النافذة و vh التي تمثل نسبة مئوية من كامل ارتفاع النافذة، أما وحدات الحاوية container units فهي تمكنك من تحديد حجم العناصر بما يتناسب مع حجم الحاوية وهذه الوحدات مفيدة بشكل خاص في تنسيق المقالات في موقعنا الأخباري، حيث يمكننا استخدامها لتحديد الحواشي padding وحجم الخط font-size، مما يقلل الحاجة إلى ضبط النقاط الحديّة breakpoints المختلفة.

تُستخدم وحدة cqi لتحديد النسبة المئوية من الحجم المضمن للحاوية inline-size كما في المثال التالي:

article {
  padding: 4cqi;
}

يحدد هذا الكود قيمة الكود الحواشي padding للعنصر article لتكون 4% من العرض الداخلي لحاوية العنصر.

ملاحظة: لا داعي لكتابة هذه التنسيقات داخل استعلام الحاوية، فمادمت قد عرّفتها في البداية فستكون جاهزة للاستخدام ضمن الحاوية.

نستطيع أن نستخدم التابع ()clamp لمنع الحاشية padding من أن تكون كبيرة جدًا أو صغيرة جدًأ. وسيجد هذا التابع بدوره القيمة الوسطى middle value عن طريق تمرير قيمتين ثابتتين بالإضافة إلى القيمة الممررة cqi وبذلك نستطيع التأكد من أن القيمة padding لن تكون أصغر من 1rem ولا أكبر من 3rem.

article {
  padding: clamp(1rem, 4cqi, 2rem);
}

ويمكن بنفس الطريقة لضبط حجم الخط بحيث يتكيف مع حجم الحاوية عن طريق التابع clamp ووحدات الحاوية container units.

article {
  padding: clamp(1rem, 4cqi, 2rem);
  font-size: clamp(1rem, 2cqi, 3rem);
}

دعم المتصفحات والخيارات الاحتياطية

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

استعلامات التنسيق Style queries

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

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

<div class="grid-container">
  <ul class="grid">
    <li class="article-container">...</li>
    <li class="article-container">...</li>
    <li class="article-container" style="--featured: true">...</li>
    ...
  </ul>
</div>

@container style(--featured: true) {
  article {
    border-radius: 0.2rem;
    background: pink;
    border: 1px solid deeppink;
    padding: clamp(1rem, 5cqi, 3rem);
  }
}

لاحظ أننا لا نحتاج في هذا الكود إلى تعريف الحاوية container حيث أن كل عنصر يحتوي تلقائيًا على التنسيق الخاص به.

القيود ودعم المتصفحات

حتى وقت كتابة هذا المقال يدعم كل من متصفح Chrome ومتصفح Edge استعلامات تنسيق الحاوية بينما لا يدعم المتصفحان Firefox و Safari هذه التقنية، والسبب في ذلك هو عدم الإيفاء ببند موجود في مواصفات المستوى 3 لوحدة احتواء CSS للاستعلام عن الخاصية والقيمة معًا وليس الاستعلام عن خاصية محددة. وعلى كل حال لا توجد متصفحات تدعم هذه الخواص حتى الآن.

هل ما زلنا بحاجة إلى استعلامات الوسائط

من خلال استخدامنا لاستعلامات الحاوية أصبح بإمكاننا الاستعلام عن حجم إطار العرض وحجم العنصر، وهنا يتبادر إلى أذهاننا السؤال التالي: هل ما زلنا بحاجة إلى استخدام استعلامات الوسائط في الكود؟ الجواب القطعي هو نعم لأن استعلامات الوسائط تستخدم في أمور أكثر بكثير من موضوع الحجم.على سبيل المثال لا الحصر يمكننا من خلال استخدام استعلامات الوسائط اكتشاف تفضيلات المستخدمين من خلال التابع prefers-reduced-motion والتابع prefers-color-scheme.

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

الخلاصة

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

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

ترجمة وبتصرف للمقال Getting started with CSS container queries لكاتبته Michelle Barker.

اقرأ أيضًا

• تعرف على أساسيات لغة CSS
• الدليل السريع إلى لغة التنسيق CSS
• وحدات القياس والقيم في CSS
• تحجيم الأشياء في CSS