calc הוא מאפיין CSS שלא רבים מכירים, אך יכול לפתור בעייה אמיתית בצורה מאוד פשוטה תוך חסכון בקוד JavaScript. הנה דוגמא של 5 דקות שתעשה לכם סדר במאפיין ולמה צריך אותו.

1. המשימה

אנו נכתוב CSS עבור Lightbox, כלומר אנו רוצים להציג תמונה במרכז המסך ולגרום לכלל המסך להיראות כהה יותר כך שהתמונה תבלוט החוצה.

2. קוד ה CSS

כדי להסתיר את המסך אנו נוסיף div עם רקע חצי שקוף ברוחב וגובה 100%. באמצעות position: absolute נוכל לגרום ל div לתפוס את כל המסך וערך z-index גבוה יגרום להסתרה של כל הדברים האחרים שנמצאים על המסך.
על גבי הרקע הכהה אנו רוצים למקם תמונה. בשלב ראשון ולצורך פשטות נמקם את התמונה בפינה השמאלית עליונה של המסך.
כך נראה הקוד עם התוצאה:

3. מיקום התמונה במרכז

וכאן בדיוק נכנס המאפיין calc. אנחנו יודעים בדיוק מה ערך ה left בו אנו מעוניינים: מחצית רוחב המיכל פחות חצי מרוחב התמונה. מאחר והתמונה מוצגת בגודל 400 על 400 פיקסלים, אנו יכולים להשתמש בקוד ה CSS הבא:

.lightbox img {
    left: calc(50% - 160px);
}

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

כך נראה הקוד המתוקן:

4. סיכום וקריאת המשך

המאפיין calc נתמך בכל הדפדפנים המובילים (אקספלורר 10 ומעלה). בעולם המובייל יש תמיכה מלאה החל מגירסא 37 של דפדפן המכשיר, ותמיכה חלקית (רק פעולות חיבור וחיסור) החל מאנדרואיד 4.4.

אפשר לראות את טבלת התמיכה בדפדפנים באתר caniuse בכתובת:
http://caniuse.com/#search=calc

אפשר למצוא עוד כמה רעיונות לשימוש ב calc בפוסט מ CSS Tricks כאן:
https://css-tricks.com/a-couple-of-use-cases-for-calc/