เผยแพร่เมื่อวันที่ 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