הפונקציות המתמטיות של ערך מדורג של 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() במאמר המתמטיקה החדשה של CSS: rem() ו-mod(), מאת דן ווילסון.