إتقان قاعدة @when في CSS: تطبيق الأنماط الشرطي لتصميم ويب ديناميكي

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

فهم أساسيات قاعدة @when

في جوهرها، توفر قاعدة @when آلية لتنفيذ كتلة من أنماط CSS فقط عند استيفاء شرط معين. هذا يشبه عبارات if في لغات البرمجة. دعنا نحلل البنية:

@when condition {
  /* قواعد CSS التي سيتم تطبيقها عندما يكون الشرط صحيحًا */
}

يمكن أن يستند الشرط إلى عوامل مختلفة، بما في ذلك:

• استعلامات الحاوية (Container Queries): تنسيق العناصر بناءً على حجم العنصر الحاوي لها بدلاً من إطار العرض.
• الحالات المخصصة (Custom States): التفاعل مع تفاعلات المستخدم أو حالات التطبيق.
• متغيرات CSS: تطبيق الأنماط بناءً على قيمة خصائص CSS المخصصة.
• استعلامات النطاق (Range Queries): التحقق مما إذا كانت القيمة تقع ضمن نطاق معين.

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

استعلامات الحاوية مع @when

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

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

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

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

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

الآن، يمكنك استخدام @container (الذي يُستخدم غالبًا مع @when) لتطبيق الأنماط بناءً على حجم الحاوية:

@container (min-width: 300px) {
  .card {
    flex-direction: row;
    align-items: center;
  }
  .card__image {
    width: 100px;
    height: 100px;
  }
}

@container (max-width: 299px) {
  .card {
    flex-direction: column;
    align-items: flex-start;
  }
  .card__image {
    width: 100%;
    height: auto;
  }
}

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

إليك كيف يمكننا استخدام @when لتحقيق نفس النتيجة، ربما بالاشتراك مع @container اعتمادًا على دعم المتصفح وتفضيلات الترميز (حيث توفر @when مرونة أكبر في بعض السيناريوهات التي تتجاوز مجرد حجم الحاوية):

@container card-container (min-width: 300px) {
  @when container(card-container) {
    .card {
      flex-direction: row;
      align-items: center;
    }
    .card__image {
      width: 100px;
      height: 100px;
    }
  }
}

@container card-container (max-width: 299px) {
  @when container(card-container) {
    .card {
      flex-direction: column;
      align-items: flex-start;
    }
    .card__image {
      width: 100%;
      height: auto;
    }
  }
}

في هذه الحالة، `card-container` هو اسم حاوية تم تعيينه باستخدام @container، و `container(card-container)` في @when يتحقق مما إذا كان سياق الحاوية المحدد نشطًا. ملاحظة: قد يختلف دعم دالة container() والبنية الدقيقة بين المتصفحات والإصدارات. استشر جداول توافق المتصفحات قبل التنفيذ.

أمثلة دولية عملية

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

استخدام @when مع الحالات المخصصة

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

مثال تصوري (باستخدام متغيرات CSS لمحاكاة الحالات)

نظرًا لأن دعم الحالات المخصصة الأصلي ليس متاحًا عالميًا بعد، يمكننا محاكاته باستخدام متغيرات CSS و JavaScript.

/* CSS */
.my-element {
  --is-active: 0;
  background-color: #eee;
}

@when var(--is-active) = 1 {
  .my-element {
    background-color: #aaf;
  }
}

/* JavaScript */
const element = document.querySelector('.my-element');
element.addEventListener('click', () => {
  element.style.setProperty('--is-active', element.style.getPropertyValue('--is-active') === '0' ? '1' : '0');
});

في هذا المثال، نستخدم متغير CSS --is-active لتتبع حالة العنصر. يقوم كود JavaScript بتبديل قيمة هذا المتغير عند النقر على العنصر. ثم تطبق قاعدة @when لون خلفية مختلفًا عندما يكون --is-active مساويًا لـ 1. على الرغم من أن هذا حل بديل، إلا أنه يوضح مفهوم التنسيق الشرطي بناءً على الحالة.

حالات الاستخدام المستقبلية المحتملة مع الحالات المخصصة الحقيقية

عندما يتم تنفيذ الحالات المخصصة الحقيقية، قد تبدو البنية شيئًا من هذا القبيل (ملاحظة: هذا تخميني ويستند إلى المقترحات):

.my-element {
  /* الأنماط الأولية */
}

@when :state(my-custom-state) {
  .my-element {
    /* الأنماط عندما تكون الحالة المخصصة نشطة */
  }
}

ستستخدم بعد ذلك JavaScript لتعيين وإلغاء تعيين الحالة المخصصة:

element.states.add('my-custom-state'); // تفعيل الحالة
element.states.remove('my-custom-state'); // إلغاء تفعيل الحالة

