الفرق بين المراجعتين ل"CSS/columns"

من موسوعة حسوب
< CSS
اذهب إلى التنقل اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')
 
(مراجعة متوسطة واحدة بواسطة نفس المستخدم غير معروضة)
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:الخاصية <code>columns</code>}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:الخاصية <code>columns</code>}}</noinclude>
−
الخاصية <code>columns</code> في CSS هي خاصية مختصرة تسمح لنا بضبط قيمة الخاصيتين <code>[[CSS/@font-face|column-width]]</code> و <code>[[CSS/column-count|column-count]]</code> في آنٍ واحد.<nowiki/><syntaxhighlight lang="css">
+
الخاصية <code>columns</code> في CSS هي خاصية مختصرة تسمح لنا بضبط قيمة الخاصيتين <code>[[CSS/@font-face|column-width]]</code> و <code>[[CSS/column-count|column-count]]</code> في آنٍ واحد.
−
/* column-width */
 
−
columns: 1em;
 
−
 
 
−
/* column-count */
 
−
columns: auto;
 
−
columns: 1;
 
−
 
 
−
/* column-width و column-count */
 
−
columns: 1 auto;
 
−
columns: auto 12em;
 
−
columns: auto auto;
 
  
−
/* القيم العامة */
+
== بطاقة الخاصية ==
−
columns: inherit;
 
−
columns: initial;
 
−
columns: unset;
 
−
</syntaxhighlight>
 
 
{| class="wikitable" style="width: 100%;"
 
{| class="wikitable" style="width: 100%;"
 
|-
 
|-
سطر 39: سطر 24:
 
* <code>[[CSS/column-count|column-count]]</code>: كما حُدِّدَت.
 
* <code>[[CSS/column-count|column-count]]</code>: كما حُدِّدَت.
 
|}
 
|}
 +
 +
<syntaxhighlight lang="css">
 +
/* column-width */
 +
columns: 1em;
 +
 +
/* column-count */
 +
columns: auto;
 +
columns: 1;
 +
 +
/* column-width و column-count */
 +
columns: 1 auto;
 +
columns: auto 12em;
 +
columns: auto auto;
 +
 +
/* القيم العامة */
 +
columns: inherit;
 +
columns: initial;
 +
columns: unset;
 +
</syntaxhighlight>
  
 
== أمثلة ==
 
== أمثلة ==
سطر 92: سطر 96:
 
== البنية العامة ==
 
== البنية العامة ==
 
تقبل الخاصية <code>columns</code> قيمةً واحدةً أو قيمتين.
 
تقبل الخاصية <code>columns</code> قيمةً واحدةً أو قيمتين.
−
=== القيمة <code><column-width></code> ===
+
=== <code><column-width></code> ===
 
قيمة طولية <code>[[CSS/length|<length>]]</code> تعطي المتصفح فكرةً عن العرض الأمثل للعمود، لكن عرض العمود الفعلي قد يكون أكبر من هذه القيمة (لملء المساحة الفارغة المتبقية)، أو أضيق (إذا كانت المساحة المتوافرة أقل من عرض العمود المُحدَّد). يجب أن تكون هذه القيمة موجبةً.
 
قيمة طولية <code>[[CSS/length|<length>]]</code> تعطي المتصفح فكرةً عن العرض الأمثل للعمود، لكن عرض العمود الفعلي قد يكون أكبر من هذه القيمة (لملء المساحة الفارغة المتبقية)، أو أضيق (إذا كانت المساحة المتوافرة أقل من عرض العمود المُحدَّد). يجب أن تكون هذه القيمة موجبةً.
−
=== القيمة <code><column-count></code> ===
+
=== <code><column-count></code> ===
−
عدد صحيح موجب <code>[[CSS/integer|<integer>]]</code> يُحدِّد العدد المثالي للأعمدة التي يجب تقسيم المحتوى إليها، وإذا ضٌبِطَت قيمة الخاصية <code>[[CSS/column-width|column-width]]</code> إلى قيمة لا تساوي <code>auto</code>، فستُشير هذه القيمة إلى العدد الأقصى من الأعمدة المسموحة.
+
عدد صحيح موجب <code>[[CSS/integer|<integer>]]</code> يُحدِّد العدد المثالي للأعمدة التي يجب تقسيم المحتوى إليها، وإذا ضٌبِطَت الخاصية <code>[[CSS/column-width|column-width]]</code> إلى قيمة لا تساوي <code>auto</code>، فستُشير هذه القيمة إلى العدد الأقصى من الأعمدة المسموحة.
 
=== البنية الرسمية ===
 
=== البنية الرسمية ===
 
<syntaxhighlight lang="css">
 
<syntaxhighlight lang="css">
سطر 101: سطر 105:
  
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
== انظر أيضًا ==
 +
* صفحة الخاصية  <code>[[CSS/column-count|column-count]]</code> التي تُحدِّد ما هو عدد الأعمدة التي سينقسم العنصر إليها.
 +
