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