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