کاربرد تابع calc() در مواقعی است که نیاز به تلفیق واحدهای اندازه گیری نسبی و مطلق به منظور ایجاد یک طرح انعطاف پذیر می باشد. به عنوان مثال فرض کنید می خواهیم عرض عنصر <body> برابر با 70 درصد عرض کل صفحه بعلاوه 30 پیکسل باشد برای این منظور باید تابع calc() را به صورت زیر بنویسیم :
body{
width: calc(70% + 30px);
}
در این حالت عرض عنصر <body> برابر با 70 درصد عرض کل صفحه بعلاوه 30 پیکسل خواهد بود. دقت داشته باشید که در تابع calc() باید بین مقادیر داخل پرانتز و عملگر ریاضی استفاده شده یک کاراکتر فاصله (space) وجود داشته باشد.
عملگرهای ریاضی قابل استفاده در تابع calc() عبارتند از:
- عملگر جمع + (add)
- عملگر تفریق -(subtract)
- عملگر تقسیم / (divide)
- عملگر ضرب * (multiply)
تابع calc در مرورگرهای IE9 و بالاتر ، Firefox16 و بالاتر پشتیبانی می شود. نسخه های قدیمی Chrome(Chrome19+) و Safari (Safari6) این تابع را با استفاده از پیشوند مخصوص مرورگرهای webkit و به صورت -webkit-calc() پشتیبانی می کنند.
مثال :
width: calc(80% + 10px); width: calc(100% - 40px); width: calc(10px * 10); width: calc(100% / 2);