الفرق بين المراجعتين لصفحة: «CSS/column-fill»

من موسوعة حسوب
< CSS
→ التعديل السابق
مرئينص الويكي
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}'
لا ملخص تعديل
 
(2 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة)
سطر 2: سطر 2:
الخاصية <code>column-fill</code> في CSS تُحدِّد كيف يجب تقسيم المحتوى على الأعمدة، فباستخدام هذه الخاصية ستتحكم إذا كان يجب موازنة محتوى الأعمدة أم لا.
الخاصية <code>column-fill</code> في CSS تُحدِّد كيف يجب تقسيم المحتوى على الأعمدة، فباستخدام هذه الخاصية ستتحكم إذا كان يجب موازنة محتوى الأعمدة أم لا.


إذا لم تُضبَط قيمة هذه الخاصية إلى <code>balance</code>، فستُملأ الأعمدة بالمحتوى بالتتالي، أي قد لا تُملأ بعض الأعمدة بالمحتوى كليًّا أو جزئيًا، أما إذا ضُبِطَت إلى <code>balance</code> فسيحاول المتصفح أن يجعل ارتفاع الأعمدة متساويًا قدر الإمكان، لكن مع احترام الفواصل بين الصفحات، وقيمة الخاصية <code>[[CSS/widows|widows]]</code> و <code>[[CSS/orphans|orphans]]</code>، وغيرهما من الخاصيات التي قد تؤثر على ارتفاع الأعمدة.<nowiki/><syntaxhighlight lang="css">
== بطاقة الخاصية ==
/* كلمة محجوزة */
column-width: auto;
 
/* <length> قيم طولية */
column-width: 6px;
column-width: 25em;
column-width: 0.3vw;
 
/* القيم العامة */
column-width: inherit;
column-width: initial;
column-width: unset;
</syntaxhighlight>
{| class="wikitable" style="width: 100%;"
{| class="wikitable" style="width: 100%;"
|-
|-
سطر 34: سطر 21:


|}
|}
إذا لم تُضبَط قيمة هذه الخاصية إلى <code>balance</code>، فستُملأ الأعمدة بالمحتوى بالتتالي، أي قد لا تُملأ بعض الأعمدة بالمحتوى كليًّا أو جزئيًا، أما إذا ضُبِطَت إلى <code>balance</code> فسيحاول المتصفح أن يجعل ارتفاع الأعمدة متساويًا قدر الإمكان، لكن مع احترام الفواصل بين الصفحات، وقيمة الخاصية <code>[[CSS/widows|widows]]</code> و <code>[[CSS/orphans|orphans]]</code>، وغيرهما من الخاصيات التي قد تؤثر على ارتفاع الأعمدة.<nowiki/><syntaxhighlight lang="css">
/* كلمة محجوزة */
column-width: auto;
/* <length> قيم طولية */
column-width: 6px;
column-width: 25em;
column-width: 0.3vw;
/* القيم العامة */
column-width: inherit;
column-width: initial;
column-width: unset;
</syntaxhighlight>


== أمثلة ==
== أمثلة ==
سطر 39: سطر 41:
<p class="content-box balance">
<p class="content-box balance">
<code>column-fill: balance;</code>
<code>column-fill: balance;</code>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
</p>
</p>
<hr>
<hr>
سطر 45: سطر 47:
<p class="content-box auto">
<p class="content-box auto">
<code>column-fill: auto;</code>
<code>column-fill: auto;</code>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
</p>
</p>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
سطر 83: سطر 85:
== البنية العامة ==
== البنية العامة ==
تقبل الخاصية <code>column-fill</code> قيمةً من الكلمتين المحجوزتين التاليتين.
تقبل الخاصية <code>column-fill</code> قيمةً من الكلمتين المحجوزتين التاليتين.
=== القيمة <code>auto</code> ===
=== <code>auto</code> ===
تُشير هذه الكلمة المحجوزة إلى أنَّ الأعمدة ستُملأ بالمحتوى بالتتالي، أي قد لا تُملأ بعض الأعمدة بالمحتوى كليًّا أو جزئيًا.
تُشير هذه الكلمة المحجوزة إلى أنَّ الأعمدة ستُملأ بالمحتوى بالتتالي، أي قد لا تُملأ بعض الأعمدة بالمحتوى كليًّا أو جزئيًا.
=== القيمة <code>balance</code>===
===<code>balance</code>===
تُشير هذه الكلمة المحجوزة إلى أنَّ المتصفح سيحاول أن يجعل ارتفاع الأعمدة متساويًا قدر الإمكان.
تُشير هذه الكلمة المحجوزة إلى أنَّ المتصفح سيحاول أن يجعل ارتفاع الأعمدة متساويًا قدر الإمكان.
=== البنية الرسمية ===
=== البنية الرسمية ===
سطر 92: سطر 94:


