M

MLOG

العربية

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

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

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

ما هي قاعدة @when في CSS؟

قاعدة @when هي قاعدة شرطية (@at-rule) في CSS تسمح لك بتحديد الأنماط التي يتم تطبيقها فقط إذا كانت شروط معينة صحيحة. فكر فيها كأنها جملة if لملفات CSS الخاصة بك. على عكس استعلامات الوسائط (media queries)، التي تركز بشكل أساسي على خصائص منفذ العرض (حجم الشاشة، الاتجاه، إلخ)، توفر @when طريقة أكثر عمومية وقابلية للتوسيع للتعامل مع التنسيق الشرطي. إنها توسع القواعد الشرطية الحالية مثل @supports و @media.

المزايا الرئيسية لاستخدام @when

صيغة قاعدة @when

الصيغة الأساسية لقاعدة @when هي كما يلي: 
@when <condition> {
  /* CSS rules to apply when the condition is true */
}

يمكن أن يكون <condition> أي تعبير منطقي صالح يتم تقييمه إلى true أو false. غالبًا ما يتضمن هذا التعبير:

أمثلة عملية على استخدام @when

دعنا نستكشف بعض الأمثلة العملية لتوضيح قوة وتعدد استخدامات قاعدة @when.

1. التصميم المتجاوب مع @when واستعلامات الوسائط

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

@when (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 18px;
    line-height: 1.6;
  }
  .container {
    width: 720px;
    margin: 0 auto;
  }
}

في هذا المثال، يتم تطبيق الأنماط داخل كتلة @when فقط عندما يكون عرض الشاشة بين 768 بكسل و 1023 بكسل (حجم الجهاز اللوحي النموذجي). يوفر هذا طريقة واضحة وموجزة لتحديد الأنماط لنطاقات عرض محددة.

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

2. اكتشاف الميزات مع @when و @supports

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

@when supports(display: grid) {
  .container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: 20px;
  }
}

@when not supports(display: grid) {
  .container {
    /* Fallback styles for browsers that don't support grid */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  .item {
    width: calc(50% - 10px); /* Adjust width for older browsers */
  }
}

هنا، نستخدم @supports للتحقق مما إذا كان المتصفح يدعم CSS Grid Layout. إذا كان يدعمه، فإننا نطبق أنماطًا قائمة على الشبكة (grid) على .container. إذا لم يكن كذلك، فإننا نوفر أنماطًا احتياطية باستخدام flexbox لضمان تحقيق تخطيط مشابه في المتصفحات القديمة.

ملاحظة حول إمكانية الوصول العالمية: اكتشاف الميزات مهم لإمكانية الوصول. قد تفتقر المتصفحات القديمة إلى دعم سمات ARIA الأحدث أو عناصر HTML5 الدلالية. قم بتوفير حلول احتياطية مناسبة لضمان بقاء المحتوى سهل الوصول إليه.

3. دمج استعلامات الوسائط واستعلامات الميزات

تأتي القوة الحقيقية لـ @when من قدرتها على دمج استعلامات الوسائط واستعلامات الميزات لإنشاء قواعد تنسيق شرطية أكثر تعقيدًا ودقة.

@when (min-width: 768px) and supports(backdrop-filter: blur(10px)) {
  .modal {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
  }
}

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

4. التنسيق بناءً على الخصائص المخصصة (متغيرات CSS)

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

أولاً، حدد خاصية مخصصة:

:root {
  --theme-color: #007bff; /* Default theme color */
  --is-dark-mode: false;
}

ثم، استخدم @when لتطبيق الأنماط بناءً على قيمة الخاصية المخصصة:

@when var(--is-dark-mode) = true {
  body {
    background-color: #333;
    color: #fff;
  }
  a {
    color: #ccc;
  }
}

أخيرًا، استخدم JavaScript لتبديل قيمة الخاصية المخصصة --is-dark-mode:

document.getElementById('darkModeToggle').addEventListener('click', function() {
  document.documentElement.style.setProperty('--is-dark-mode', this.checked);
});

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

@when ( --is-dark-mode > 0 ) { ... }

ومع ذلك، تأكد من أن الخاصية المخصصة لها قيمة رقمية حتى تعمل هذه الطريقة بشكل صحيح.

ملاحظة حول إمكانية الوصول: يعد توفير سمات بديلة (مثل الوضع الداكن) أمرًا بالغ الأهمية لإمكانية الوصول. قد يستفيد المستخدمون الذين يعانون من إعاقات بصرية من السمات عالية التباين. تأكد من أن مفتاح تبديل السمة الخاص بك يمكن الوصول إليه عبر لوحة المفاتيح وقارئات الشاشة.

5. التنسيق بناءً على سمات البيانات (Data Attributes)

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

على سبيل المثال، لنفترض أن لديك قائمة مهام، ولكل مهمة سمة data-status تشير إلى حالتها (مثل، "todo", "in-progress", "completed"). يمكنك استخدام @when لتنسيق كل مهمة بشكل مختلف بناءً على حالتها.

[data-status="todo"] {
  /* Default styles for todo tasks */
  color: #333;
}

@when attribute(data-status string equals "in-progress") {
  [data-status="in-progress"] {
    color: orange;
    font-style: italic;
  }
}

@when attribute(data-status string equals "completed") {
  [data-status="completed"] {
    color: green;
    text-decoration: line-through;
  }
}

ملاحظة: قد يكون دعم شرط اختبار attribute() محدودًا أو غير مطبق بالكامل في جميع المتصفحات حاليًا. اختبر دائمًا بشكل شامل.

توافق المتصفحات والـ Polyfills

حتى أواخر عام 2024، لا يزال دعم المتصفحات لقاعدة @when في تطور. بينما تدعم العديد من المتصفحات الحديثة الوظائف الأساسية، قد لا تدعمها بعض المتصفحات القديمة. لذلك، من الأهمية بمكان التحقق من جداول التوافق واستخدام حلول احتياطية مناسبة أو polyfills عند الضرورة.

استشر دائمًا موارد مثل Can I use... للتحقق من حالة دعم المتصفح الحالية لـ @when والميزات ذات الصلة.

أفضل الممارسات لاستخدام @when

الخاتمة

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

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