شرح الدالة var() في Css

الدالة var()‎ في CSS تُستخدم لتضمين قيمة خاصية مخصصة بدلًا من قيمة إحدى الخاصيات الأخرى.

الدالة var()‎

الدالة var()‎ في CSS تُستخدم لتضمين قيمة خاصية مخصصة بدلًا من قيمة إحدى الخاصيات الأخرى.

var(--header-color,blue);

لا يمكن استخدام الدالة var()‎ في أسماء الخاصيات أو المُحدِّدات أو أي شيء آخر عدا قيم الخاصيات.

أمثلة

المثال الآتي يستعمل قيمة الخاصيات المخصصة عبر الدالة var()‎ مبينًا كيفية تحديد قيم احتياطية:

:root{
 --main-bg-color:pink;
}
body{
 background-color:var(--main-bg-color);
}
.component.header{
 color:var(--header-color,blue);
}
.component.text{
 color:var(--text-color,black);
}
.component{
 --text-color:#080;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	49.0	31.0	غير مدعومة	36	9.3

البنية العامة

أوّل وسيط يُمرَّر إلى الدالة هو اسم الخاصية التي ستوضع قيمتها، أما الوسيط الثاني الاختياري يُمثِّل قيمةً احتياطيةً فلو لم يتمكن المتصفح من الوصول إلى قيمة الخاصية المخصصة أو كانت غير صالحة، فسيستخدم المتصفح القيمة الثانية.

var(<custom-property-name>[,<declaration-value>]?)

لاحظ أنَّ الوسيط الثاني سيبدأ من بعد أوّل فاصلة وسينتهي بنهاية الدالة، فمثلًا الدالة ‎var‎(--foo, red, blue)‎ تُعرِّف قيمةً احتياطيةً هي red, blue.

wesam developer

إذا أعجبك المقال أو كان مفيدًا - ضع "أعجبني". اشترك في المدونة اوشارك برأيك في التعليقات! أراك لاحقا