הפונקציות המתמטיות של ערך מדורג של 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: שווה ל-method‏ Math.ceil() ב-JavaScript. מעגלים את הערך כלפי מעלה לכפולה השלמה הקרובה ביותר של מרווח העיגול.
  • down: שווה ל-method‏ Math.floor() ב-JavaScript. עיגול הערך כלפי מטה לכפולה השלמה הקרובה ביותר של מרווח העיגול.
  • nearest (ברירת המחדל): זהה ל-JavaScript Math.round(). מעגלת את הערך כלפי מעלה או מטה, לכפולה השלמה הקרובה ביותר של מרווח העיגול.
  • to-zero: שווה ל-method‏ 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() של דן וילסון.