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

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

Adam Argyle

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

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

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

Browser Support

• 123
• 123
• x
• 26.2

Source

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

מפרט | הסבר

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

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

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

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

<textarea>

הקלט מצטמצם ל-min-inline-size או מותאם ל-placeholder.

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

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

האלמנט 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.