عرض مصدر CSS/column-rule

<noinclude>{{DISPLAYTITLE:الخاصية <code>column-rule</code>}}</noinclude>
الخاصية <code>column-rule</code> المختصرة في CSS تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة.

هذه الخاصية ستضبط قيمة الخاصيات <code>[[CSS/column-rule-width|column-rule-width]]</code> و <code>[[CSS/column-rule-style|column-rule-style]]</code> و <code>[[CSS/column-rule-color|column-rule-color]]</code> في خاصيةٍ واحدة.<nowiki/><syntaxhighlight lang="css">
/* كلمات محجوزة */
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;
</syntaxhighlight>
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|لكل خاصية مختصرة:
* <code>[[CSS/column-rule-width|column-rule-width]]</code>: <code>medium</code>
* <code>[[CSS/column-rule-style|column-rule-style]]</code>: <code>none</code>
* <code>[[CSS/column-rule-color|column-rule-color]]</code>: <code>currentcolor</code>
|-
! scope="row" |تُطبَّق على
|العناصر متعددة الأعمدة.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|نعم
|-
! scope="row" |القيمة المحسوبة
|لكل خاصية مختصرة:
* <code>[[CSS/column-rule-width|column-rule-width]]</code>: طول مطلق، أو <code>0</code> إذا كانت قيمة الخاصية <code>[[CSS/column-rule-style|column-rule-style]]</code> تساوي <code>none</code> أو <code>hidden</code>.
* <code>[[CSS/column-rule-style|column-rule-style]]</code>: كما حُدِّدَت.
* <code>[[CSS/column-rule-color|column-rule-color]]</code>: قيمة لونية.

|}

== أمثلة ==
مثال عن مختلف القيم للخاصية <code>column-rule</code> مع مكافئاتها من الخاصيات غير المختصرة <code>[[CSS/column-rule-style|column-rule-style]]</code> و <code>[[CSS/column-rule-width|column-rule-width]]</code> و <code>[[CSS/column-rule-color|column-rule-color]]</code>:<syntaxhighlight lang="css">
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;
}
</syntaxhighlight>مثال عن ضبط الخاصية <code>column-rule</code> لقيمة الخاصيتين <code>[[CSS/column-rule-style|column-rule-style]]</code> و <code>[[CSS/column-rule-width|column-rule-width]]</code>:<syntaxhighlight lang="css">
<p class="content-box">
هذه فقرةٌ نصيةٌ ستُقسَم إلى عمودين باستخدام CSS،
لاحظ الخط الفاصل بين الأعمدة.
</p>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
.content-box {
  margin: 1em;
  padding: 1em;
  width: 400px;
  border: 1px solid #eaecf0;
  background-color: #f8f9fa;
  columns: 3 150px;
  column-rule: solid 4px;
}
</syntaxhighlight>
== دعم المتصفحات ==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
! الدعم الأساسي
|4.0 (مع السابقة <code>-webkit-</code>)
50 (دون سابقة)
|2.0 (مع السابقة <code>-moz-</code>)
|10
|15 (مع السابقة <code>-webkit-</code>)
37 (دون سابقة)
|3.1 (مع السابقة <code>-webkit-</code>)
10 (دون سابقة)
|}

== البنية العامة ==
تقبل الخاصية <code>column-rule</code> قيمةً أو قيمتين أو ثلاث قيم من القيم التالية وبأي ترتيب.
=== القيمة <code><column-rule-width></code> ===
قيمة طولية <code>[[CSS/length|<length>]]</code> تُمثِّل عرض الخط أو إحدى الكلمات المحجوزة <code>thin</code> أو <code>medium</code> أو <code>thick</code>، راجع صفحة الخاصية <code>[[CSS/column-rule-width|column-rule-width]]</code> لمزيدٍ من المعلومات.
=== القيمة <code><column-rule-style></code> ===
شكل الخط، راجع صفحة الخاصية <code>[[CSS/column-rule-style|column-rule-style]]</code> لمزيدٍ من المعلومات.
=== القيمة <code><column-rule-color></code> ===
لون الخط، راجع صفحة الخاصية <code>[[CSS/column-rule-color|column-rule-color]]</code> لمزيدٍ من المعلومات.
=== البنية الرسمية ===
<syntaxhighlight lang="css">
column-rule: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>;

</syntaxhighlight>
== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-multicol-1/#column-rule CSS Multi-column Layout Module]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Columns|{{SUBPAGENAME}}]]