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

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

Adam Argyle

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

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

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

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

מפרט | הסבר

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

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.

מבט מקרוב

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

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

השימוש ב-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.