הפונקציות המתמטיות של ערך מדורג של CSS נמצאות עכשיו ב-Baseline 2024

Rachel Andrew

כל המנועים העיקריים תומכים עכשיו בפונקציות מתמטיות של ערך מדורג ב-CSS – round(), mod(), ו-rem().

כל הפונקציות של הערך המדורג ממירות ערך נתון לפי [step value]

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

הפונקציות rem() ו-mod()

פונקציות ה-CSS rem() ו-mod() פועלות באופן דומה ל-JavaScript אופרטור שאריות (%). הם מקבלים שני ערכים, הראשון (המחלק) מחולק בשני (המחלק), והשארית מוחזרת.

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

ההבדל בין שתי הפונקציות הוא ש-rem() תמיד לוקחת את הסימן של הדיבידנד, כלומר אם הערך הראשון הוא חיובי, הערך המוחזר תהיה חיובית. הפונקציה mod() מקבלת את הסימן של המחלק.

למידע נוסף על rem() ועל mod() ב המתמטיקה החדשה של CSS: rem() ו-mod(), מאת דן ווילסון.