CSS/resize

الخاصية resize في CSS تُحدِّد إذا كان تغيير حجم العنصر ممكنًا، وفي أيّ اتجاه.

/* الكلمات المحجوزة */
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;

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

القيمة الابتدائية	none
تُطبَّق على	العناصر التي لا تكون قيمة الخاصية overflow فيها تساوي visible.
قابلة للوراثة	لا
قابلة للحركة	لا
القيمة المحسوبة	كما حُدِّدَت.

أمثلة

سيُسمَح بتغيير حجم عناصر <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.