קביעת גודל של שדה ב-CSS

שורה אחת של קוד לרכיבי התאמה אוטומטית עם תוכן שניתן לעריכה.

Adam Argyle

בלי field-sizing, כדי ליצור שדה קלט בגודל טוב היה צריך לנחש את הגודל הממוצע של קלט בשדה הטקסט, או להשתמש ב-JavaScript כדי לספור תווים ולהגדיל את גובה או הרוחב של הרכיב ככל שהמשתמש הזין טקסט. במילים אחרות, זה לא היה קל, והייתה סבירות גבוהה לשגיאות כשניסו לעקוב אחרי התוכן שמשתמש הזין בקלט.

כשמשתמשים ב-field-sizing, צריך שורה אחת של CSS כדי להפעיל את התכונה של שינוי הגודל בהתאם לתוכן. סגנון התאמת הגודל לפי תוכן מתאים גם לרכיבים אחרים מלבד textarea.

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

תמיכה בדפדפן

• 123
• 123
• x
• x

מקור

קישורים מהירים

מפרט | הסברים

אתם אוהבים סרטונים קצרים?

Wes Bos ו-Jhey פרסמו סרטונים מעולים ב-Twitter שמסבירים על field-sizing.

אילו רכיבים מושפעים מהגדרת הגודל של השדות?

בהמשך מופיעה רשימה של אלמנטים של <form> ש-field-sizing פועלת עליהם, עם סיכום של ההשפעות שלה על כל אחד מהם.

<textarea>

הקלט יתכווץ ל-min-inline-size או יתאים ל-placeholder.

כשהמשתמשים מקלידים, הקלט גדל בתוך השורה עד שהוא מגיע לגודל מקסימלי, ואז הטקסט יתגול והגודל של בלוק הקלט יגדל כדי להתאים לשורה החדשה.

הפקודה <select> והפקודה <select multiple>

הרכיב שנבחר יתכווץ בהתאם לאפשרות שנבחרה.

תיבת הבחירה עם המאפיין multiple תגדל בהתאם לאפשרות הרחבה ביותר ותהיה גבוהה ככל הנדרש כדי להתאים למספר האפשרויות.

<input type="text">, ‏ <input type="email"> ו-<input type="number">

הקלט יתכווץ ל-min-inline-size או יתאים ל-placeholder.

כשהמשתמשים מקלידים, הקלט גדל בכיוון השורה עד שהוא מגיע ל-max-inline-size, ואז הערך של הקלט נחתך בגלל מצב Overflow.

<input type="file">

השדה יתכווץ ללחצן ולטקסט של שם הקובץ שמוזן מראש.

כשמעלים קובץ, תיבת הקלט הופכת לרחבה כמו הלחצן ונוסף לה הטקסט של שם הקובץ.

הצגה, בדיקה והשוואה של תוצאות

זוהי דוגמה אינטראקטיבית מינימלית להתנהגות של כל רכיב בטופס לפני ואחרי ההשפעה של field-sizing.

לניסיון ב-Codepen

מבט מקרוב

כשמשתמשים ב-[placeholder], ה-placeholder הופך לתוכן. הזכרנו את זה קודם, אבל חשוב להדגיש את זה כאן כי חשוב לדעת מתי לעצב טופס. placeholder ארוך או קצר ישנה את הגודל המובנה של הקלט עם field-sizing: content.

לניסיון ב-Codepen

טיפול בסגנון ריק וגולש

כדי להשתמש ב-field-sizing, צריך לבצע עבודה נוספת. Ahmad Shadeed מכנה את זה 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.