field-sizing: content ב-CSS: שדות טקסט שמתרחבים מעצמם ללא JavaScript

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

דן רצה חוויה חלקה. כזו שהתיבה גדלה יחד עם המילים.

הניסיון הראשון: מפלצת ה-JavaScript המונומנטלית

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

בכל הקלדה של המשתמש, הסקריפט איפס את גובה השדה, חישב את ה-scrollHeight מחדש, והזריק את הגובה החדש ב-inline style.

זה עבד, בערך.

במכשירים חלשים הורגשה קרטוע קל בהקלדה. כשהמשתמש הקליד מהר, הטקסט קפץ. ה-Layout Shift הרס את ציוני ה-Core Web Vitals של האתר, והקוד התנפח בטיפול במקרי קצה כמו מחיקת טקסט או הדבקת פסקאות גדולות.

הגדרה · field-sizing

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

הפתרון המודרני: שורה אחת ב-CSS

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

כל מה שדן היה צריך לכתוב ב-CSS זה את השורה הבאה:

textarea.auto-expand {
  field-sizing: content;
}

זה הכל. אפס קוד JavaScript. התנהגות שפתית נקיות וטבעית.

ברגע שהמשתמש מקליד, ה-textarea מאריך את עצמו אנכית. ברגע שהמשתמש מוחק שורות, השדה מתכווץ בחזרה בדיוק לגודל התוכן שנשאר.

שליטה בגבולות: שלא יעוף מהמסך

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

אנחנו מגדירים גובה מינימלי וגובה מקסימלי ב-CSS:

textarea.smart-field {
  field-sizing: content;
  min-height: 4lh; /* גובה מינימלי של 4 שורות טקסט */
  max-height: 15lh; /* גובה מקסימלי של 15 שורות */
}

כשהטקסט עובר את 15 השורות, השדה מפסיק לגדול ומופיע פס גלילה פנימי רגיל. הכל מתרחש ברמת ה-Compositor של הדפדפן, בלי לעכב את ה-Main Thread.

לא רק ל-textarea: גם שדות input היברידיים

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

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

עם field-sizing: content, שדה ה-input יתרחב אופקית ככל שמקלידים בו:

input[type="text"].dynamic-width {
  field-sizing: content;
  min-width: 120px;
  max-width: 100%;
}

התוצאה היא ממשק שמרגיש חי ומגיב מידית לפעולות המשתמש.

תמיכה ותאימות לאחור

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

היופי ב-CSS הוא Progressive Enhancement. דפדפן שלא מכיר את המאפיין פשוט יתעלם ממנו ויציג שדה בגודל הרגיל.

אם מדובר ברכיב קריטי, אפשר להשתמש בשאילתת תכונה:

@supports not (field-sizing: content) {
  /* פתרון גיבוי או הגדרת גובה קבוע מראש */
  textarea {
    height: 150px;
  }
}

הלקח: תפסיקו לכתוב JS עבור מה ש-CSS יודע לעשות

💡

ככל שאנחנו מעבירים יותר משימות עיצוב והתנהגות מ-JavaScript ל-CSS, האתרים שלנו נהיים מהירים יותר, יציבים יותר ונגישים יותר.

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