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