تغيير حجم حقل لغة 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]، يصبح العنصر النائب هو المحتوى. لقد سبق أن ذكرنا ذلك، ولكننا نشير إليه مجددًا هنا، لأنّه من المهم معرفة وقت تصميم نموذج. سيؤدي استخدام عنصر 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.