همه موتورهای اصلی اکنون از توابع ریاضی ارزش پلهای CSS - round() ، mod() و rem() پشتیبانی میکنند.
توابع مقدار پله ای همگی یک مقدار معین را بر اساس مقدار گام دیگری تبدیل می کنند.
تابع round()
تابع round()
یک مقدار برای گرد کردن، یک فاصله گرد کردن و یک استراتژی گرد کردن اختیاری می گیرد. مقدار با توجه به استراتژی گرد کردن، به نزدیکترین مضرب عدد صحیح بازه گرد گرد می شود.
مقداری که باید گرد شود یا فاصله گرد شده باید یک ویژگی سفارشی CSS باشد. در حالی که برای کدگذاری هر دو مقدار معتبر است، اگر بتوانید مقدار را خودتان محاسبه کنید، گرد کردن یک عدد فایده ای ندارد.
CSS زیر مقدار --my-font-size
به بازه 1rem
گرد می کند.
font-size: round(var(--my-font-size), 1rem);
استراتژی گرد کردن پیش فرض nearest
است. مثال قبلی شامل استراتژی گرد کردن به شرح زیر است:
font-size: round(nearest,var(--my-font-size), 1rem);
مقادیر ممکن برای استراتژی گرد کردن عبارتند از:
-
up
: معادل متدMath.ceil()
JavaScript. مقدار را تا نزدیکترین مضرب کامل بازه گرد گرد می کند. -
down
: معادل متدMath.floor()
JavaScript. مقدار را تا نزدیکترین مضرب کل بازه گرد کردن به پایین گرد می کند. -
nearest
(پیشفرض): معادل JavaScriptMath.round()
. مقدار را تا نزدیکترین مضرب کل بازه گرد کردن به بالا یا پایین گرد می کند. -
to-zero
: معادل متد JavaScriptMath.trunc()
مقدار را به نزدیکترین مضرب صحیح بازه گرد کردن نزدیک به صفر گرد می کند.
درباره round()
در The New CSS Math: round()
توسط دن ویلسون بیشتر بیاموزید.
توابع rem()
و mod()
توابع rem()
و mod()
CSS به روشی مشابه عملگر باقی مانده جاوا اسکریپت (%) کار می کنند. آنها دو مقدار می گیرند، اولی (سود سهام) بر دومی (مقسوم کننده) تقسیم می شود و باقیمانده برگردانده می شود.
margin: rem(18px, 5px); /* returns 3px */
تفاوت بین دو تابع در این است که rem()
همیشه علامت سود را می گیرد، بنابراین اگر مقدار اول مثبت باشد مقدار برگشتی مثبت خواهد بود. تابع mod()
علامت مقسم را می گیرد.
درباره rem()
و mod()
در The New CSS Math: rem()
and mod()
توسط Dan Wilson بیشتر بیاموزید.