هذا الدرس ضمن سلسلة تطبيقات على CSS3، أستعرضت في المرة السابقة طريقة عمل الحواف الدائرية بواسطة خاصية border-radius والتي شرحت عنها أيضاً في موضوع مصادر حول تقنية CSS3 الذي كتبته سابقاً، ودرس اليوم يتحدث عن ميزة تعدد الأعمدة في CSS3 وتسمى أيضاً Multi-column ويمكن مشاهدة تفاصيلها كاملة عبر أحد صفحات منظمة W3C.

الأعمدة المتعددة تظهر عبر تقسيم فقرة طويلة واحدة أو عدة فقرات على عدة أعمدة بشكل مرتب كما نراها عند قراءة الصحف والمجلات، وتطبيق اليوم سيكون عن عدة خواص مثل خاصية column-count و column-gap وغيره، والتي تستخدم في عمل تعدد الاعمدة للفقرات لتظهر بشكل مرتب ومتناسق، غالباً ما يتم عملها على ذيل الصفحة لتنسيق معلومات قد لاتكون مهمة ولكن يتم ترتيبها وتنسيق على هذا النمط.

خاصية column-count

تصف هذه الخاصية عدد الأعمدة التي تريد تقسيم الفقرة أو الفقرات بها، وتكتب بهذه الطريقة في CSS3 لتطبيقها على متصفح Mozilla ومحرك Webkit:

-moz-column-count: 3;
-webkit-column-count: 3;

خاصية column-gap

تصف هذه الخاصية المسافة بين الأعمدة الموضوعه، وتكتب بهذه الطريقة في CSS3 لتطبيقها على متصفح Mozilla ومحرك Webkit:

-moz-column-gap: 30px;
-webkit-column-gap: 30px;

خاصية column-width

تصف هذه الخاصية عرض كل عمود من الأعمدة المقسمة، إذا إستخدمت هذه الخاصية فلا حاجة لخاصية column-count لأن عدد الأعمدة ستكون محسوبة مقابل عرض كل عمود، وتكتب بهذه الطريقة في CSS3 لتطبيقها على متصفح Mozilla ومحرك Webkit:

-moz-column-width: 200px;
-webkit-column-width: 200px;

خاصية column-rule

تصف هذه الخاصية الحدود الفاصلة بين الأعمدة ويمكن تحديد الحد الفاصل بنمط قيمة خاصية border أي أنك تحدد سمك ونوع ولون الحد، وتكتب بهذه الطريقة في CSS3 لتطبيقها على متصفح Mozilla ومحرك Webkit:

-moz-column-rule: 1px solid #000000;
-webkit-column-rule: 1px solid #000000;

مثال عملي: فقرات مقسمة على عدة أعمدة

لدينا مثال عملي بسيط على تعدد الأعمدة وسنطبقه في فقرة طويلة تقريباً نريد تقسيمها، سأضع فقرة مقسمة على ثلاثة أعمدة وأخرى على عمودين فقط من باب التنويع، كما أني وضعت معلومات عشوائية ليكون محتوى المثال جاهز، هذه شفرة HTML:

<div id="par-one">

	<p>المدونة " هي المصطلح أو التعريب الأكثر قبولا لكلمة blog الإنجليزية التي نحتوي على كلمتين Web log بمعنى سجل الشبكة [1]  وهي نوع من أنواع المواقع، وعادة ما تكون لفرد بحيث يقوم بإدخال تعليقات، أو يصف حدث معين، أو غيرها من المواد مثل الرسومات أو الفيديو. المدخلات تكون مرتبة ترتيبا زمنيا تصاعديا. "المدونة" ممكن ان تستخدم كفعل، وتعني إضافة محتوى للمدونة. بعض المدونات توفر العديد من الأخبار أو التعليقات على موضوع معين، والبعض الآخر تعمل كاليوميات الشخصية على الإنترنت. المدونة النموذجية هي التي تجمع بين النصوص والصور، وروابط مدونات أخرى، وصفحات ويب، ووسائل الإعلام ذات الصلة بالموضوع. قدرة القارئ أن يضع تعليقات في شكل تفاعلي يعد جزءا هاما في العديد من المدونات. معظم المدونات نصية، على الرغم من أن بعضها يركز على الفن (مدونات الفن)، أوالصور الفوتوغرافية (مدونات الصور)، أوأشرطة الفيديو (مدونات الفيديو) أوالموسيقى (مدونات MP3)، أوالصوت (بودكاست). المدونات الصغرى هو نوع آخر من المدونات، ويضم وظائف قصيرة جدا.</p>

