הנפשה לגדלים מקוריים

בעבר, כדי להוסיף אנימציה לאלמנטים בגדלים דינמיים כמו block-size: auto או inline-size: max-content, היה צריך להשתמש ב-JavaScript או בפריצות לא יציבות של max-height. המאפיין interpolate-size והפונקציה calc-size() מאפשרים לדפדפן לבצע אינטרפולציה באופן מקורי בין אורכים קבועים לבין מילות מפתח של גודל פנימי.

שלבי ההטמעה

1. הבעת הסכמה לאינטרפולציה של מילות מפתח: מחילים את interpolate-size: allow-keywords על רכיב הורה (בדרך כלל :root) כדי להפעיל מעברים של מאפיינים באמצעות מילות מפתח פנימיות.
2. הגדרת המעבר: מגדירים transition למאפיין שינוי הגודל (למשל, block-size,‏ inline-size) ברכיב היעד.
3. שימוש במילות מפתח פנימיות: משנים את מאפיין הגודל למילת מפתח פנימית נתמכת – auto,‏ min-content,‏ max-content,‏ fit-content או (ל-flex-basis)‏ content – במהלך אינטראקציה (למשל, :hover או מחלקת מצב).
4. ביצוע חישובים (אופציונלי): משתמשים ב-calc-size() אם צריך לבצע חישוב מתמטי על גודל פנימי (למשל, auto + 2rem). הפונקציה calc-size() תומכת גם במילת המפתח any לחישובים שלא תלויים בבסיס.

דוגמה: תבנית הרחבה כללית

אפשר להחיל את התבנית הזו על כל מאגר (כמו קטע "הצגת פריטים נוספים" או תפריט ניווט) כדי לעבור בין גובה מוגבל לבין הגודל הטבעי של הרכיב.

/* Opt-in globally for all children */
:root {
  /* MANDATORY: Transitions to intrinsic keywords are disabled by default for compatibility */
  interpolate-size: allow-keywords;
}

.expandable-container {
  /* 1. Define a fixed initial size (or 0) and hide overflow */
  block-size: 100px;
  overflow: hidden;
  
  /* 2. Transition the sizing property */
  transition: block-size 0.4s ease-out;
}

.expandable-container.is-expanded {
  /* 3. Smoothly animate to the intrinsic natural height */
  block-size: auto;
}

דוגמה: גודל פנימי מחושב של רכיב מוטבע

.badge {
  inline-size: 40px;
  overflow: hidden;
  white-space: nowrap;
  transition: inline-size 0.3s ease;
}

.badge:hover {
  /* calc-size(basis, calculation) */
  /* 'size' refers to the evaluated basis (max-content in this case) */
  inline-size: calc-size(max-content, size + 20px);
}

דוגמה: מעבר מ-Intrinsic ל-Fixed

אפשר גם להוסיף אנימציה בכיוון ההפוך – להתחיל מגודל טבעי ולכווץ לאורך מסוים. האפשרות הזו שימושית לרכיבים שניתן לסגור.

.collapsible-alert {
  /* 1. Start with the natural content height */
  block-size: auto;
  overflow: hidden;
  transition: block-size 0.5s ease-in-out, opacity 0.5s ease;
}

.collapsible-alert.is-dismissed {
  /* 2. Smoothly collapse to zero */
  block-size: 0;
  opacity: 0;
  pointer-events: none;
}

/* MANDATORY Copy-Paste Safety: Disable sizing animations for sensitive users */
@media (prefers-reduced-motion: reduce) {
  .expandable-container,
  .badge,
  .collapsible-alert {
    transition: none !important;
  }
}

// MANDATORY Accessibility Synchronization: Ensure elements collapsed to zero dimensions are removed from the assistive technology tree, and sync aria-expanded states on triggers.
const alertElement = document.querySelector('.collapsible-alert');
alertElement.addEventListener('transitionend', (e) => {
  if (e.propertyName === 'block-size' && alertElement.classList.contains('is-dismissed')) {
    alertElement.hidden = true;
  }
});

// Example trigger syncer
const triggerBtn = document.querySelector('.accordion-trigger');
triggerBtn?.addEventListener('click', () => {
  const isExpanded = triggerBtn.getAttribute('aria-expanded') === 'true';
  triggerBtn.setAttribute('aria-expanded', !isExpanded);
});

אילוצים על מפתחות

• הגבלה על מעבר בין מילות מפתח: אי אפשר ליצור אנימציה ישירות בין שתי מילות מפתח שונות (למשל, מ-min-content ל-max-content). אחד מהקצוות של המעבר חייב להיות באורך קבוע או באחוזים (למשל, מ-0 ל-auto).
• תחביר של Calc-size: בתוך calc-size(), אי אפשר לשלב מילות מפתח פנימיות שונות באותו ביטוי. הארגומנט הראשון (הבסיס) מגדיר מה מייצג size.
• דרישת הצטרפות: מעברים למילות מפתח פנימיות מושבתים כברירת מחדל (numeric-only) כדי לשמור על תאימות לדורות קודמים. צריך להחיל את interpolate-size: allow-keywords על הרכיב או על רכיב אב. המאפיין calc-size() פועל כשינוי לכל נכס, ומפעיל אינטרפולציה באופן אוטומטי בכל פעם שמשתמשים בו.

אסטרטגיות חלופיות

‫interpolate-size ו-calc-size() הם שיפורים הדרגתיים. בדפדפנים שלא תומכים בהם, המעבר לגודל היעד יתבצע באופן מיידי.

• הפחתה חיננית (graceful degradation): במעברים פשוטים של block-size: auto, דפדפנים רגילים פשוט ישנו את הגודל באופן מיידי. זה פונקציונלי אבל פחות מלוטש.
• מילות מפתח חלופיות ידניות: כשמשתמשים ב-calc-size(), תמיד צריך לספק מילת מפתח חלופית רגילה לדפדפנים ישנים יותר, כי הם יתעלמו מכל ההצהרה של calc-size().

.card {
  block-size: auto; /* Fallback for older browsers */
  block-size: calc-size(auto, size); /* Modern browsers use this */
  transition: block-size 0.3s ease;
}