חישוב עם גדלים מקוריים

‫calc-size() היא פונקציית CSS לביצוע פעולות מתמטיות על מילות מפתח של גודל פנימי כמו auto,‏ min-content ו-fit-content. חובה: צריך להשתמש ב-calc-size() רק כשצריך לשנות גודל פנימי באמצעות חישוב או אילוץ. באנימציות פשוטות שמבוססות על מילות מפתח (למשל, 0 עד auto), צריך להשתמש ב-interpolate-size: allow-keywords.

שלבי ההטמעה

1. זיהוי הבסיס הפנימי: קובעים איזו מילת מפתח פנימית (auto,‏ min-content וכו') צריכה להיות הבסיס לחישוב.
2. הגדרת אילוצים: משתמשים בפונקציות מתמטיות של CSS כמו clamp(),‏ min() או max() בארגומנט השני כדי לאכוף אילוצי עיצוב על הגודל הפנימי.
3. חובה: לספק חלופה: תמיד צריך להצהיר על מילת מפתח או אורך סטנדרטיים של גודל מיד לפני המאפיין באמצעות calc-size() כדי לוודא שהפריסה תמשיך לפעול בדפדפנים לא נתמכים.
4. החלת מאפיינים לוגיים: כברירת מחדל, משתמשים במאפיינים לוגיים כמו inline-size או block-size כדי לוודא שהחישובים תואמים למצב הכתיבה של המסמך.
5. אופציונלי: שיפור הדרגתי (progressive enhancement): אפשר להוסיף לוגיקה מורכבת של פריסה או אנימציות בבלוק @supports (inline-size: calc-size(auto, size + 0px)) כדי לספק תכונות מתקדמות רק לדפדפנים שתומכים בהן.

תחביר בסיסי

/* calc-size(<calc-size-basis>, <calc-sum>) — mathematical operations on intrinsic sizing keywords */
.element {
  /* MANDATORY: Always provide a fallback for browsers that do not support calc-size() */
  inline-size: min-content;
  
  /* DO: Use calc-size to modify an intrinsic basis with a calculation or function */
  inline-size: calc-size(min-content, size + 2rem);
}

ארגומנטים חוקיים של בסיס (<calc-size-basis>)

הארגומנט הראשון מגדיר את גודל "הבסיס" לחישוב.

מילות מפתח רגילות:

• ‫auto: הגודל שמוגדר כברירת מחדל לרכיב.
• ‫min-content: הגודל הקטן ביותר שהרכיב יכול לקבל בלי לחרוג מהגבולות.
• ‫max-content: הגודל של הרכיב שנדרש כדי להכיל את כל התוכן בשורה אחת.
• ‫fit-content: שווה ערך ל-clamp(min-content, auto, max-content).
• ‫content: תקף רק כשמשתמשים ב-calc-size() בתוך המאפיין flex-basis.

ארגומנטים מיוחדים:

• ‫any: בסיס כללי שמשמש כשסוג המטבע הספציפי לא ידוע או כשמבצעים חישובים מקוננים.
• ‫calc-size() מקוננת: מאפשרת חישובים מרובי שלבים או חישובים מותנים.
• <calc-sum>: אורך, אחוז או ביטוי מתמטי ספציפי (למשל, 100px או 20%). כשמשתמשים בערך קבוע כבסיס, מילת המפתח size עדיין זמינה (אבל רק בתוך הארגומנט השני) ומייצגת את הערך המחושב של הבסיס הזה.

חובה: מילת המפתח size לא חוקית בתוך הארגומנט הראשון (<calc-size-basis>) עצמו. זהו משתנה מקומי שקיים רק כדי להפנות חזרה לבסיס מתוך הארגומנט השני (<calc-sum>).

ארגומנטים תקינים לחישוב (<calc-sum>)

הארגומנט השני הוא הביטוי המתמטי.

• בדרך כלל משתמשים במילת המפתח size כדי להתייחס לערך של הבסיס.
• מילת המפתח size היא אופציונלית, אבל אם לא תציינו אותה, החישוב יתבצע לפי ערך קבוע, והבסיס יתעלם לחלוטין.
• הוא יכול לכלול אופרטורים מתמטיים רגילים (+, -, *, /).
• הוא יכול לכלול פונקציות מתמטיות של CSS כמו clamp(),‏ min(),‏ max() ו-round().
• חובה: calc-size() מאפשר רק ערך גודל פנימי אחד (הבסיס) בכל חישוב. אי אפשר לשלב מילות מפתח של גודל פנימי באותה קריאה ל-calc-size().

תרחישים לדוגמה

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

כברירת מחדל, דפדפנים לא יכולים לבצע אינטרפולציה בין אורך (למשל, 0px) לבין מילת מפתח פנימית (למשל, auto). אם עוטפים את מילת המפתח ב-calc-size(), היא הופכת לערך שניתן לבצע בו אינטרפולציה.

בחירת הכלי המתאים לאנימציות

• חובה: משתמשים ב-interpolate-size: allow-keywords: לאנימציות פשוטות לגדלים פנימיים או מהם (למשל, height: 0 עד height: auto) בלי שינויים מתמטיים. זו הגישה הנדרשת להוספה פשוטה של מילות מפתח, ומומלץ להחיל אותה באופן גלובלי באמצעות :root.

  :root {
    /* Best practice: Enable keyword interpolation globally */
    interpolate-size: allow-keywords;
  }
  
  .item {
    height: 0;
    transition: height 0.3s ease;
  }
  
  .item.open {
    /* Simple interpolation from 0 to auto now works without calc-size() */
    height: auto;
  }
  

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

.accordion-content {
  display: block;
  overflow: hidden;
  /* MANDATORY: Fallback value for closed state */
  block-size: 0;
  transition: block-size 0.3s ease-out;
}

.accordion-content.open {
  /* MANDATORY: Fallback value for open state */
  block-size: auto;

  /* 
    DO: Use calc-size(auto, ...) to enable animation from 0 to the element's 
    intrinsic size while doing a calculation (in this case, adding a space of 2rem).
  */
  block-size: calc-size(auto, size + 2rem);
}

חובה: אי אפשר לבצע אינטרפולציה בין שתי מילות מפתח של גודל פנימי באופן ישיר. אחד מהקצוות של המעבר חייב להיות אורך או אחוז.

התחשבות בהעדפות התנועה של המשתמשים

אנימציות שמשנות את הגודל של אזורים גדולים בפריסה יכולות להפריע במיוחד למשתמשים עם הפרעות וסטיבולריות. חובה: תמיד צריך לכבד את העדפות התנועה של המשתמשים באמצעות שאילתת המדיה prefers-reduced-motion כדי לפשט או לצמצם אנימציות לא חיוניות. אסטרטגיות נפוצות כוללות השבתה מוחלטת של התנועה, קיצור משך הזמן או החלפת שינויי הפריסה במעברים עדינים של שקיפות.

.accordion-content {
  opacity: 0;
  transition: block-size 0.3s ease, opacity 0.3s ease;
}

.accordion-content.open {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .accordion-content {
    /* 
       EXAMPLE: Replacing disruptive layout animations with a subtle fade-in.
       Setting the block-size instantly and transitioning opacity 
       provides a clear state change without large-scale motion.
    */
    transition: opacity 1.5s ease;
  }

  .accordion-content.open {
    /* Jump the size instantly */
    block-size: auto;
  }
}

החלת אילוצים על גדלים מקוריים

אפשר להשתמש ב-calc-size() עם כל פונקציה מתמטית של CSS, כמו min(),‏ max(),‏ clamp() או round(), כדי לוודא שהגודל הפנימי של הרכיב נשאר בתוך גבולות העיצוב.

.dynamic-container {
  /* MANDATORY: Always provide a fallback for browsers that do not support calc-size() */
  inline-size: fit-content;

  /* 
    DO: Establish a dynamic size based on content, while:
    1. Enforcing boundaries using CSS math functions (min, clamp, etc.)
    2. Modifying the intrinsic size with fixed or relative offsets
  */
  inline-size: calc-size(fit-content, min(size + var(--extra-space), var(--max-allowed)));
}

שיקולים קריטיים

• מלכודות באחוזים: אחוזים בתוך <calc-sum> נפתרים ביחס לגודל של מאגר התגים, ולא למילת המפתח size. לדוגמה, calc-size(auto, size + 10%) מוסיף 10% מהרוחב של הרכיב הראשי לרוחב של auto, מה שעלול להוביל לתוצאות לא צפויות או לחריגות.
• דרישות חישוב: חובה: צריך להשתמש ב-interpolate-size: allow-keywords במקום ב-calc-size() לאנימציות פשוטות (למשל, 0 עד auto). צריך להשתמש ב-calc-size() רק כשהפריסה דורשת התאמות מתמטיות דינמיות לבסיס הפנימי.
• הערה לגבי ביצועים: הנפשה של מאפייני מודל תיבה כמו inline-size או block-size מפעילה חישובים מחדש של הפריסה, שיכולים להיות יקרים. כדאי להשתמש באנימציות של calc-size() בעיקר ברכיבים קריטיים לפריסה, כשהחלופות שלא קשורות לפריסה לא מספיקות.

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

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

.element {
  /* Fallback for browsers that don't support calc-size() */
  inline-size: fit-content; 
  /* Modern browsers will override the fallback */
  inline-size: calc-size(fit-content, size + 2rem);
}

חלופות לאנימציות ולמעברים

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

• הפחתה חיננית (graceful degradation): ברירת המחדל היא "מעבר מיידי" בין מצבים (למשל, מ-0 ל-auto). בדרך כלל זה מקובל כי הפריסה נשארת פונקציונלית.
• חוויית משתמש משופרת: אפשר להשתמש ב-@supports כדי להחיל לוגיקת פריסה מורכבת או עיצוב נוסף שרלוונטיים רק כשאפשר להשתמש באנימציות פנימיות חלקות.
• הימנעו ממדידות שמבוססות על JS: אתם יכולים להשתמש ב-JavaScript כדי למדוד רכיבים ולהוסיף אנימציה למידות שלהם באופן ידני, אבל בדרך כלל זה מיותר ויכול להוביל לשינויים תכופים בפריסה. הסתמכות על "המעבר המיידי" המקורי היא ברירת המחדל המומלצת לאפליקציות אינטרנט מודרניות.

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

/* CSS Feature Detection */
@supports (inline-size: calc-size(auto, size + 0px)) {
  .element {
    /* Apply advanced logic only when supported */
  }
}

/* JavaScript Feature Detection */
if (CSS.supports('inline-size', 'calc-size(auto, size + 0px)')) {
  // Apply advanced sizing or animations
}