כדי ליצור פריסה יפה של CSS, צריך להקצות גדלים לכל הפריטים שממוקמים באפליקציית אינטרנט. תמיד הייתה בקשה רבה לאפשרות לציין גדלים באמצעות שילוב של יחידות מדידה. לדוגמה, רצוי שתוכלו להקצות 50% משטח מסוים בתוספת כמות קבועה של שטח, למשל 10px. אפשר לעשות את זה כבר עכשיו באמצעות המאפיין calc(). אפשר להשתמש בתכונה הזו בכל מקום שבו נעשה שימוש באורך או במספר, כך שאפשר להשתמש בה למיקום פריטים, או גם בערכי הצבע של rgb(), כך שיש לה הרבה שימושים נהדרים בגיליון סגנונות.
מה אפשר לעשות עם calc()?
אפשר להשתמש במאפיין calc() בכל מקום שבו יש אורך או מספר של CSS בגיליון הסגנונות.
יש לה שתי תכונות עיקריות שמאפשרות גמישות רבה יותר בתכנון:
- שילוב של אחוזים וערכים מוחלטים.
- שילוב בין יחידות גודל.
שילוב של אחוזים עם יחידות מוחלטות
נבחן דוגמה לשילוב של אחוזים עם יחידות מוחלטות. נניח שאנחנו רוצים להקצות 50% מהאזור הזמין, בניכוי כמות קבועה של פיקסלים. אפשר לכתוב את זה כך:
#foo {
width: calc(50% - 100px);
}
<div id="foo">Always 100 pixels less than half the available area</div>
אם צבע הרקע היה ירוק, הוא היה נראה כך:
אם תקטינו את גודל ההורה, הוא ייראה כך:
היתרון הוא שאנחנו תמיד יודעים שקצה התוכן הימני יהיה 100px משמאל למרכז האזור המכיל. היכולת לשלב סוגי ערכים שונים בדרך הזו מאפשרת לאפליקציית האינטרנט לטפל בפריסה במכשירים בגדלים שונים עם שליטה רבה יותר מבעבר.
יחידות ערבוב
יתרון נוסף הוא היכולת לשלב יחידות עם מדידות שונות כדי לקבל מידה סופית. לדוגמה, אפשר להגדיר גדלים ביחס לגודל הגופן הנוכחי על ידי שילוב בין יחידות 'em' ו-'px'.
#bar {
height: calc(10em + 3px);
}
כאן וכאן מפורטות דוגמאות מצוינות לשילוב ערכים.
רוצה לנסות?
בעזרת calc() אפשר להשתמש בסמלים +, -, * ו-/ כדי להוסיף, לחסר, להכפיל ולחלק ערכים, וכך לאפשר מגוון רחב של אפשרויות. אפשר להשתמש ב-calc() בכל מקום שבו אפשר להשתמש באורך או במספר של CSS. אנחנו גם עובדים על הוספת calc() לנכסי זווית ותדירות בקרוב. מאפיין calc() לחישוב אורך זמין עכשיו ב-Chrome 19 (גרסה של ערוץ הפיתוח) באמצעות המאפיין -webkit-calc, ב-Firefox מגרסה 8 באמצעות המאפיין -moz-calc וב-Internet Explorer מגרסה 9 ללא קידומת. נשמח לשמוע מה דעתך. אפשר להשאיר תגובה בהמשך.