الفرق بين المراجعتين لصفحة: «CSS/max-width»
< CSS
ط استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}' |
لا ملخص تعديل |
||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>max-width</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>max-width</code>}}</noinclude> | ||
الخاصية <code>max-width</code> في CSS تضبط العرض الأقصى للعنصر، وهي تمنع القيمة المستخدمة ([[CSS/used value|used value]]) للخاصية <code>[[CSS/width|width]]</code> من أن تتجاوز القيمة المُحدَّدة في الخاصية <code>max-width</code>. | الخاصية <code>max-width</code> في CSS تضبط العرض الأقصى للعنصر، وهي تمنع القيمة المستخدمة ([[CSS/used value|used value]]) للخاصية <code>[[CSS/width|width]]</code> من أن تتجاوز القيمة المُحدَّدة في الخاصية <code>max-width</code>. | ||
== بطاقة الخاصية == | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 32: | سطر 20: | ||
|نسبة مئوية أو طول مطلق أو الكلمة المحجوزة <code>none</code>. | |نسبة مئوية أو طول مطلق أو الكلمة المحجوزة <code>none</code>. | ||
|} | |}<syntaxhighlight lang="css"> | ||
/* <length> أطوال */ | |||
max-width: 3.5em; | |||
/* <percentage> نسب مئوية */ | |||
max-width: 75%; | |||
/* كلمات محجوزة */ | |||
max-width: none; | |||
/* قيم عامة */ | |||
max-width: inherit; | |||
max-width: initial; | |||
max-width: unset; | |||
</syntaxhighlight>الخاصية <code>max-width</code> لها أولوية على الخاصية <code>[[CSS/width|width]]</code>، لكن الخاصية <code>[[CSS/min-width|min-width]]</code> لها أولوية على <code>max-width</code>. | |||
== أمثلة == | == أمثلة == | ||
| سطر 61: | سطر 63: | ||
== البنية العامة == | == البنية العامة == | ||
=== | === <code>none</code> === | ||
لا يوجد عرض أقصى لهذا العنصر. | لا يوجد عرض أقصى لهذا العنصر. | ||
=== | === <code>[[CSS/length|<length>]]</code> === | ||
تحديد العرض الأقصى بالأطوال المطلقة. | تحديد العرض الأقصى بالأطوال المطلقة. | ||
=== | === <code>[[CSS/percentage|<percentage>]]</code> === | ||
تحديد العرض الأقصى كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي. وإذا لم يكن ارتفاع ذلك العنصر مُحدَّدًا بوضوح، فستعامل قيمة النسبة المئوية على أنها صفر. | تحديد العرض الأقصى كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي. وإذا لم يكن ارتفاع ذلك العنصر مُحدَّدًا بوضوح، فستعامل قيمة النسبة المئوية على أنها صفر. | ||
مراجعة 11:55، 4 يوليو 2018
الخاصية max-width في CSS تضبط العرض الأقصى للعنصر، وهي تمنع القيمة المستخدمة (used value) للخاصية width من أن تتجاوز القيمة المُحدَّدة في الخاصية max-width.
بطاقة الخاصية
| القيمة الابتدائية | none
|
|---|---|
| تُطبَّق على | جميع العناصر، ما عدا العناصر السطرية غير المُستبدَلة (non-replaced inline elements)، وأعمدة الجداول، ومجموعات الأعمدة. |
| قابلة للوراثة | لا |
| قابلة للتحريك | نعم |
| القيمة المحسوبة | نسبة مئوية أو طول مطلق أو الكلمة المحجوزة none.
|
/* <length> أطوال */
max-width: 3.5em;
/* <percentage> نسب مئوية */
max-width: 75%;
/* كلمات محجوزة */
max-width: none;
/* قيم عامة */
max-width: inherit;
max-width: initial;
max-width: unset;
الخاصية max-width لها أولوية على الخاصية width، لكن الخاصية min-width لها أولوية على max-width.
أمثلة
سنستخدم في المثال الآتي عنصر <div> عرضه يساوي 50% من عرض العنصر الحاوي عليه، على ألّا يتجاوز عرضه قيمة الخاصية max-width ألا وهي 600px:
<div>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.</div>
شيفرة CSS:
div {
width: 50%;
max-width: 600px;
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 1.0 | 1.0 | 7.0 | 7.0 | 1.0 |
البنية العامة
none
لا يوجد عرض أقصى لهذا العنصر.
<length>
تحديد العرض الأقصى بالأطوال المطلقة.
<percentage>
تحديد العرض الأقصى كنسبة مئوية من عرض العنصر الكتلي الحاوي للعنصر الحالي. وإذا لم يكن ارتفاع ذلك العنصر مُحدَّدًا بوضوح، فستعامل قيمة النسبة المئوية على أنها صفر.
البنية الرسمية
max-width: <length> | <percentage> | none;
مصادر ومواصفات
- مسودة CSS Intrinsic & Extrinsic Sizing Module Level 3، أضافت هذه المواصفة الكلمات المحجوزة
max-contentوmin-contentوfit-contentوfill-availableلكنها ليست مدعومة في المتصفحات بعد. - مسودة CSS Transitions.
- مواصفة CSS Level 2 (Revision 1).