الفرق بين المراجعتين ل"CSS/resize"
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}') |
|||
| سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:الخاصية <code>resize</code>}}</noinclude> | <noinclude>{{DISPLAYTITLE:الخاصية <code>resize</code>}}</noinclude> | ||
| − | الخاصية <code>resize</code> في CSS تُحدِّد إذا كان تغيير حجم العنصر ممكنًا، وفي أيّ اتجاه. | + | الخاصية <code>resize</code> في CSS تُحدِّد إذا كان تغيير حجم العنصر ممكنًا، وفي أيّ اتجاه. |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | == بطاقة الخاصية == | |
| − | |||
| − | |||
| − | |||
| − | |||
{| class="wikitable" style="width: 100%;" | {| class="wikitable" style="width: 100%;" | ||
|- | |- | ||
| سطر 32: | سطر 21: | ||
|} | |} | ||
| + | |||
| + | <syntaxhighlight lang="css"> | ||
| + | /* الكلمات المحجوزة */ | ||
| + | resize: none; | ||
| + | resize: both; | ||
| + | resize: horizontal; | ||
| + | resize: vertical; | ||
| + | resize: block; | ||
| + | resize: inline; | ||
| + | |||
| + | /* القيم العامة */ | ||
| + | resize: inherit; | ||
| + | resize: initial; | ||
| + | resize: unset; | ||
| + | </syntaxhighlight> | ||
== أمثلة == | == أمثلة == | ||
| سطر 86: | سطر 90: | ||
الخاصية <code>resize</code> تقبل قيمةً واحدةً من الكلمات المحجوزة التالية. | الخاصية <code>resize</code> تقبل قيمةً واحدةً من الكلمات المحجوزة التالية. | ||
| − | ملاحظة: لا يمكن تطبيق الخاصية <code>resize</code> إلا على العناصر الكتلية التي لا تكون فيها | + | ملاحظة: لا يمكن تطبيق الخاصية <code>resize</code> إلا على العناصر الكتلية التي لا تكون فيها الخاصية <code>[[CSS/overflow|overflow]]</code> تساوي <code>visible</code>. |
| − | === | + | === <code>none</code> === |
لا يمكن تغيير حجم العنصر من قِبل المستخدم. | لا يمكن تغيير حجم العنصر من قِبل المستخدم. | ||
| − | === | + | === <code>both</code> === |
سيوفِّر المتصفح إمكانية تغيير حجم العنصر للمستخدم، مما يسمح بتغيير حجمه بالاتجاهين الأفقي والرأسي. | سيوفِّر المتصفح إمكانية تغيير حجم العنصر للمستخدم، مما يسمح بتغيير حجمه بالاتجاهين الأفقي والرأسي. | ||
| − | === | + | === <code>horizontal</code> === |
سيوفِّر المتصفح إمكانية تغيير حجم العنصر للمستخدم بالاتجاه الأفقي. | سيوفِّر المتصفح إمكانية تغيير حجم العنصر للمستخدم بالاتجاه الأفقي. | ||
| − | === | + | === <code>vertical</code> === |
سيوفِّر المتصفح إمكانية تغيير حجم العنصر للمستخدم بالاتجاه الرأسي. | سيوفِّر المتصفح إمكانية تغيير حجم العنصر للمستخدم بالاتجاه الرأسي. | ||
=== البنية الرسمية === | === البنية الرسمية === | ||
مراجعة 16:43، 29 أغسطس 2018
الخاصية resize في CSS تُحدِّد إذا كان تغيير حجم العنصر ممكنًا، وفي أيّ اتجاه.
بطاقة الخاصية
| القيمة الابتدائية | none
|
|---|---|
| تُطبَّق على | العناصر التي لا تكون قيمة الخاصية overflow فيها تساوي visible.
|
| قابلة للوراثة | لا |
| قابلة للحركة | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
/* الكلمات المحجوزة */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;
/* القيم العامة */
resize: inherit;
resize: initial;
resize: unset;
أمثلة
سيُسمَح بتغيير حجم عناصر <textarea> من قِبل المستخدم في الكثير من المتصفحات؛ لكن يمكن تغيير هذا السلوك باستخدام الخاصية resize:
<textarea>Type some text here.</textarea>
شيفرة CSS:
textarea {
resize: none;
}
يمكن استخدام الخاصية resize لتمكين تغيير حجم أي عنصر، ففي هذا المثال سمحنا للمستخدم بتغيير أبعاد العنصر <div>:
<div class="resizable">
يمكن تغيير حجم هذا العنصر من قِبل المستخدم.
</div>
شيفرة CSS، لاحظ كيف ضبطنا قيمة الخاصية overflow إلى auto، وكيف استخدمنا الخاصيتين max-width و max-height لوضع حدود للأبعاد القصوى لهذا العنصر:
.resizable {
resize: both;
overflow: auto;
padding: 1em;
margin: 1em;
background-color: #f8f9fa;
}
div {
height: 150px;
width: 200px;
max-width: 80%;
max-height: 50vh;
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي (على العنصر <textarea>) | 1.0 | 4.0 | غير مدعومة | 12.1 | 3.0 |
| الدعم على بقية العناصر | 4.0 | 5.0 | غير مدعومة | 15 | 4.0 |
البنية العامة
الخاصية resize تقبل قيمةً واحدةً من الكلمات المحجوزة التالية.
ملاحظة: لا يمكن تطبيق الخاصية resize إلا على العناصر الكتلية التي لا تكون فيها الخاصية overflow تساوي visible.
none
لا يمكن تغيير حجم العنصر من قِبل المستخدم.
both
سيوفِّر المتصفح إمكانية تغيير حجم العنصر للمستخدم، مما يسمح بتغيير حجمه بالاتجاهين الأفقي والرأسي.
horizontal
سيوفِّر المتصفح إمكانية تغيير حجم العنصر للمستخدم بالاتجاه الأفقي.
vertical
سيوفِّر المتصفح إمكانية تغيير حجم العنصر للمستخدم بالاتجاه الرأسي.
البنية الرسمية
resize: none | both | horizontal | vertical;
مصادر ومواصفات
- مسودة CSS Logical Properties Level 1. أضافت القيمتين
blockوinline. - مواصفة CSS Basic User Interface Module Level 3.