الفرق بين المراجعتين ل"CSS/column-width"
< CSS
اذهب إلى التنقل
اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| سطر 4: | سطر 4: | ||
العدد المُحدَّد للأعمدة سيعتمد على المساحة المتوافرة، أو على العدد المُحدَّد في الخاصية <code>[[CSS/column-count|column-count]]</code>. | العدد المُحدَّد للأعمدة سيعتمد على المساحة المتوافرة، أو على العدد المُحدَّد في الخاصية <code>[[CSS/column-count|column-count]]</code>. | ||
| − | + | == بطاقة الخاصية == | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 36: | سطر 23: | ||
|} | |} | ||
| + | |||
| + | لن يكون من الأفضل ضبط قيمة الخاصيتين <code>column-width</code> و <code>[[CSS/column-count|column-count]]</code>، فمن المستحسن منح المتصفح بعض المرونة في حساب عدد الأعمدة اعتمادًا على المساحة المتوافرة، مما يسمح بإنشاء تخطيط متجاوب (responsive).<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> | ||
== أمثلة == | == أمثلة == | ||
| سطر 90: | سطر 92: | ||
== البنية العامة == | == البنية العامة == | ||
تقبل الخاصية <code>column-width</code> قيمةً واحدةً أو قيمتين. | تقبل الخاصية <code>column-width</code> قيمةً واحدةً أو قيمتين. | ||
| − | === | + | === <code>auto</code> === |
تُشير هذه الكلمة المحجوزة إلى أنَّ عدد الأعمدة سيُحدَّد عبر خاصيات CSS الأخرى مثل <code>[[CSS/column-count|column-count]]</code>. | تُشير هذه الكلمة المحجوزة إلى أنَّ عدد الأعمدة سيُحدَّد عبر خاصيات CSS الأخرى مثل <code>[[CSS/column-count|column-count]]</code>. | ||
| − | === | + | === <code>[[CSS/length|<length>]]</code>=== |
| − | + | <code>[[CSS/length|<length>]]</code> تعطي المتصفح فكرةً عن العرض الأمثل للعمود، لكن عرض العمود الفعلي قد يكون أكبر من هذه القيمة (لملء المساحة الفارغة المتبقية)، أو أضيق (إذا كانت المساحة المتوافر أقل من عرض العمود المُحدَّد). يجب أن تكون هذه القيمة موجبةً. | |
=== البنية الرسمية === | === البنية الرسمية === | ||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
مراجعة 18:11، 30 أغسطس 2018
الخاصية column-width في CSS تُحدِّد ما هو العرض الأدنى للأعمدة التي سينقسم العنصر إليها، وهذه القيمة سيستعملها المتصفح لمعرفة عدد الأعمدة الكلي.
العدد المُحدَّد للأعمدة سيعتمد على المساحة المتوافرة، أو على العدد المُحدَّد في الخاصية column-count.
بطاقة الخاصية
| القيمة الابتدائية | auto
|
|---|---|
| تُطبَّق على | جميع الحاويات الكتلية (block containers) عدا حاويات الجداول. |
| قابلة للوراثة | لا |
| قابلة للتحريك | نعم |
| القيمة المحسوبة | طول مطلق أكبر من الصفر. |
لن يكون من الأفضل ضبط قيمة الخاصيتين column-width و column-count، فمن المستحسن منح المتصفح بعض المرونة في حساب عدد الأعمدة اعتمادًا على المساحة المتوافرة، مما يسمح بإنشاء تخطيط متجاوب (responsive).
/* كلمة محجوزة */
column-width: auto;
/* <length> قيم طولية */
column-width: 6px;
column-width: 25em;
column-width: 0.3vw;
/* القيم العامة */
column-width: inherit;
column-width: initial;
column-width: unset;
أمثلة
مثال على استخدام الخاصية column-width وضبط قيمتها إلى 100px:
<p class="content-box">
هذه فقرةٌ نصيةٌ ستُقسَم إلى ثلاثة أعمدة باستخدام CSS،
لاحظ أنَّ النص سيوزَّع بالتساوي بين الأعمدة.
</p>
شيفرة CSS:
.content-box {
margin: 1em;
padding: 1em;
width: 400px;
border: 1px solid #eaecf0;
background-color: #f8f9fa;
column-width: 100px;
}
مثال على ضبط قيمة الخاصية column-count إلى 2 للإشارة إلى العدد الأقصى للأعمدة، وسنضبط قيمة الخاصية column-width إلى 100px:
<p class="content-box">
هذه فقرةٌ نصيةٌ ستُقسَم إلى عمودين باستخدام CSS،
لاحظ أنَّ النص سيوزَّع بالتساوي بين الأعمدة.
</p>
شيفرة CSS:
.content-box {
margin: 1em;
padding: 1em;
width: 400px;
border: 1px solid #eaecf0;
background-color: #f8f9fa;
column-count: 2;
column-width: 100px;
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 4.0 (مع السابقة -webkit-)
50 (دون سابقة) |
2.0 (مع السابقة -moz-)
|
10 | 15 (مع السابقة -webkit-)
37 (دون سابقة) |
3.1 (مع السابقة -webkit-)
10 (دون سابقة) |
البنية العامة
تقبل الخاصية column-width قيمةً واحدةً أو قيمتين.
auto
تُشير هذه الكلمة المحجوزة إلى أنَّ عدد الأعمدة سيُحدَّد عبر خاصيات CSS الأخرى مثل column-count.
<length>
<length> تعطي المتصفح فكرةً عن العرض الأمثل للعمود، لكن عرض العمود الفعلي قد يكون أكبر من هذه القيمة (لملء المساحة الفارغة المتبقية)، أو أضيق (إذا كانت المساحة المتوافر أقل من عرض العمود المُحدَّد). يجب أن تكون هذه القيمة موجبةً.
البنية الرسمية
column-width: <length> | auto;
مصادر ومواصفات
- مواصفة CSS Writing Modes Module Level 3، أضافت هذه المواصفة الكلمات المحجوزة
min-contentوmax-contentوfill-availableوfit-content، لكنها ليست مدعومة من أيّ متصفح في الوقت الراهن. - مواصفة CSS Multi-column Layout Module.