توابع ریاضی ارزش پله ای CSS اکنون در Baseline 2024 هستند

راشل اندرو

همه موتورهای اصلی اکنون از توابع ریاضی ارزش پله‌ای 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 (پیش‌فرض): معادل JavaScript Math.round() . مقدار را تا نزدیکترین مضرب کل بازه گرد کردن به بالا یا پایین گرد می کند.
  • to-zero : معادل متد JavaScript Math.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 بیشتر بیاموزید.