เผยแพร่เมื่อวันที่ 14 พฤษภาคม 2024
ตอนนี้เครื่องมือหลักทั้งหมดรองรับฟังก์ชันคณิตศาสตร์ของค่าแบบขั้นของ 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()
ฟังก์ชัน rem() และ mod() ของ CSS จะทํางานคล้ายกับโอเปอเรเตอร์เศษ (%) ของ JavaScript โดยจะใช้ 2 ค่า โดยค่าแรก (ตัวหาร) จะหารด้วยค่าที่ 2 (ตัวคูณ) แล้วแสดงผลลัพธ์ที่เป็นเศษ
margin: rem(18px, 5px); /* returns 3px */
ความแตกต่างระหว่างฟังก์ชัน 2 รายการนี้คือ rem() จะนําเครื่องหมายของส่วนแบ่งมาพิจารณาเสมอ ดังนั้นหากค่าแรกเป็นบวก ค่าที่แสดงผลก็จะเป็นบวก ฟังก์ชัน mod() จะรับเครื่องหมายของตัวหาร
ดูข้อมูลเพิ่มเติมเกี่ยวกับ rem() และ mod() ในบทความ
The New CSS Math: rem() and mod() ของ Dan Wilson