تغيير حجم حقل لغة CSS

سطر واحد من التعليمات البرمجية لتغيير حجم العناصر تلقائيًا مع محتوى قابل للتعديل.

Adam Argyle

بدون استخدام السمة field-sizing، لإنشاء حقل إدخال بحجم جيد، كان عليك إمّا تخمين متوسط حجم إدخال حقل نصي أو استخدام JavaScript لحساب الأحرف وزيادة ارتفاع العنصر أو عرضه حسب إدخال المستخدم للنص. وبعبارة أخرى، لم يكن الأمر سهلاً، وكان عرضة للخطأ عند محاولة متابعة المحتوى الذي أدخله المستخدم في الإدخال.

مع field-sizing، تحتاج إلى سطر واحد في CSS لتفعيل تغيير الحجم استنادًا إلى المحتوى. يعمل أسلوب المقاسات المستند إلى المحتوى هذا أيضًا على أكثر من مساحة نصية!

textarea, select, input {
  field-sizing: content;
}

روابط سريعة

المواصفات | الشرح

هل تعجبك الفيديوهات القصيرة؟

ينشر كلّ من Wes Bos وJhey فيديو رائعًا على Twitter لتعريفك بـ field-sizing.

ما العناصر التي تتأثر بحجم الحقل؟

في ما يلي قائمة بعناصر <form> التي يمكن استخدام field-sizing عليها، مع ملخص عن تأثيراتها على كل منها.

<textarea>

يتم تصغير الإدخال إلى min-inline-size أو ليناسب العنصر النائب.

وأثناء كتابة المستخدمين، يزداد الإدخال في الاتجاه المضمَّن حتى يصل إلى الحد الأقصى للحجم المضمَّن، حيث يلتف النص عند النقطة ويكبر حجم مجموعة الإدخال ليتناسب مع السطر الجديد.

<select> و<select multiple>

يتقلص عنصر التحديد ليلائم الخيار المحدد.

يزيد حجم الاختيار الذي يتضمّن السمة multiple لملاءمة الخيار الأوسع، كما يزيد طوله حسب الحاجة لتناسب عدد الخيارات.

<input type="text"> و<input type="email"> و<input type="number">

يتم تصغير الإدخال إلى min-inline-size أو ليناسب العنصر النائب.

أثناء كتابة المستخدمين، يزداد الإدخال في الاتجاه المضمّن إلى أن يصل إلى max-inline-size، وعندها يقطع الفائض قيمة الإدخال.

<input type="file">

ويتم تصغير الإدخال وصولاً إلى الزر ونص اسم الملف الذي تم ملؤه مسبقًا.

عند تحميل ملف، يصبح الإدخال بنفس عرض الزر بالإضافة إلى نص اسم الملف.

رؤية النتائج واختبارها ومقارنتها

في ما يلي مثال تفاعلي وبسيط للسلوكيات السابقة واللاحقة لكل عنصر من عناصر النموذج، متأثرة بسياسة field-sizing.

جارٍ النظر عن قرب

عند استخدام [placeholder]، يصبح العنصر النائب المحتوى. تم ذكر ذلك سابقًا ولكن تم ذكره هنا، لأنه من المهم معرفة وقت تصميم نموذج. وسيؤدي العنصر النائب الطويل أو القصير إلى تغيير الحجم الأساسي للمدخلات باستخدام field-sizing: content.

التعامل مع النمط الفارغة والكاملة

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

تعتبر الأنماط التالية نقطة انطلاق جيدة. وهي تساعد على عدم انهيار العناصر في مربّع صغير جدًا، وأيضًا في حالة textarea، عدم النمو بشكل كبير جدًا.

textarea {
  min-block-size: 3.5rlh;
  min-inline-size: 20ch;
  max-inline-size: 50ch;
}

select {
  min-inline-size: 5ch;
  min-block-size: 1.5lh;
}

input {
  min-inline-size: 7ch;
}

تستخدم خدمة مقارنة الأسعار (CSS) هذه وحدات نسبية لتغيير الحجم. وتُعدّ وحدة lh الجديدة مثالية لأحجام القوالب وتناسب ch الأحجام المضمَّنة بشكلٍ جيد.

ما القيمة التلقائية لتغيير حجم الحقل؟

القيمة التلقائية للسمة field-sizing هي fixed، ولا تقبل سوى قيمتَي fixed أو content.