الفرق بين المراجعتين لصفحة: «CSS/--*»
< CSS
لا ملخص تعديل |
جميل-بيلوني (نقاش | مساهمات) ط تعديل التصنيفات |
||
سطر 82: | سطر 82: | ||
[[تصنيف:CSS|{{SUBPAGENAME}}]] | [[تصنيف:CSS|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Property|{{SUBPAGENAME}}]] | [[تصنيف:CSS Property|{{SUBPAGENAME}}]] | ||
[[تصنيف:CSS Miscellaneous|{{SUBPAGENAME}}]] |
المراجعة الحالية بتاريخ 11:01، 19 مارس 2019
أسماء الخاصيات التي تُسبَق بشرطتين --
، مثل --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 |
البنية العامة
تنطبق قواعد تسمية الخاصيات على الخاصيات المخصصة.