M

MLOG

العربية

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

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

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

فهم استعلامات الحاوية

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

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

إعداد استعلامات الحاوية مع Tailwind CSS

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

استخدام إضافة `tailwindcss-container-queries`

توفر إضافة `tailwindcss-container-queries` طريقة ملائمة لدمج استعلامات الحاوية في سير عمل Tailwind CSS الخاص بك. للبدء، ستحتاج إلى تثبيت الإضافة:

npm install tailwindcss-container-queries

بعد ذلك، أضف الإضافة إلى ملف `tailwind.config.js` الخاص بك:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('tailwindcss-container-queries'),
  ],
}

تضيف هذه الإضافة تلقائيًا متغيرات جديدة إلى فئات Tailwind CSS الخاصة بك، مما يسمح لك بتطبيق الأنماط بناءً على أحجام الحاوية. على سبيل المثال، يمكنك استخدام `cq-sm:text-lg` لتطبيق حجم نص أكبر عندما يكون حجم الحاوية على الأقل الحجم الصغير المحدد في التكوين الخاص بك.

تكوين أحجام الحاوية

تسمح لك الإضافة بتحديد أحجام حاوية مخصصة في ملف `tailwind.config.js` الخاص بك. افتراضيًا، توفر مجموعة من الأحجام المحددة مسبقًا. يمكنك تخصيص هذه الأحجام لتناسب احتياجات التصميم الخاصة بك. إليك مثال:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      containerQueries: {
        'xs': '200px',
        'sm': '480px',
        'md': '768px',
        'lg': '1024px',
        'xl': '1280px',
      },
    },
  },
  plugins: [
    require('tailwindcss-container-queries'),
  ],
}

في هذا التكوين، قمنا بتعريف خمسة أحجام للحاويات: `xs`، `sm`، `md`، `lg`، و `xl`، كل منها يتوافق مع عرض معين. يمكنك إضافة المزيد من الأحجام أو تعديل الأحجام الحالية لتتناسب مع متطلبات مشروعك.

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

الآن بعد أن قمت بإعداد الإضافة، دعنا نستكشف كيفية استخدام استعلامات الحاوية في مكونات Tailwind CSS الخاصة بك.

تعريف الحاوية

أولاً، تحتاج إلى تحديد العنصر الذي سيعمل كحاوية لاستعلاماتك. يتم ذلك عن طريق إضافة فئة `container-query` إلى العنصر. يمكنك أيضًا تحديد اسم للحاوية باستخدام `container-[name]` (على سبيل المثال، `container-card`). يتيح لك هذا الاسم استهداف حاويات معينة إذا كان لديك حاويات متعددة داخل مكون واحد.

<div class="container-query container-card">
  <!-- محتوى المكون -->
</div>

تطبيق الأنماط بناءً على حجم الحاوية

بمجرد تحديد الحاوية، يمكنك استخدام متغيرات `cq-[size]:` لتطبيق الأنماط بناءً على عرض الحاوية. على سبيل المثال، لتغيير حجم النص بناءً على حجم الحاوية، يمكنك استخدام ما يلي:

<div class="container-query container-card p-4 bg-gray-100 rounded-lg shadow-md"
     >
  <h2 class="text-xl font-semibold mb-2 cq-sm:text-2xl cq-md:text-3xl"
  >عنوان متجاوب</h2>
  <p class="text-gray-700 cq-sm:text-lg"
  >هذه فقرة تتكيف مع حجم الحاوية. سيقوم هذا المكون بتعديل مظهره بناءً على حجم حاويته.
  </p>
</div>

في هذا المثال، سيكون العنوان `text-xl` بشكل افتراضي، و `text-2xl` عندما يكون حجم الحاوية على الأقل `sm`، و `text-3xl` عندما يكون حجم الحاوية على الأقل `md`. يتغير حجم نص الفقرة أيضًا إلى `text-lg` عندما يكون حجم الحاوية على الأقل `sm`.

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

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

<div class="container-query container-card p-4 bg-white rounded-lg shadow-md flex flex-col cq-md:flex-row items-center"
     >
  <img src="https://via.placeholder.com/150" alt="صورة عنصر نائب" class="w-24 h-24 rounded-full mb-4 cq-md:mb-0 cq-md:mr-4">
  <div class="text-center cq-md:text-left"
  >
    <h2 class="text-xl font-semibold mb-2 cq-sm:text-2xl cq-md:text-3xl"
    >بطاقة متجاوبة</h2>
    <p class="text-gray-700 cq-sm:text-lg"
    >سيقوم هذا المكون بتعديل مظهره بناءً على حجم حاويته. ستتم محاذاة الصورة والنص بشكل مختلف حسب المساحة المتاحة.
    </p>
    <a href="#" class="inline-block mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700"
    >اعرف المزيد</a>
  </div>
</div>

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

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

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

استخدام أسماء الحاويات

يمكنك تعيين أسماء لحاوياتك باستخدام فئة `container-[name]`. يتيح لك ذلك استهداف حاويات معينة ضمن التسلسل الهرمي للمكون. على سبيل المثال:

<div class="container-query container-primary">
  <div class="container-query container-secondary">
    <p class="cq-primary-sm:text-lg cq-secondary-md:text-xl">سيتكيف هذا النص مع كلتا الحاويتين.</p>
  </div>
</div>

في هذا المثال، سيكون حجم النص `text-lg` عندما تكون `container-primary` على الأقل بحجم `sm`، وسيكون `text-xl` عندما تكون `container-secondary` على الأقل بحجم `md`.

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

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

العمل مع التخطيطات المعقدة

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

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

لضمان الاستخدام الفعال والقابل للصيانة لاستعلامات الحاوية، ضع في اعتبارك أفضل الممارسات التالية:

اعتبارات عالمية للتصميم المتجاوب

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

أمثلة على التصميم المتجاوب العالمي

إليك بعض الأمثلة على كيفية استخدام استعلامات الحاوية لإنشاء تصميمات متجاوبة صديقة للعالم:

الخاتمة

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

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