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

المشكلة التي تحلّها

جرّبت غالبًا هذا الموقف: مستخدم يكتب تعليقًا في <textarea>، يصل النص لحافة الصندوق، وتظهر شريطة تمرير قبيحة تخنق الكتابة. لسنوات، كان الحل الوحيد جافاسكربت يقيس ارتفاع النص عند كل ضغطة مفتاح ويعدّل height يدويًا — كود إضافي لمشكلة تنسيقية بحتة.

خاصية field-sizing تحل المشكلة من داخل CSS نفسه: تجعل عناصر النماذج (input، textarea، select) تكبر وتصغر تلقائيًا حسب محتواها، بلا أي سكربت.

الصياغة والقيم

textarea {
  field-sizing: content;   /* يكبر مع النص */
}

input {
  field-sizing: fixed;     /* الافتراضي: حجم ثابت */
}

مثال: textarea يكبر مع الكتابة

.auto-textarea {
  field-sizing: content;
  min-height: 2.5rem;   /* لا يبدأ أصغر من هذا */
  max-height: 12rem;    /* لا يكبر أكثر من هذا */
  padding: 8px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
}

بهذا السطر الواحد، الصندوق يبدأ بارتفاع سطرين، ويكبر مع كل سطر جديد يكتبه المستخدم، حتى يصل max-height — وبعدها يظهر شريط تمرير طبيعي، تمامًا كما تتوقع.

القاعدة الذهبية: لا تترك content بلا سقف

input[type="text"] {
  field-sizing: content;
  max-width: 100%;   /* وإلا قد يتمدد خارج الحاوية مع نص طويل */
}

• دائمًا رافق field-sizing: content بـ max-height (للـ textarea) أو max-width (للـ input) — بدون سقف، حقل يستقبل نصًا طويلًا جدًا سيتمدد بلا حدود ويكسر تخطيط الصفحة.
• عند الوصول للحد الأقصى، يتصرف العنصر كالمعتاد ويعرض شريط تمرير داخليًا — لا فقدان لأي نص.

الأخطاء الشائعة

• ❌ استخدام field-sizing: content بلا max-height/max-width → الحقل يكبر بلا حدود مع نص طويل ويكسر التخطيط المحيط.
• ❌ توقّع تغيّر لون الحدود أو نمط الحقل → field-sizing يتحكم بالمقاس فقط، لا علاقة له بالمظهر البصري.
• ❌ الاعتماد عليها بلا أي حل بديل في مشروع يستهدف متصفحات قديمة جدًا → تحقق من دعم المتصفح المستهدف قبل الاعتماد الكامل عليها.

خلاصة

field-sizing: content يحرّرك من كود جافاسكربت كان يقيس المحتوى ويعدّل الارتفاع يدويًا — سطر CSS واحد يكفي لحقول نماذج تتكيّف مع ما يكتبه المستخدم، بشرط دائم: ضع لها سقفًا بـ max-height أو max-width.