الخاصيات المخصصة في CSS

أسماء الخاصيات التي تُسبَق بشرطتين --، مثل ‎--example-name، تُمثِّل الخاصيات المخصصة (custom properties) التي تُسنَد لها قيمةٌ يمكن إعادة استخدامها في المستند عبر الدالة var()‎.

بطاقة الخاصية

القيمة الابتدائية	لا يوجد
تُطبَّق على	جميع العناصر.
قابلة للوراثة	لا
قابلة للحركة	لا
القيمة المحسوبة	كما حُدِّدَت.

--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);

أمثلة

المثال الآتي يُعرِّف متغيرين ثم يستخدم قيمتهما في بقية المستند، لاحظ كيف ستُطبَّق قواعد الوراثة على الخاصيات المخصصة:

<p id="firstParagraph">يجب أن تحتوي هذه الفقرة على خلفية زرقاء ونص أصفر.</p>
<p id="secondParagraph">يجب أن تحتوي هذه الفقرة على خلفية صفراء ونص أزرق.</p>
<div id="container">
  <p id="thirdParagraph">يجب أن تحتوي هذه الفقرة على خلفية خضراء ونص أصفر.</p>
</div>

شيفرة CSS:

:root {
  --first-color: #488cff;
  --second-color: #ffff8c;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #48ff32;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

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

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

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

تنطبق قواعد تسمية الخاصيات على الخاصيات المخصصة.

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

• مسودة CSS Custom Properties for Cascading Variables Module Level 1.