خاصية column-rule
آخر تحديث: 2026-09-13
column-rule خاصية column-rule
خاصية column-rule هي اختصار لـ column-rule-width و column-rule-style و column-rule-color، وترسم خطًا بين الأعمدة في تخطيط متعدد الأعمدة. تشبه border، إذ تُصيَّر فقط داخل المسافة بين الأعمدة، مما يعزز الفصل البصري للنص متعدد الأعمدة.
| الفئة | |
|---|---|
| القيمة الأولية | medium none currentcolor |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
column-rule: <column-rule-width> || <column-rule-style> || <column-rule-color>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
<column-rule-width> || <column-rule-style> || <column-rule-color> | القيمة | اختصار لخط العمود. |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| column-rule | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： بنية column-rule تعكس border؛ يمكن أن تكون القيم الثلاث بأي ترتيب، ولكن يجب تحديد النمط لكي يُرسم الخط.
تحذير： يظهر column-rule فقط في التخطيطات متعددة الأعمدة؛ مع عمود واحد، لا يظهر أي خط. لا تستهلك عرض الخط عرض العمود؛ بل يُرسم في منتصف المسافة.
❓ الأسئلة الشائعة
Qما الفرق بين column-rule و border؟
Aتُرسم border حول الحواف الأربع للعنصر، مغلّفةً الصندوق بالكامل؛ بينما تُرسم column-rule فقط في المسافات بين الأعمدة لفصل الأعمدة المتجاورة ولا تظهر أبدًا عند الحواف الخارجية. أيضًا، لا تشغل column-rule مساحة إضافية لأنها تُرسم داخل منطقة المسافة، لذا فإن عرضها لا يضغط الأعمدة. وبنيتها تعكس border، بـ width و style و color.
Qكيف أجعل الخط متقطعًا؟
Aعيّن column-rule-style إلى dashed أو dotted، مثلًا column-rule: 2px dashed #999. يقبل النمط جميع أنواع الخطوط التي تدعمها border، مثل solid و dashed و dotted و double. تذكّر أنه يجب تحديد النمط؛ افتراضيًا هو none، وبدونه لا يُرسم أي خط على الإطلاق، مهما كانت العرض أو اللون الموفران. لإطلالة خفيفة، يكفي خط متصل بعرض 1px بلون رمادي فاتح.
Qكيف تعمل الخصائص الفرعية الثلاث لـ column-rule؟
Aيغطي اختصار column-rule ثلاث خصائص فرعية: width مثلًا 1px؛ و style مثلًا solid أو dashed، وهو ضروري لكي يُرسم الخط؛ و color الذي افتراضيه currentcolor. يمكن كتابة القيم الثلاث بأي ترتيب، لذا فإن column-rule: #ccc 1px solid صالح بالمثل. أي خاصية فرعية غير معيّنة تعود لقيمتها الأولية، كما في border، لذا فإن الإعلان الناقص لا يزال يُصيّر خطًا قابلًا للاستخدام.
Qلماذا لا يظهر column-rule؟
Aالأسباب الشائعة: أولًا، لم يتم تعيين column-rule-style، والافتراضي none لا يرسم خطًا؛ وثانيًا، الحاوية ليست فعليًا متعددة الأعمدة، لأنه مع عمود واحد لا توجد مسافة للرسم، لذا تأكد من أن المحتوى طويل بما يكفي وأن column-count أو column-width قد سُريا؛ وثالثًا، الخط يقع داخل المسافة، لذا يجعله column-gap:0 غير مرئي. تحقق من هذه النقاط الثلاث بالترتيب.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
column-gap
عيّن المسافة بين الأعمدة.
border (خاصية الحدود)
خاصية border ذات البنية المشابهة لـ column-rule.
