الخاصية 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'>;

 انظر أيضًا

  • صفحة الخاصية  column-count التي تُحدِّد ما هو عدد الأعمدة التي سينقسم العنصر إليها.
  • صفحة الخاصية  column-fill التي تُحدِّد كيف يجب تقسيم المحتوى على الأعمدة.
  • صفحة الخاصية  column-gap التي تضبط حجم الفراغ بين الأعمدة في العناصر متعددة الأعمدة (multi-column elements).
  • صفحة الخاصية  column-rule التي تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة، والخاصيات الفرعية لهذه الخاصية وهي column-rule-color و column-rule-style و column-rule-width.
  • صفحة الخاصية  column-spanالتي سمح بأن يمتد أحد العناصر على جميع الأعمدة وذلك عند ضبط القيمة all لها.
  • صفحة الخاصية  column-width التي تُحدِّد ما هو العرض الأدنى للأعمدة التي سينقسم العنصر إليها.

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

مجلوبة من «https://wiki.hsoub.com/index.php?title=CSS/column-rule&oldid=17776»