ตอนนี้ฟังก์ชันคณิตศาสตร์แบบค่าขั้นของ CSS พร้อมใช้งานแล้วใน Baseline 2024

เผยแพร่เมื่อวันที่ 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 (ค่าเริ่มต้น): เทียบเท่ากับ JavaScript Math.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