أصبحت الدوال الحسابية للقيم المتدرجة في CSS متوفّرة الآن في Baseline 2024.

تتيح جميع المحرّكات الرئيسية الآن الدوال الحسابية للقيمة المتدرجة في CSS، round(), mod(), وrem().

تحوِّل كل دوال القيمة المدرّجة قيمة معينة وفقًا لأخرى قيمة الخطوة.

تستخدم الدالة 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 (تلقائي): مكافئة لـ Math.round() من JavaScript. تقريب لأعلى أو لأسفل، إلى أقرب مضاعف صحيح لفاصل التقريب.
  • to-zero: مكافئة لطريقة Math.trunc() في JavaScript. لتقريب القيمة إلى أقرب عدد صحيح مضاعف لفاصل التقريب إلى الصفر.

مزيد من المعلومات عن "round()" في رياضيات CSS الجديدة: round()، بواسطة دان ويلسون.

الدالتان rem() وmod()

تعمل دالتا CSS rem() وmod() بطريقة مشابهة للغة JavaScript عامل التشغيل المتبقي (%): ويتم أخذ قيمتين، وتقسم الأول (العائد) على الثاني (القاسم)، ويتم إرجاع الباقي.

margin: rem(18px, 5px); /* returns 3px */

الفرق بين الدالتين هو أن rem() تأخذ العلامة دائمًا للربح، وبالتالي إذا كانت القيمة الأولى موجبة، يتم إرجاع القيمة سيكون إيجابيًا. تأخذ الدالة mod() علامة القاسم.

مزيد من المعلومات حول rem() وmod() في رياضيات CSS الجديدة: rem() وmod()، بواسطة دان ويلسون.