الدالة var()
< CSS
اذهب إلى التنقل
اذهب إلى البحث
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
الدالة 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.