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

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

Adam Argyle

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

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

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

Browser Support

• 123
• 123
• 152
• 26.2

Source

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

מפרט | סרטון הסבר

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

ל-Wes Bos ול-Jhey יש סרטונים מצוינים ב-X שמציגים את field-sizing.

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

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

<textarea>

הקלט מצטמצם ל-min-inline-size או למקום שמוגדר בplaceholder.

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

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

האלמנט select מצטמצם כדי להתאים לאפשרות שנבחרה.

האלמנט select עם המאפיין 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 ארוך או קצר, הגודל המובנה של רכיבי הקלט עם field-sizing: content ישתנה.

רוצים לנסות את זה ב-Codepen?

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

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