اندازه فیلد CSS

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

Adam Argyle

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

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

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

Browser Support

• 123
• 123
• x
• 26.2

Source

پیوندهای سریع

مشخصات | توضیح

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

وس باس و جی هر کدام یک ویدیوی عالی در توییتر دارند که شما را با 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 برسد، که در آن نقطه سرریز (overflow) مقدار ورودی را برش می‌دهد.

<input type="file">

ورودی به دکمه و متن نام فایل از پیش پر شده خلاصه می‌شود.

هنگام آپلود فایل، ورودی به اندازه عرض دکمه به علاوه متن نام فایل می‌شود.

مشاهده، آزمایش و مقایسه نتایج

در اینجا یک مثال تعاملی و مینیمال از رفتارهای قبل و بعد هر عنصر فرم، تحت تأثیر field-sizing ، آورده شده است.

آن را در Codepen امتحان کنید

نگاهی دقیق‌تر

هنگام استفاده از [placeholder] ، placeholder به محتوا تبدیل می‌شود. این مورد قبلاً ذکر شده بود، اما در اینجا به آن اشاره شده است، زیرا دانستن آن هنگام استایل‌دهی به فرم مهم است. یک 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 را می‌پذیرد.