* صفحة الخاصية  <code>[[CSS/column-gap|column-gap]]</code> التي تضبط حجم الفراغ بين الأعمدة في العناصر متعددة الأعمدة.
 +
* صفحة الخاصية  <code>[[CSS/column-fill|column-fill]]</code> التي تُحدِّد كيف يجب تقسيم المحتوى على الأعمدة.
 +
* صفحة الخاصية  <code>[[CSS/column-rule|column-rule]]</code> التي تُحدِّد شكل الخط العمودي (rule) الذي سيُرسَم بين الأعمدة في العناصر متعددة الأعمدة، والخاصيات الفرعية لهذه الخاصية وهي <code>[[CSS/column-rule-color|column-rule-color]]</code> و <code>[[CSS/column-rule-style|column-rule-style]]</code> و <code>[[CSS/column-rule-width|column-rule-width]]</code>.
 +
* صفحة الخاصية  <code>[[CSS/column-span|column-span]]</code> التي تسمح بأن يمتد أحد العناصر على جميع الأعمدة وذلك عند ضبط القيمة <code>all</code> لها.
 +
* صفحة الخاصية  <code>[[CSS/column-width|column-width]]</code> التي تُحدِّد ما هو العرض الأدنى للأعمدة التي سينقسم العنصر إليها.
 +
 
== مصادر ومواصفات ==
 
== مصادر ومواصفات ==
 
* مواصفة [https://drafts.csswg.org/css-multicol-1/#columns CSS Multi-column Layout Module].  
 
* مواصفة [https://drafts.csswg.org/css-multicol-1/#columns CSS Multi-column Layout Module].  

المراجعة الحالية بتاريخ 07:32، 12 سبتمبر 2018

الخاصية columns في CSS هي خاصية مختصرة تسمح لنا بضبط قيمة الخاصيتين column-width و column-count في آنٍ واحد.

بطاقة الخاصية

القيمة الابتدائية لكل خاصية مختصرة:
تُطبَّق على جميع الحاويات الكتلية (block containers) عدا حاويات الجداول.
قابلة للوراثة لا
قابلة للتحريك نعم
القيمة المحسوبة لكل خاصية مختصرة: 
/* column-width */
columns: 1em;

/* column-count */
columns: auto;
columns: 1;

/* column-width و column-count */
columns: 1 auto;
columns: auto 12em;
columns: auto auto;

/* القيم العامة */
columns: inherit;
columns: initial;
columns: unset;

أمثلة

مثال على استخدام الخاصية columns لضبط قيمة الخاصية column-count إلى 3:

<p class="content-box">
هذه فقرةٌ نصيةٌ ستُقسَم إلى ثلاثة أعمدة باستخدام CSS،
لاحظ أنَّ النص سيوزَّع بالتساوي بين الأعمدة.
</p>

شيفرة CSS:

.content-box {
  margin: 1em;
  padding: 1em;
  width: 400px;
  border: 1px solid #eaecf0;
  background-color: #f8f9fa;
  columns: 3;
}

مثال على استخدام الخاصية columns لضبط قيمة الخاصية column-count إلى 3 للإشارة إلى العدد الأقصى للأعمدة، وسنضبط قيمة الخاصية column-width إلى 150px:

<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;
}

دعم المتصفحات

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 4.0 (مع السابقة -webkit-)

50 (دون سابقة)

2.0 (مع السابقة -moz-) 10 15 (مع السابقة -webkit-)

37 (دون سابقة)

3.1 (مع السابقة -webkit-)

10 (دون سابقة)

البنية العامة

تقبل الخاصية columns قيمةً واحدةً أو قيمتين.

<column-width>

قيمة طولية <length> تعطي المتصفح فكرةً عن العرض الأمثل للعمود، لكن عرض العمود الفعلي قد يكون أكبر من هذه القيمة (لملء المساحة الفارغة المتبقية)، أو أضيق (إذا كانت المساحة المتوافرة أقل من عرض العمود المُحدَّد). يجب أن تكون هذه القيمة موجبةً.

<column-count>

عدد صحيح موجب <integer> يُحدِّد العدد المثالي للأعمدة التي يجب تقسيم المحتوى إليها، وإذا ضٌبِطَت الخاصية column-width إلى قيمة لا تساوي auto، فستُشير هذه القيمة إلى العدد الأقصى من الأعمدة المسموحة.

البنية الرسمية

columns: <'column-width'> || <'column-count'>;

انظر أيضًا

  • صفحة الخاصية  column-count التي تُحدِّد ما هو عدد الأعمدة التي سينقسم العنصر إليها.
  • صفحة الخاصية  column-gap التي تضبط حجم الفراغ بين الأعمدة في العناصر متعددة الأعمدة.
  • صفحة الخاصية  column-fill التي تُحدِّد كيف يجب تقسيم المحتوى على الأعمدة.
  • صفحة الخاصية  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/columns&oldid=17784"