تابع Calc در CSS3
324 روز پیش
پويا صادقى , آموزش CSS
خیلی وقتها برای تنظیم اندازه ها در CSS مجبوریم از واحدهای مختلف اندازه گیری در کنار هم استفاده کنیم؛ رایج ترین حالت ، استفاده از واحدهای پیکسل و % در یک سنده.
یه ستون با عرض 30% داریم ، حالا اگه بخوایم عرض این ستون از 30% ، 10پیکسل کمتر باشه چی؟
میتونیم این 10 پیکسل رو یه مقدار حدودی در نظر بگیریم (مثلا 5% ) و بیخیال پیکسل بشیم ، ولی با تغییر سایز مرورگر و تغییر عرض ستون، 10پیکسل مورد نظرمون هم تغییر میکنه.
راه های زیادی برای جل این مشکل هست، مثل استفاده از div های دیگه یا استفاده از جاوا اسکریپت، ولی CSS3 قرار گزینه مناسبی برای اینکار باشه:
استفاده از عملیات ریاضی در مقدار دهی!
تابع calc در css3 اینجوری استفاده میشه:
.mycolumn{width: calc(30% - 10px);}
این خاصیت هنوز در وبکیت (کروم و سافاری) و اپرا پشتیبانی نمیشه و فعلا فقط Firefox +4 و IE+9 ازش پشتیبانی میکنن!
برای فایرفاکس هم باید از پیشوند moz استفاده کنید:
.mycolumn{width: -moz-calc(30% - 10px);}
این تابع از علامت های + ، – ، * و / پشتیبانی میکنه:
/*IE+9*/ width: calc(30% + 10px); font-size: calc(10em / 2); margin: calc(18px * 2); padding-left: calc(10% - 10px); /*Firefox+4*/ width: -moz-calc(30% + 10px); font-size: -moz-calc(10em / 2); margin: -moz-calc(18px * 2); padding-left: -moz-calc(10% - 10px);
دقت کنید که قبل و بعد از علامت ها ( + ، – ، * ، / ) یه اسپیس بذارید 
