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

Rachel Andrew

تتوافق جميع المحرّكات الرئيسية الآن مع الدوال الحسابية ذات القيمة المتدرجة في 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()

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

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

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

ملاحظة: ليس من الضروري أن تكون وحدتَي القيمتَين متطابقة، ولكن يجب أن تكون القيم من النوع نفسه، أي رقم أو سمة أو نسبة مئوية. وستكون القيمة التي يتم عرضها بعد ذلك من نوع القيمة التي تم تمريرها.

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