</syntaxhighlight>
</syntaxhighlight>
== مصادر ومواصفات ==
==  انظر أيضًا ==
* صفحة الخاصية  <code>[[CSS/column-count|column-count]]</code> التي تُحدِّد ما هو عدد الأعمدة التي سينقسم العنصر إليها.
* صفحة الخاصية  <code>[[CSS/column-gap|column-gap]]</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/#column-fill CSS Multi-column Layout Module].  
* مواصفة [https://drafts.csswg.org/css-multicol-1/#column-fill CSS Multi-column Layout Module].  
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Columns|{{SUBPAGENAME}}]]
[[تصنيف:CSS Columns|{{SUBPAGENAME}}]]

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

الخاصية column-fill في CSS تُحدِّد كيف يجب تقسيم المحتوى على الأعمدة، فباستخدام هذه الخاصية ستتحكم إذا كان يجب موازنة محتوى الأعمدة أم لا.

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

القيمة الابتدائية balance
تُطبَّق على العناصر متعددة الأعمدة.
قابلة للوراثة لا
قابلة للتحريك لا
القيمة المحسوبة كما حُدِّدَت.

إذا لم تُضبَط قيمة هذه الخاصية إلى balance، فستُملأ الأعمدة بالمحتوى بالتتالي، أي قد لا تُملأ بعض الأعمدة بالمحتوى كليًّا أو جزئيًا، أما إذا ضُبِطَت إلى balance فسيحاول المتصفح أن يجعل ارتفاع الأعمدة متساويًا قدر الإمكان، لكن مع احترام الفواصل بين الصفحات، وقيمة الخاصية widows و orphans، وغيرهما من الخاصيات التي قد تؤثر على ارتفاع الأعمدة.

/* كلمة محجوزة */
column-width: auto;

/* <length> قيم طولية */
column-width: 6px;
column-width: 25em;
column-width: 0.3vw;

/* القيم العامة */
column-width: inherit;
column-width: initial;
column-width: unset;

أمثلة

مثال عن استخدام الخاصية column-fill على عنصرَي <p> مع القيمتين auto و balance، لاحظ أنَّ تأثير الخاصية column-fill سيكون جليًا إذا كان ارتفاع العنصر مُحدَّدًا:

<p class="content-box balance">
<code>column-fill: balance;</code>
حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
</p>
<hr>

<p class="content-box auto">
<code>column-fill: auto;</code>
حسوب مجموعة من شركات الانترنت تخدم المستخدمين العرب حول العالم. تدير حسوب أكبر منصتي عمل حر عربية وأكبر شبكة إعلانية في منطقة الشرق الأوسط وشمال أفريقيا، بالإضافة لمنتجات وشركات أخرى. توفّر حسوب حلولاً ومنتجات تساعد الشباب العرب على العمل والتطوّر وتتألّف من فريق عمل شاب وشغوف من مختلف الدول العربية.
</p>

شيفرة CSS:

.content-box {
  margin: 1em;
  padding: 1em;
  column-count: 3;
  column-rule: 1px solid black;
  border: 1px solid #eaecf0;
  background-color: #f8f9fa;
  height: 200px;
}

.balance { column-fill: balance; }
.auto { column-fill: auto; }

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

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

50 (دون سابقة)

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

37 (دون سابقة)

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

10 (دون سابقة)

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

تقبل الخاصية column-fill قيمةً من الكلمتين المحجوزتين التاليتين.

auto

تُشير هذه الكلمة المحجوزة إلى أنَّ الأعمدة ستُملأ بالمحتوى بالتتالي، أي قد لا تُملأ بعض الأعمدة بالمحتوى كليًّا أو جزئيًا.

balance

تُشير هذه الكلمة المحجوزة إلى أنَّ المتصفح سيحاول أن يجعل ارتفاع الأعمدة متساويًا قدر الإمكان.

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

column-fill: auto | balance;

 انظر أيضًا

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