استعلامات نمط حاوية CSS: تصميم متجاوب قائم على النمط للتطبيقات العالمية

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

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

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

فكر في الأمر بهذه الطريقة: بدلاً من أن تسأل "هل منفذ العرض أوسع من 768 بكسل؟"، يمكنك أن تسأل "هل هذه الحاوية تحتوي على الخاصية المخصصة --theme: dark;؟". هذا يفتح عالمًا جديدًا بالكامل من الإمكانيات لإنشاء مكونات مرنة وقابلة لإعادة الاستخدام يمكنها التكيف بسلاسة مع التنسيقات أو التخطيطات أو متغيرات العلامة التجارية المختلفة في جميع أنحاء موقعك أو تطبيقك.

فوائد استعلامات نمط الحاوية

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

كيفية استخدام استعلامات نمط حاوية CSS

فيما يلي تفصيل لكيفية تنفيذ استعلامات نمط الحاوية:

1. إعداد الحاوية

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

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

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

بدلاً من ذلك، استخدم container-type: style لاستخدام حاوية لاستعلامات النمط فقط، وليس استعلامات الحجم، أو container-type: size style لاستخدام كليهما. للتحكم في اسم الحاوية، استخدم container-name: my-container ثم استهدفها بـ @container my-container (...).

2. تعريف استعلامات النمط

الآن، يمكنك استخدام القاعدة @container style() لتحديد الأنماط التي يتم تطبيقها عند استيفاء شرط معين:

@container style(--theme: dark) {
  .component {
    background-color: #333;
    color: #fff;
  }
}

في هذا المثال، سيتم تطبيق الأنماط داخل القاعدة @container فقط على العنصر .component إذا كان العنصر الحاوي له يحتوي على الخاصية المخصصة --theme المعينة إلى dark.

3. تطبيق الأنماط على الحاوية

أخيرًا، تحتاج إلى تطبيق خصائص CSS التي تتحقق منها استعلامات النمط الخاصة بك على العنصر الحاوي:

<div class="container" style="--theme: dark;">
  <div class="component">هذا مكون.</div>
</div>

في هذا المثال، سيكون لدى .component خلفية داكنة ونص أبيض لأن حاويته لديها النمط --theme: dark; مطبق مباشرة في HTML (للبساطة). أفضل ممارسة هي تطبيق الأنماط عبر فئات CSS. يمكنك أيضًا استخدام JavaScript لتغيير الأنماط ديناميكيًا على الحاوية، مما يؤدي إلى تحديثات استعلام النمط.

أمثلة عملية للتطبيقات العالمية

1. المكونات ذات التنسيقات المختلفة

تخيل موقعًا يدعم تنسيقات متعددة. يمكنك استخدام استعلامات نمط الحاوية لضبط نمط المكونات تلقائيًا بناءً على التنسيق النشط.

/* CSS */
.app-container {
  --theme: light;
}

@container style(--theme: dark) {
  .card {
    background-color: #333;
    color: #fff;
  }
}

@container style(--theme: light) {
  .card {
    background-color: #f0f0f0;
    color: #333;
  }
}

/* HTML */
<div class="app-container" style="--theme: dark;">
  <div class="card">
    <h2>عنوان البطاقة</h2>
    <p>محتوى البطاقة.</p>
  </div>
</div>

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

2. تنوعات التخطيط

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

/* CSS */
.navigation {
  --layout: compact;
}

.footer {
  --layout: expanded;
}

@container style(--layout: compact) {
  .language-selector {
    /* أنماط للقائمة المنسدلة المدمجة */
  }
}

@container style(--layout: expanded) {
  .language-selector {
    /* أنماط لقائمة اللغات الكاملة */
  }
}

/* HTML */
<nav class="navigation" style="--layout: compact;">
  <div class="language-selector">...

<footer class="footer" style="--layout: expanded;">
  <div class="language-selector">...

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

3. التكيف مع نوع المحتوى

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

/* CSS */
.article-summary {
  --has-image: false;
}

@container style(--has-image: true) {
  .article-summary {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
  }
}

/* HTML (مع صورة) */
<div class="article-summary" style="--has-image: true;">
  <img src="..." alt="..." />
  <div>...
</div>

/* HTML (بدون صورة) */
<div class="article-summary" style="--has-image: false;">
  <div>...
</div>

يمكّن هذا من عرض ملخصات المقالات بشكل أكثر جاذبية بصرية وإفادة، مما يحسن تجربة المستخدم. لاحظ أن تعيين الخاصية `--has-image` في HTML مباشرة ليس مثاليًا. النهج الأفضل هو استخدام JavaScript لاكتشاف وجود صورة وإضافة أو إزالة فئة ديناميكيًا (مثل `.has-image`) إلى العنصر `.article-summary`، ثم تعيين الخاصية المخصصة `--has-image` داخل قاعدة CSS للفئة `.has-image`.

4. الأنماط المخصصة محلياً

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

/* CSS */
.locale-container {
  --language: en;
}

@container style(--language: ja) {
  .text {
    font-size: 1.1em;
    letter-spacing: 0.05em;
  }
}

@container style(--language: ar) {
  .text {
    direction: rtl;
  }
}

/* HTML */
<div class="locale-container" style="--language: ja;">
  <p class="text">...</p>
</div>

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

5. اعتبارات إمكانية الوصول

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

/* CSS */
body {
  --high-contrast: false;
}

@media (prefers-contrast: more) {
  body {
    --high-contrast: true;
  }
}

@container style(--high-contrast: true) {
  .component {
    background-color: black;
    color: white;
  }
}

/* HTML */
<div class="component">...

يضمن هذا أن يكون موقع الويب الخاص بك قابلاً للاستخدام ومتاحًا للجميع، بغض النظر عن قدراتهم. لاحظ استخدام استعلام الوسائط `@media (prefers-contrast: more)` لاكتشاف وضع التباين العالي على مستوى نظام التشغيل، ثم تعيين الخاصية المخصصة `--high-contrast`. يتيح لك هذا إطلاق تغييرات النمط باستخدام استعلام نمط بناءً على إعدادات نظام المستخدم.

أفضل الممارسات

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

دعم المتصفحات

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

الخاتمة

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

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

المصادر

• وثائق ويب MDN: استعلامات حاوية CSS
• استعلامات نمط حاوية CSS – نظرة أولى
• بدائل Polyfills لاستعلامات نمط الحاوية