عرض مصدر CSS/--*

<noinclude>{{DISPLAYTITLE:الخاصيات المخصصة في CSS}}</noinclude>
أسماء الخاصيات التي تُسبَق بشرطتين <code>--</code>، مثل <code>‎--example-name</code>، تُمثِّل الخاصيات المخصصة (custom properties) التي تُسنَد لها قيمةٌ يمكن إعادة استخدامها في المستند عبر الدالة <code>[[CSS/var|var()‎]]</code>.

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|لا يوجد
|-
! scope="row" |تُطبَّق على
|جميع العناصر.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للحركة
|لا
|-
! scope="row" |القيمة المحسوبة
|كما حُدِّدَت.

|}<syntaxhighlight lang="css">
--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);

</syntaxhighlight>

== أمثلة ==
المثال الآتي يُعرِّف متغيرين ثم يستخدم قيمتهما في بقية المستند، لاحظ كيف ستُطبَّق قواعد الوراثة على الخاصيات المخصصة:<syntaxhighlight lang="css">
<p id="firstParagraph">This paragraph should have a blue background and yellow text.</p>
<p id="secondParagraph">This paragraph should have a yellow background and blue text.</p>
<div id="container">
  <p id="thirdParagraph">This paragraph should have a green background and yellow text.</p>
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="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);
}
</syntaxhighlight>
== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|36
|36
|غير مدعومة
|24
|9.1
|}
== البنية العامة ==
تنطبق قواعد تسمية الخاصيات على الخاصيات المخصصة.

== مصادر ومواصفات ==
* مسودة [https://drafts.csswg.org/css-variables/#defining-variables CSS Custom Properties for Cascading Variables Module Level 1]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]