JahanSoft
June 7th, 2017, 23:58
تابع Calcتابع Calc ، بخشی از ویژگی های CSS سطح 3 میباشد، در این تابع میتوانید محاسبات ریاضی را درون CSS خود انجام بدهید، یک مثال ساده از تابع Calc میتواند این مثال باشد که بخواهید یک عکس به عنوان بک گراند در پایین و راست یک باکس قرار بگیرد، قرار دادن این بک گراند به فاصله ی 30 پیکسل از چپ و بالا بسیار ساده و به صورت زیر است :
.box {
background-image: url(check.png);
background-position: 30px 30px;
}
شما نمیتوانید این کار را از سمت پایین و راست انجام دهید تا زمانیکه ابعاد پدر المنت را ندانید، تابع calc باعث میشود بتوانید 30 پیکسل را از 100% عرض و ارتفاع کم کنید، به قطعه کد زیر توجه کنید :
.box {
background-image: url(check.png);
background-position: calc(100% - 30px) calc(100% - 30px);
}
پشتیبانی مرورگر های مدرن از تابع calc خیلی خوب است، همچنین میتوانید از سایت Can I Use (http://caniuse.com/#feat=calc) برای اطلاعات دقیق تر نیز استفاده کنید، برخی نتایج نشان میدهد استفاده از این قابلیت در مرورگر IE9 باعث کراش مرورگر میشود.
ترفند های calc در CSS (http://hugogiraudel.com/2014/02/06/calc-css-riddle/) میتواند یک مقاله ی جالب باشد که با آن میتوانید مشکلات CSSS ای زیادی را حل کنید، همچنین میتوانید مثال های خوبی را در سایت CSS Tricks (http://css-tricks.com/a-couple-of-use-cases-for-calc/) ببینید.
.box {
background-image: url(check.png);
background-position: 30px 30px;
}
شما نمیتوانید این کار را از سمت پایین و راست انجام دهید تا زمانیکه ابعاد پدر المنت را ندانید، تابع calc باعث میشود بتوانید 30 پیکسل را از 100% عرض و ارتفاع کم کنید، به قطعه کد زیر توجه کنید :
.box {
background-image: url(check.png);
background-position: calc(100% - 30px) calc(100% - 30px);
}
پشتیبانی مرورگر های مدرن از تابع calc خیلی خوب است، همچنین میتوانید از سایت Can I Use (http://caniuse.com/#feat=calc) برای اطلاعات دقیق تر نیز استفاده کنید، برخی نتایج نشان میدهد استفاده از این قابلیت در مرورگر IE9 باعث کراش مرورگر میشود.
ترفند های calc در CSS (http://hugogiraudel.com/2014/02/06/calc-css-riddle/) میتواند یک مقاله ی جالب باشد که با آن میتوانید مشکلات CSSS ای زیادی را حل کنید، همچنین میتوانید مثال های خوبی را در سایت CSS Tricks (http://css-tricks.com/a-couple-of-use-cases-for-calc/) ببینید.