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

من موسوعة حسوب
< 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

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

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

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