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

Una Kravets

تاريخ النشر: 1 تموز (يوليو) 2025

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

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

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، سيرى المستخدم اللون الأكثر حيوية، وسيظهر له أيضًا المحتوى الزائف "::after" الذي يعرض الرسالة: "متصفّحك متوافق مع OKLCH".

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

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

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

<div class="card" data-status=>"c<ompl>ete"
  ...
/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 دقائق يعرض العرض التوضيحي الثالث
• مقالة من Lea Verou