الخاصيات المخصصة في CSS
< 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.
أسماء الخاصيات التي تُسبَق بشرطتين --، مثل --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 |
البنية العامة
تنطبق قواعد تسمية الخاصيات على الخاصيات المخصصة.