</div>

<div id="par-two">

	<p>بعض المدونات توفر العديد من الأخبار أو التعليقات على موضوع معين، والبعض الآخر تعمل كاليوميات الشخصية على الإنترنت. المدونة النموذجية هي التي تجمع بين النصوص والصور، وروابط مدونات أخرى، وصفحات ويب، ووسائل الإعلام ذات الصلة بالموضوع. قدرة القارئ أن يضع تعليقات في شكل تفاعلي يعد جزءا هاما في العديد من المدونات. معظم المدونات نصية، على الرغم من أن بعضها يركز على الفن (مدونات الفن)، أوالصور الفوتوغرافية (مدونات الصور)، أوأشرطة الفيديو (مدونات الفيديو) أوالموسيقى (مدونات MP3)، أوالصوت (بودكاست). المدونات الصغرى هو نوع آخر من المدونات، ويضم وظائف قصيرة جدا. لقد حلل الباحثون ديناميات كيف أصبحت للمدونات شعبية كبيرة. هناك أساسين من هذه التدابير : شعبية من خلال الاستشهادات، وكذلك شعبية من خلال الانتماء (أي المدونات). الاستنتاج من الدراسات الأساسية لهيكل المدونات هو أن المدونات تحتاج بعض الوقت حتى تصبح ذات شعبية من خلال blogrolls، يمكن permalinks تطوير شعبيته بسرعة أكبر، وربما يكون permalinks أكثر شعبية من blogrolls.</p>

</div>

لن أضع شفرة CSS كاملة سأضع فقط الجزئية المهمة وهي إظهار خاصية تعدد الأعمدة، الفقرتين السابقتين مغطاه بعنصرين الأول يحمل الصنف #pra-one والآخر #pra-two لن نحتاج إلى شرح تنسيقهم لأنهم غير مهمين في الدرس فقط المهم هو الفقرات الآن، لذا يمكنك مراجعة المرفقات أو مشاهدة المثال لرؤية الشفرة كاملة.

سنستخدم خاصيتين فقط، أي أن شفرة CSS تحتوي على خاصية column-count و column-gap مع إضافات دعم متصفح Mozilla و محرك Webkit:

#par-one, #par-two {
	margin: 0 auto;
	padding: 10px;
	width: 700px;
}

#par-one {
	background-color: #e8eef1;
	border: 1px dashed #c6cfd4;
	-moz-column-count: 3;
	-moz-column-gap: 20px;
	-webkit-column-count: 3;
	-webkit-column-gap: 20px;
}

#par-two {
	background-color: #f1e3eb;
	border: 2px dashed #b5a8af;
	-moz-column-count: 2;
	-webkit-column-count: 2;
}

#par-one p {
	margin: 0;
	font: bold 14.5px "Times New Roman", Times, serif;
	line-height: 22px;
	color: #2b2227;
	text-align: justify;
}

#par-two p {
	margin: 0;
	font: 13px  tahoma;
	line-height: 22px;
	color: #1f2021;
	text-align: justify;
}

الشكل الذي سيظهر بدون وجود ميزة تعدد الأعمدة سيكون هكذا:

أما بعد إضافة الخواص إلى الفقرات، فهذه النتيجة النهائية لمثال تعدد الأعمدة:

ويمكن إستخدام الخواص الأخرى أوالإكتفاء بما وضعناه، مثل إستخدام خاصية column-width التي لا تحتاج إلى وجود خاصية column-count فقط تحدد عرض كل عمود وتجد التقسيم بناءاً على عرض العنصر الذي يغطي كامل الفقرة.

ملاحظة: النصوص الموجودة بداخل الأمثلة تم أخذها من موضوع المدونة في الويكيبيديا.