یكی از قسمت های مهم هر صفحه وب تعیین سایز بخش های مختلف اون هست و خصوصا در طراحی ریسپانسیو انعطاف پذیر بودن اون خیلی اهمیت داره. تابع Calc یكی از توابع جدیدی هست كه به CSS3 اضافه شده و با استفاده از اون میتونید به راحتی سایز هر قسمت از طرح خودتون رو با متدهای دلخواه محاسباتی تعیین كنید!
به خاطر استفاده زیادی كه از این تابع تا حالا كردم مفید دونستم كه در موردش توی وبلاگم مطلبی بنویسم تا شما هم باهاش آشنا بشید و بتونید ازش استفاده كنید.
این تابع امكان استفاده از محاسبات در خاصیت ها CSS رو ممكن میكنه! به مثال زیر توجه كنید:
#test{
border:1px solid rgba(0,0,0,0.4);
width:400px;
padding:0px 10px;
}
#test p{
width: calc(350px - 50px);
width: -moz-calc(350px - 50px);
width: -webkit-calc(350px - 50px);
background:#f0f0f0;
padding:5px;
}
<div id="test">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
به نمونه های زیر هم دقت كنید:
/* basic calc */
.simpleBlock {
width: calc(100% - 100px);
}
/* calc in calc */
.complexBlock {
width: calc(100% - 50% / 3);
padding: 5px calc(3% - 2px);
margin-left: calc(10% + 10px);
}
میبینید كه خیلی راحت با استفاده از Calc میتونید محاسبات رو توی خاصیت ها به كار ببرید.
مثلا یكی از كاربردهای كه این تابع برای من داشت وسط قرار دادن فلش های كنترلی یك اسلایدشو بود كه من با استفاده از Calc در خاصیت Top اون رو 50% قرار دادم و نصف ارتفاع تصویر فلش رو ازش كم كردم. به این صورت:
top:calc(50% - 20px);
در واقع ارتفاع تصویر من 40px هست و چون من میخوام تصویرم به صورت عمودی وسط صفحه قرار بگیره اندازه ارتفاع (height) رو نصف میكنم تا 20px از بالا و 20px از پایین كم كنه. اگر در حالت عادی فقط 50% رو بهش بدید دقیقا وسط قرار نمیگیره و 40px پایین تر میاد كه بعد باید 20px از بالا كم كنید:
margin-top:-20px;
اینطوری هم دستورهای بیشتری نیاز داره و هم در حالت ریسپانسیو با مشكل مواجه میشه.
میتونید از عملگرهای محسباتی زیر در این تابع استفاده كنید:
جمع (+)
تفریق (-)
ضرب (*)
تقسیم (/)
این تابع در آینده تكمیل میشه و امكانات خیلی بهتری رو بهش اضافه میكن. اما در حال حاضر فقط از همین محاسبات پشتیبانی میكنه.
به این هم توجه كنید كه برای پشتیبانی Calc در مرورگرهای مختلف حالت های -moz و -webkit رو فراموش نكنید.