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

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

Adam Argyle

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

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

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

Browser Support

• 123
• 123
• 152
• 26.2

Source

روابط سريعة

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

هل تحبون الفيديوهات القصيرة؟

Wes Bos وJhey لديهما فيديو رائع على Twitter يعرّفك على field-sizing.

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

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

<textarea>

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

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

<select> و<select multiple>

يتم تصغير عنصر الاختيار ليناسب الخيار المحدّد.

يتوسّع عنصر select الذي يتضمّن السمة multiple ليناسب الخيار الأوسع وليصبح بالارتفاع المطلوب ليتضمّن عدد الخيارات.

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

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

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

<input type="file">

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

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

الاطّلاع على النتائج واختبارها ومقارنتها

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

تجربة الرمز البرمجي على Codepen

نظرة عن كثب

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

تجربة الرمز البرمجي على Codepen

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

يتطلّب استخدام 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;
}

تستخدم ورقة الأنماط المتتالية هذه وحدات نسبية لتحديد الحجم. إنّ وحدة lh الإعلانات الجديدة مثالية لأحجام المربّعات، بينما تتناسب ch مع الأحجام المضمّنة.

ما هي القيمة التلقائية لتحديد حجم الحقل؟

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