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

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

Adam Argyle

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

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

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

روابط سريعة

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

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

يقدّم كل من ويس بوس وجاي فيديو رائعًا على Twitter لتعريفك على field-sizing.

ما هي العناصر التي تتأثر بـ 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 أو ليتناسب مع العنصر النائب.

As users type, the input grows in the inline direction until it reaches a max-inline-size, at which point overflow clips the input value.

<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؟

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