اندازه فیلد CSS

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

Adam Argyle

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

با field-sizing، برای فعال کردن اندازه‌گذاری براساس محتوا، به یک خط CSS نیاز دارید. This content based sizing style also works for more than a textarea!

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

Browser Support

• 123
• 123
• 152
• 26.2

Source

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

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

ویدیوهای کوتاه را می‌پسندید؟

Wes Bos و Jhey هرکدام ویدیو عالی‌ای در 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 یا برای قرار گرفتن در جای‌بان جمع می‌شود.

وقتی کاربران تایپ می‌کنند، ورودی در جهت درون‌خطی رشد می‌کند تا به 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 چیست؟

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