CSS interpolate-size מול JavaScript: הסוף למעקפים בהנפשת height: auto

שנים שכל מפתח פרונטאנד בתל אביב נתקל באותו הקיר: בונים אקורדיון, מנסים לעשות transition חלק מ-height: 0 ל-height: auto, ומשתגעים מזה ש-CSS מתעלם.

כדי לפתור את זה, המצאנו קומבינות. הגדרנו max-height: 1000px וקיבלנו אנימציה מקרטעת. מדדנו את גובה האלמנט עם JavaScript ב-DOM. אפילו ניסינו טריקים מורכבים עם הופעת CSS Grid.

ב-2026, המשחק השתנה. הנה השינוי.

הגדרה · interpolate-size

מאפיין CSS המאפשר לדפדפן לחשב מעברים חלקים (transitions) בין ערכים קבועים בפיקסלים לבין מילות מפתח דינמיות כמו auto, min-content, ו-fit-content.

היסטוריה של קומבינות: איך הגענו לפה?

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

מה המחיר? Rendering jank.

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

זה נגמר.

ביצועים: למה CSS נקי מנצח את ה-DOM

כשאני בונה אתרים מורכבים, מהירות תגובה היא תנאי סף. סקריפטים של JavaScript רצים על ה-Main Thread. אם השרת פורס מידע או שיש אנליטיקס פעיל, ה-Main Thread עמוס. אנימציית אקורדיון מבוססת JS פשוט תקרטע.

זה עובד מדהים.

כדי להפעיל את התכונה החדשה בכל האתר, מספיק להוסיף את ההגדרה הזו ב-CSS הגלובלי:

:root {
  interpolate-size: allow-keywords;
}

.accordion-content {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

.accordion-content.open {
  height: auto;
}

בלי סקריפטים. בלי ספריות חיצוניות.

תחזוקת קוד: פחות קוד, פחות באגים

קוד שלא נכתב לא נשבר.

כשתפריט נפתח בעזרת JavaScript, חייבים לטפל בשורת מקרי קצה:

• מה קורה כשהמשתמש משנה את גודל המסך?
• מה קורה אם פונט מותאם נטען באיחור ומשנה את גובה הבלוק?
• מה קורה בשינוי כיווניות מ-LTR ל-RTL?

פתרונות JS דורשים Event Listeners שמכבידים על המערכת רק כדי להתמודד עם שינויים כאלה.

ב-CSS Native, הדפדפן מחשב את הממדים מחדש בצורה טבעית. אם הטקסט בתוך האקורדיון גדל, ה-height: auto מתעדכן מעצמו ובאופן חלק.

💡

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

השורה התחתונה

הדעה שלי ברורה.

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

הוסיפו interpolate-size: allow-keywords ל-CSS שלכם. הקוד יהיה נקי יותר, והאנימציות יעבדו חלק.