ตอนนี้เครื่องมือหลักทั้งหมดรองรับฟังก์ชันคณิตศาสตร์ค่าแบบขั้นบันไดของ CSS แล้ว ซึ่งได้แก่ round(), mod() และ rem()
ค่าขั้นบันไดจะเปลี่ยนรูปแบบค่าหนึ่งๆ ทั้งหมดตามค่าขั้นอื่น
ฟังก์ชัน round()
ฟังก์ชัน round() จะใช้ค่าเพื่อปัดเศษ ช่วงเวลาการปัดเศษ และกลยุทธ์การปัดเศษที่ไม่บังคับ
ค่าจะปัดเศษตามกลยุทธ์การปัดเศษ
ให้เป็นจำนวนเต็มค่าผลคูณที่ใกล้เคียงที่สุดของช่วงการปัดเศษ
ค่าที่จะปัดเศษหรือช่วงการปัดเศษควรเป็นพร็อพเพอร์ตี้ที่กำหนดเองของ CSS แม้ว่าการฮาร์ดโค้ดทั้ง 2 ค่าจะสามารถทำได้ แต่ก็มีจุดเล็กๆ ที่ปัดเศษตัวเลขได้หากคุณสามารถคำนวณค่าเองได้
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(ค่าเริ่มต้น): เทียบเท่ากับ JavaScriptMath.round()ปัดเศษค่าขึ้นหรือลงให้เป็นจำนวนทวีคูณที่ใกล้เคียงที่สุดของช่วงการปัดเศษto-zero: เทียบเท่ากับเมธอดMath.trunc()ของ JavaScript ปัดเศษค่าให้เป็นจำนวนเต็มทวีคูณที่ใกล้เคียงที่สุดของช่วงการปัดเศษให้ใกล้กับ 0
ดูข้อมูลเพิ่มเติมเกี่ยวกับ round() ใน
The New CSS Math: round()
โดย Dan Wilson
ฟังก์ชัน rem() และ mod()
ฟังก์ชัน CSS rem() และ mod() ทำงานในลักษณะเดียวกับโอเปอเรเตอร์ที่เหลืออยู่ (%) ของ JavaScript โดยจะได้ 2 ค่า โดยค่าแรก (ตัวตั้งหาร) หารด้วยตัวที่ 2 (ตัวหาร) และจะแสดงผลเศษ
margin: rem(18px, 5px); /* returns 3px */
ผลต่างระหว่าง 2 ฟังก์ชันคือ rem() จะใช้เครื่องหมายของตัวตั้งหารเสมอ ดังนั้นหากค่าแรกเป็นบวก ค่าที่ส่งกลับจะเป็นบวก ฟังก์ชัน mod() จะใช้เครื่องหมายของตัวหาร
ดูข้อมูลเพิ่มเติมเกี่ยวกับ rem() และ mod() ใน
คณิตศาสตร์ CSS ใหม่: rem() และ mod() โดย Dan Wilson