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

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

Adam Argyle

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

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

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

Browser Support

• 123
• 123
• x
• x

Source

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

מפרט | הסבר

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

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, ואז הערך של הקלט נחתך בגלל עודף.

<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.