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

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

اطّلِع على مزيد من المعلومات حول round() في The New CSS Math: round()، من تأليف "دان ويلسون".

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

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

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

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

اطّلِع على مزيد من المعلومات حول rem() وmod() في مقالة The New CSS Math: rem() and mod()، التي كتبها "دان ويلسون".