آموزش تابع Calc ( محاسبات ریاضی ) در Css3

از سری آموزش های کدنویسی Css3 برای این پست از سایت اسکریپت دات کام به آموزش یک تابع به نام calc میپردازم …

این تابع تقریبا جدید , میتواند جهت طراحی سایت های ریسپانسیو کمک بسیاری به توسعه دهندگان وب کند .

کاربرد تابع calc() در مواقعی است که نیاز به تلفیق واحدهای اندازه گیری نسبی و مطلق به منظور ایجاد یک طرح انعطاف پذیر می باشد.

در این تابع میتوان 4 عمل اصلی ریاضی را اعمال و از آنها استفاده نمود .

برای استفاده از این تابع کافیست در مقابل خاصیت هایی مانند width , height , margin , padding و font-size از این تابع استفاده نمود .

در داخل پرانتز این تابع میتوانید از 4 عمل اصلی + , – , / و * استفاده نمایید .

برای یک مثال ساده : فرض کنید میخواهید پهنای یک div با کلاس vms که %100 والد خود است را در css کدنویسی کنید :

div.vms{
	width:100%;	
}

حال شاید میخواهید از %100 , مقدار 50px کمتر باشد . طبیعتا چون دو واحد اندازه گیری مجزا هستند , بدون دانستن این تابع نمیتوان کاری کرد .

اما از هم اکنون شما میتوانید با استفاده از این تابع , این کار را به صورت زیر انجام دهید :

div.vms{
	width:calc(100% - 30px);
}

و یا به عنوان مثالی دیگر :

سه div که دارای کلاس های یکسان vms هستند ومیخواهیم همیشه دارای طولی به اندازه یک سوم والد خود داشته باشند .

در html :

<div class="vms">A</div>
<div class="vms">B</div>
<div class="vms">C</div>

در css :

div.vms{
	width:calc(100% / 3);
}

پخش اختصاصی

گرداوری : وحید مجیدی