الخاصية column-rule
الخاصية column-rule المختصرة في CSS تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة.
هذه الخاصية ستضبط قيمة الخاصيات column-rule-width و column-rule-style و column-rule-color في خاصيةٍ واحدة.
/* كلمات محجوزة */
column-rule: dotted;
column-rule: solid blue;
column-rule: solid 8px;
column-rule: thick inset blue;
/* القيم العامة */
column-rule: inherit;
column-rule: initial;
column-rule: unset;
| القيمة الابتدائية | لكل خاصية مختصرة:
|
|---|---|
| تُطبَّق على | العناصر متعددة الأعمدة. |
| قابلة للوراثة | لا |
| قابلة للتحريك | نعم |
| القيمة المحسوبة | لكل خاصية مختصرة:
|
أمثلة
مثال عن مختلف القيم للخاصية column-rule مع مكافئاتها من الخاصيات غير المختصرة column-rule-style و column-rule-width و column-rule-color:
p { column-rule: dotted; }
p {
column-rule-style: dotted;
column-rule-width: medium;
column-rule-color: currentColor;
}
div { column-rule: solid blue; }
div {
column-rule-style: solid;
column-rule-width: medium;
column-rule-color: blue;
}
.foo { column-rule: solid 8px; }
.foo {
column-rule-style: solid;
column-rule-width: 8px;
column-rule-color: currentColor;
}
.bar { column-rule: thick inset blue; }
.bar {
column-rule-style: inset;
column-rule-width: thick;
column-rule-color: blue;
}
مثال عن ضبط الخاصية column-rule لقيمة الخاصيتين column-rule-style و column-rule-width:
<p class="content-box">
هذه فقرةٌ نصيةٌ ستُقسَم إلى عمودين باستخدام CSS،
لاحظ الخط الفاصل بين الأعمدة.
</p>
شيفرة CSS:
.content-box {
margin: 1em;
padding: 1em;
width: 400px;
border: 1px solid #eaecf0;
background-color: #f8f9fa;
columns: 3 150px;
column-rule: solid 4px;
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 4.0 (مع السابقة -webkit-)
50 (دون سابقة) |
2.0 (مع السابقة -moz-)
|
10 | 15 (مع السابقة -webkit-)
37 (دون سابقة) |
3.1 (مع السابقة -webkit-)
10 (دون سابقة) |
البنية العامة
تقبل الخاصية column-rule قيمةً أو قيمتين أو ثلاث قيم من القيم التالية وبأي ترتيب.
القيمة <column-rule-width>
قيمة طولية <length> تُمثِّل عرض الخط أو إحدى الكلمات المحجوزة thin أو medium أو thick، راجع صفحة الخاصية column-rule-width لمزيدٍ من المعلومات.
القيمة <column-rule-style>
شكل الخط، راجع صفحة الخاصية column-rule-style لمزيدٍ من المعلومات.
القيمة <column-rule-color>
لون الخط، راجع صفحة الخاصية column-rule-color لمزيدٍ من المعلومات.
البنية الرسمية
column-rule: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>;
مصادر ومواصفات
- مواصفة CSS Multi-column Layout Module.