اندازه فیلد CSS

یک خط کد برای اندازه خودکار عناصر با محتوای قابل ویرایش.

Adam Argyle

بدون field-sizing ، برای ایجاد یک فیلد ورودی با اندازه مناسب، باید اندازه متوسط ​​ورودی یک فیلد متنی را حدس بزنید یا از جاوا اسکریپت برای شمارش کاراکترها و افزایش ارتفاع یا عرض عنصر با وارد کردن متن توسط کاربر استفاده کنید. به عبارت دیگر، آسان نبود، و هنگام تلاش برای دنبال کردن محتوایی که کاربر وارد یک ورودی کرده بود، مستعد خطا بود.

با field-sizing ، برای فعال کردن اندازه بر اساس محتوا، به یک خط CSS نیاز دارید. این سبک اندازه گیری مبتنی بر محتوا نیز برای بیش از یک ناحیه متنی کار می کند!

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

پشتیبانی مرورگر

• 123
• 123
• x
• x

منبع

لینک های سریع

مشخصات | توضیح دهنده

ویدیوهای کوتاه را دوست دارید؟

Wes Bos و Jhey هر کدام یک ویدیوی عالی در توییتر دارند که شما را با 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;
}

این CSS از واحدهای نسبی برای اندازه استفاده می کند. واحد lh جدید برای اندازه های بلوک عالی است و ch برای اندازه های درون خطی به خوبی کار می کند.

مقدار پیش فرض اندازه فیلد چیست؟

مقدار پیش‌فرض field-sizing fixed است و فقط دو مقدار fixed یا content را می‌پذیرد.