خاصية resize
آخر تحديث: 2026-09-13
resize خاصية resize
تتحكم الخاصية resize فيما إذا كان بإمكان المستخدم تغيير حجم العنصر بالسحب، وفي أي اتجاهات. وتُستخدم عادةً على عناصر مثل <textarea> لتمكين المستخدمين من تغيير الحجم بحرية حسب الحاجة، مما يحسّن قابلية استخدام النموذج.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
resize: none | both | horizontal | vertical | block | inline;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | both | horizontal | vertical | block | inline | كلمة مفتاحية | سلوك تغيير الحجم للمستخدم |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| resize | ✓ v4 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： لا يعمل resize إلا بالاقتران مع خاصية overflow (auto أو scroll أو hidden)؛ فبدون قيمة overflow، يُتجاهل resize.
تلميح： يسمح horizontal بتغيير العرض فقط؛ ويسمح vertical بتغيير الارتفاع فقط؛ ويسمح both بتغيير الحجم في كلا الاتجاهين.
❓ الأسئلة الشائعة
Qما العناصر التي يمكن تطبيق خاصية resize في CSS عليها داخل الصفحة؟
Aتدعم textarea ذلك افتراضيًا. أما العناصر الأخرى فيجب أن تستوفي شرطين: قيمة overflow غير visible (auto أو hidden أو scroll)، وحجم محدد أو يمكن استنتاجه. وباستيفاء ذلك، تحصل div و section وحاويات الصور على مقبض سحب. ولا تنطبق العناصر المضمّنة افتراضيًا.
Qكيف أمنع المستخدم من تغيير حجم عنصر textarea في CSS؟
Aاضبط resize: none لإزالة مقبض السحب في الزاوية السفلية اليمنى. استخدم resize: vertical للسماح بتغيير الحجم عموديًا فقط، أو resize: horizontal للسماح به أفقيًا فقط. وعندما يتطلب المنتج تخطيطًا ثابتًا، أو تُحسب قيمة ارتفاع textarea بواسطة JavaScript، يُعد تعطيل resize متطلبًا شائعًا.
Qلماذا لا يعمل resize ولماذا يجب ضبط overflow على العنصر؟
Aتشترط المواصفات ألا يُطبَّق resize إلا على العناصر التي تكون قيمة overflow لها غير visible؛ وإلا تُتجاهل الخاصية — وهذا هو السبب الأكثر شيوعًا للفشل. كما يجب أن يتمكن العنصر فعليًا من تغيير حجمه عند السحب: فالعناصر ذات display: inline والعناصر دون قيود على الحجم لن تعمل. ونقح بالترتيب: overflow، ثم نوع العنصر، ثم ما إذا كان حاوية قابلة للتمرير.
Qهل يمكن لـ resize تحديد الحد الأدنى والأقصى لحجم العنصر؟
Aنعم. تتحكم resize فيما إذا كان يمكن تغيير حجمه، بينما تتحكم min-width و max-width و min-height و max-height في نطاق التغيير، وكلاهما يتراكم معًا. فمثلًا، مع resize: both; max-width: 400px; min-width: 200px; لا يمكن سحب العنصر إلا بين 200px و 400px.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
