קביעת גודל של שדה ב-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.