ایجاد یک چیدمان 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() برای طول ها اکنون در کروم 19 (ساخت کانال توسعه دهنده) با استفاده از ویژگی -webkit-calc ، در فایرفاکس از نسخه 8 با استفاده از ویژگی -moz-calc و در اینترنت اکسپلورر از نسخه 9 بدون پیشوند در دسترس است. نظر خود را با گذاشتن نظر در زیر به ما بگویید.