field-sizing

تكبير حقول النموذج تلقائيًا field-sizing

field-sizing يجعل input وtextarea وselect تكبر وتصغر تلقائيًا حسب محتواها، بدل الحجم الثابت — بلا سطر جافاسكربت واحد.

الحل التقليدي لجعل textarea يكبر مع الكتابة كان جافاسكربت يقيس ارتفاع المحتوى عند كل ضغطة مفتاح ويعدّل height يدويًا — كود إضافي لمشكلة تنسيقية بحتة. field-sizing: content; يحلّها من داخل CSS مباشرة: العنصر يكبر ويصغر ليلائم محتواه تمامًا، كأنه صندوق عادي لا حقل نموذج بحجم ثابت.

القيمة الافتراضية fixed تحافظ على السلوك المعتاد (حجم ثابت). لا علاقة لـ field-sizing بالمظهر البصري — فقط بالمقاس، ويجب دائمًا مرافقتها بـ max-height أو max-width لمنع تمدّد الحقل بلا حدود مع محتوى طويل.

الصياغة

textarea {
  field-sizing: content; /* fixed (افتراضي) | content */
  min-height: 2.5rem;
  max-height: 12rem;
}

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .auto { field-sizing: content; min-height: 2.5rem; max-height: 8rem; width: 100%; box-sizing: border-box; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-family: inherit; }
</style>
<textarea class="auto">اكتب هنا وسيكبر الصندوق مع نصك تلقائيًا حتى الحد الأقصى...</textarea>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
fixed	الافتراضي — حجم ثابت لا يتأثر بالمحتوى
content	يكبر ويصغر تلقائيًا ليلائم المحتوى بدقة

💡 نصائح عملية

رافق content دائمًا بـ max-height (للـ textarea) أو max-width (للـ input) لمنع التمدد بلا حدود
استخدمها لتبسيط حقول العناوين والتعليقات القصيرة بلا أي جافاسكربت لقياس الارتفاع

⚠️ أخطاء شائعة

استخدام field-sizing: content بلا سقف max-height/max-width → الحقل يتمدد بلا حدود ويكسر التخطيط
توقّع تغيّر لون أو حدود الحقل → field-sizing يتحكم بالمقاس فقط لا بالمظهر

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs