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

אילו רכיבים מושפעים מ-field-sizing?

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

<textarea>

הקלט מתכווץ ל-min-inline-size או כדי להתאים לפלייסהולדר.

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

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

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

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

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

הקלט מתכווץ ל-min-inline-size או כדי להתאים לפלייסהולדר.

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

<input type="file">

הקלט מצטמצם ללחצן ולטקסט של שם הקובץ שמולא מראש.

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

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

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

לנסות את זה ב-Codepen

בודק לעומק

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

לנסות את זה ב-Codepen

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

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