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

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

Adam Argyle

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

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

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

Browser Support

• 123
• 123
• x
• 26.2

Source

روابط سريعة

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

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

يقدّم كل من 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.

تجربة الرمز البرمجي على 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؟

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