الدالة var()‎

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

الدالة 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.

مصادر ومواصفات