سيسمح هذا بتحكم دقيق للغاية في التنسيق بناءً على منطق التطبيق.

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

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

العمل مع متغيرات CSS واستعلامات النطاق

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

مثال: تبديل السمات (Theme Switching)

:root {
  --theme-color: #fff;
  --text-color: #000;
}

body {
  background-color: var(--theme-color);
  color: var(--text-color);
}

@when var(--theme-color) = #000 {
  body {
    --text-color: #fff;
  }
}

في هذا المثال، يتحكم المتغير --theme-color في لون خلفية الجسم. عندما يتم تعيينه على #000، تقوم قاعدة @when بتغيير --text-color إلى #fff، مما يؤدي إلى إنشاء سمة داكنة. يمكن للمستخدمين بعد ذلك تغيير قيمة --theme-color باستخدام JavaScript أو عن طريق تعيين متغير CSS مختلف في ورقة أنماط المستخدم.

استعلامات النطاق

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

@when (400px <= width <= 800px) {
  .element {
    /* الأنماط المطبقة عندما يكون العرض بين 400 بكسل و 800 بكسل */
  }
}

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

إمكانية الوصول العالمية وتفضيلات المستخدم

• سمات التباين العالي: استخدم متغيرات CSS وقاعدة @when لتنفيذ سمات التباين العالي التي تلبي احتياجات المستخدمين الذين يعانون من إعاقات بصرية. اسمح للمستخدمين بتخصيص لوحة الألوان وأحجام الخطوط لتلبية احتياجاتهم الخاصة.
• الحركة المخفضة: احترم تفضيل المستخدم للحركة المخفضة باستخدام متغيرات CSS لتعطيل الرسوم المتحركة والانتقالات عندما يقوم المستخدم بتمكين إعداد "الحركة المخفضة" في نظام التشغيل الخاص به. يمكن دمج استعلام الوسائط prefers-reduced-motion مع @when لمزيد من التحكم الدقيق.
• تعديلات حجم الخط: اسمح للمستخدمين بضبط حجم خط موقع الويب باستخدام متغيرات CSS. استخدم قاعدة @when لتكييف تخطيط وتباعد العناصر لاستيعاب أحجام الخطوط المختلفة، مما يضمن سهولة القراءة والاستخدام لجميع المستخدمين.

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

• توافق المتصفحات: لا تزال قاعدة @when جديدة نسبيًا، ودعم المتصفحات ليس عالميًا بعد. تحقق دائمًا من جداول توافق المتصفحات قبل استخدامها في الإنتاج. ضع في اعتبارك استخدام polyfills أو حلول بديلة للمتصفحات القديمة. اعتبارًا من أواخر عام 2024، لا يزال دعم المتصفحات محدودًا، وغالبًا ما يكون الاعتماد بشكل كبير على @container والاستخدام الحكيم لمتغيرات CSS مع حلول JavaScript البديلة هو النهج الأكثر عملية.
• الخصوصية (Specificity): كن على دراية بخصوصية CSS عند استخدام قاعدة @when. تأكد من أن أنماطك الشرطية محددة بما يكفي لتجاوز أي أنماط متعارضة.
• قابلية الصيانة: استخدم متغيرات CSS والتعليقات لجعل الكود الخاص بك أكثر قابلية للقراءة والصيانة. تجنب إنشاء قواعد شرطية معقدة للغاية يصعب فهمها وتصحيحها.
• الأداء: بينما يمكن لقاعدة @when تحسين الأداء عن طريق تقليل كمية CSS التي يجب تحليلها، فمن المهم استخدامها بحكمة. يمكن أن يؤثر الإفراط في استخدام القواعد الشرطية سلبًا على الأداء، خاصة على الأجهزة القديمة.
• التحسين التدريجي: استخدم التحسين التدريجي لضمان عمل موقع الويب الخاص بك بشكل جيد حتى لو كان المتصفح لا يدعم قاعدة @when. قدم تجربة أساسية وعملية لجميع المستخدمين ثم قم بتحسينها تدريجيًا للمتصفحات التي تدعم الميزة.

مستقبل التنسيق الشرطي

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

ستؤدي التطورات الإضافية في CSS Houdini وتوحيد الحالات المخصصة إلى تعزيز قدرات @when، مما يسمح بتحكم أكثر دقة في التنسيق وتكامل أكثر سلاسة مع JavaScript.

الخاتمة

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

مع استمرار تطور الويب، يعد تبني ميزات CSS الجديدة مثل @when أمرًا بالغ الأهمية للبقاء في الطليعة وتقديم تجارب ويب متطورة لجمهور عالمي.