الشروط في CSS باستخدام الدالة الجديدة if()

Una Kravets

تاريخ النشر: 1 يوليو 2025

اعتبارًا من الإصدار 137 من Chrome، يمكنك تجربة عبارات CSS الشرطية المضمّنة باستخدام الدالة if(). تتيح if() واجهة مطوّرين أكثر سلاسة للأنماط الديناميكية، مثل طلبات البحث عن الأنماط والاستعلامات عن الوسائط، مع بعض الاختلافات الرئيسية التي يمكنك التعرّف عليها في هذه المشاركة.

تعمل الدالة if() في CSS باستخدام سلسلة من أزواج الشرط والقيمة، ويتم تنظيمها على النحو التالي:

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3);

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

property: if(condition-1: value-1; condition-2: value-2; condition-3: value-3; else: value-4);

في الوقت الحالي، تعمل أداة if() مع ثلاثة أنواع مختلفة من الطلبات:

• ‫style(): طلبات البحث المتعلقة بالأسلوب
• ‫media(): الاستعلامات عن الوسائط
• ‫supports(): طلبات البحث المتوافقة

لنوضّح ذلك ببعض الأمثلة:

عرض توضيحي: الاستعلامات المضمّنة عن الوسائط

يُعدّ استخدام if() طريقة رائعة لتضمين الاستعلامات عن الوسائط المضمّنة في أنماطك. على سبيل المثال، يمكنك التحقّق من إعدادات المستخدم المفضّلة بشأن المظهر (فاتح أو داكن)، أو إجراء الاستعلامات عن الوسائط المضمّنة لعرض إطار العرض. يعرض المثال التالي طلب البحث عن الوسائط لأجهزة المؤشر. سيكون الحجم التلقائي للزر 30 بكسل على جهاز مزوّد بمؤشر دقيق، مثل الماوس، ولكن بالنسبة إلى الأجهزة المزودة بشاشة تعمل باللمس، مثل تلك التي تحتوي على مؤشر غير دقيق، سيكون حجم الزر 44 بكسل كحد أدنى موصى به لتوفير مساحة لمس مناسبة لتسهيل الوصول.

button {
  aspect-ratio: 1;
  width: if(media(any-pointer: fine): 30px; else: 44px);
}

يؤدي الرمز السابق إلى النتيجة نفسها التي يؤدي إليها الاستعلام عن الوسائط التالي:

button {
  aspect-ratio: 1;
  width: 44px;
}

@media (any-pointer: fine) {
  button {
    width: 30px;
  }
}

يتيح لك استخدام تنسيق if() تضمين المنطق في السطر نفسه، بدون الحاجة إلى منطق التنسيق في مكانَين مختلفَين.

عرض توضيحي: طلبات الدعم المضمّنة

هناك طريقة أخرى لاستخدام if() وهي إنشاء طلبات دعم مضمّنة. على سبيل المثال، للتحقّق من إمكانية استخدام ألوان ذات نطاق واسع، مثل OKLCH، يمكنك استخدام:

body {
  background-color: if(
    supports(color: oklch(0.7 0.185 232)): oklch(0.7 0.185 232);
    else: #00adf3;
  );
  
  &::after {
    content: if(
    supports(color: oklch(0.7 0.185 232)): "Your browser supports OKLCH";
    else: "Your browser does not support OKLCH";
    );
  }
}

باستخدام هذا الرمز، إذا كان المتصفّح يتوافق مع فضاء الألوان oklch، سيظهر للمستخدم اللون الأكثر حيوية، وستظهر له أيضًا الرسالة: "متصفّحك متوافق مع OKLCH" في المحتوى الزائف ::after.

لمزيد من المعلومات والاطّلاع على الفرق بين فضاء ألوان RGB ومساحات الألوان الأكثر تقدّمًا، يمكنك الاطّلاع على أداة اختيار الألوان والمراجع على oklch.com.

العرض التوضيحي: عرض حالة واجهة المستخدم بشكل مرئي

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

<div class="card" data-status="complete">
  ...
</div>

.card {
  --status: attr(data-status type(<custom-ident>));
  border-color: if(
                style(--status: pending): royalblue;
                style(--status: complete): seagreen;
                else: gray);
  background-color: if(
                style(--status: pending): #eff7fa;
                style(--status: complete): #f6fff6;
                else: #f7f7f7);
}

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

يوضّح هذا العرض التوضيحي حالة أساسية لكيفية استخدام if() لدعم أسلوب معماري جديد في CSS. إحدى مزايا استخدام خصائص CSS المخصّصة بدلاً من الفئات هي سهولة تعديلها في CSS. على سبيل المثال، يمكن تعديلها باستخدام الاستعلامات عن الوسائط أو الحالات الزائفة، مثل :hover.

الخطوات التالية

توفّر إضافة if() فرصة معمارية جديدة لمطوّري CSS. مع تطوّر تقنيات مثل طلبات البحث عن الأنماط، من المحتمل أن يصبح من الممكن إجراء طلبات بحث عن النطاقات ضمن دوال if()، كما ستكون مفيدة عند دمجها مع اقتراح الدوال المخصّصة القادم (CSS @function).

لمزيد من المعلومات حول هذه الميزات، يُرجى الاطّلاع على:

• فيديو مدته 3 دقائق يشرح العرض التوضيحي رقم 3
• مقالة من Lea Verou