CSS3 Modules

CSS3 Multi-column Layout

آخر تحيين: 23-10-2014

تصميم موقع مرن : Media Queries CSS3 animations


تتيح لنا وحدة Multi-column Layout Module تنظيم النصوص وفق أعمدة متعددة ، شبيهة بالتقسيم العمودي المتبع في الجرائد .
توفر لغة CSS3 مجموعة لا بأس بها من الخاصيات ، أبرزهاcolumn-count التي تحدد عدد الأعمدة . و الباقي لا يقل أهمية من حيث التنظيم . سنتعرف عليها في هذا الدرس عبر أمثلة

رقم أول إصدار للمتصفحات التي بدأت تدعم الخاصيات
الخاصية
column-count-webkit- 4.0-moz- 2.0-webkit- 3.1-webkit- 15.0
11.1
10.0
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-width
columns
column-span
column-fill-moz- 13.0
بالنسبة للأرقام التي تلي المحددات التصديرية "-moz- , -webkit- " تدل عاى أول إصدار للمتصفح الذي بدأ يأخذ بعين الإعتبار هذه المحددات
بالنسبة للأرقام فوقها تدل على أول إصدار للمتصفح الذي بدأ يدعم الخاصية بدون استعمال المحددات
  • column-count: تحدد عدد أعمدة النص
  • column-gap: تحدد مساحة الفجوة بين الأعمدة
  • column-width: تحدد عرض الأعمدة
  • column-rule-color: تحدد اللون الفاصل بين الأعمدة
  • column-rule-style: تحدد النمط الفاصل بين الأعمدة
  • column-rule-width: تحدد عرض النمط الفاصل بين الأعمدة
  • column-rule: خاصية مختصرة ، تجمع قيم جميع خاصيات column-rule-*
  • columns: خاصية مختصرة تجمع بين الخاصيتين column-width و column-count
  • column-fill: تحدد كيفية ملأ الأعمدة ، يبقى متصفح موزيلا هو الداعم الوحيد لهذه الخاصية ، حاليا
  • column-span: عندما نعطيها قيمة all تجعل العنصر يمتد على طول كل الأعمدة ، هذه الخاصية غير مدعومة من متصفح موزيلا فايرفوكس حاليا

column-width

الخاصية column-width تحدد عرض كل عمود ، و تأخذ قيمة من القيمتين :
length: تحديد القيمة بالبيكسل أو "em" ...إلخ
auto: القيمة الإفتراضية ، تترك الخيار للمتصفح لتقسيم أو عدم تقسيم النص إلى أعمدة

div {
  -webkit-column-width: 100px;
  -moz-column-width: 100px;
  column-width: 100px;
}
مشاهدة النتيجة

column-count

الخاصية column-count تُقسم النص إلى أعمدة ، و تأخذ قيمة من القيمتين :
number : عدد الأعمدة بالأرقام
auto: القيمة الإفتراضية ، مثلا إذا حددنا قيمة الخاصية column-width ، فالخاصية column-count ستمثل أقصى عدد ممكن من الأعمدة حسب العرض الذي حددناه لكل عمود .
في المثال أسفله ، سنقسم النص لثلاثة أعمدة :

div {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}
مشاهدة النتيجة

columns

خاصية مختصرة ، تجمع بين الخاصيتين column-width و column-count . في المثال التالي ، قمنا بتقسيم النص إلى 3 أعمدة كل واحد بعرض 100 بيكسل

div {
  -webkit-columns: 100px 3;
  -moz-columns: 100px 3;
  columns: 100px 3;
}
مشاهدة النتيجة

column-gap

الخاصية column-gap تحدد الفجوة أو المساحة التي تفصل بين الأعمدة ، و تأخذ قيمة من القيمتين :
normal: القيمة الإفتراضية ، و تمثل قيمة "1em"
length: تحديد القيمة بالبيكسل أو "em", ...
في المثال التالي ، حددنا المسافة الفاصلة بين الأعمدة في 40 بيكسل

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

  -webkit-column-gap: 40px;
  -moz-column-gap: 40px;
  column-gap: 40px;
}
مشاهدة النتيجة

column-rule

column-rule خاصية مختصرة ، تجمع خاصيات column-rule-width, column-rule-style, column-rule-color :

div {
  -webkit-column-rule: 4px groove green;
  -moz-column-rule: 4px groove green;
  column-rule: 4px groove green;
}
مشاهدة النتيجة