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

Rachel Andrew

ตอนนี้เครื่องมือหลักทั้งหมดรองรับฟังก์ชันคณิตศาสตร์แบบขั้นบันไดของ CSS แล้ว round(), mod(), และ rem()

ฟังก์ชันค่าขั้นบันไดทั้งหมดจะแปลงค่าที่กำหนดตามค่าอื่น step value

ฟังก์ชัน 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: เทียบเท่ากับเมธอด JavaScript Math.ceil() ปัดเศษค่าขึ้น ให้ผลคูณจำนวนเต็มที่ใกล้ที่สุดของช่วงการปัดเศษ
  • down: เทียบเท่ากับเมธอด JavaScript Math.floor() ปัดเศษค่า ให้เป็นจำนวนเต็มค่าผลคูณที่ใกล้เคียงที่สุดของช่วงการปัดเศษ
  • nearest (ค่าเริ่มต้น): เทียบเท่ากับ JavaScript Math.round() ปัดเศษ ขึ้นหรือลง ให้กับผลคูณที่ใกล้เคียงที่สุดของช่วงการปัดเศษ
  • to-zero: เทียบเท่ากับเมธอด JavaScript Math.trunc() ปัดเศษค่า ให้เป็นจำนวนเต็มค่าผลคูณที่ใกล้เคียงที่สุดของช่วงปัดเศษใกล้ 0

ดูข้อมูลเพิ่มเติมเกี่ยวกับ round() ใน การคำนวณ CSS ใหม่: round(), โดย Dan Wilson

ฟังก์ชัน rem() และ mod()

ฟังก์ชัน CSS rem() และ mod() ทำงานในลักษณะเดียวกับ JavaScript โอเปอเรเตอร์ที่เหลือ (%) โดยใช้ค่าสองค่า ค่าแรก (ตัวตั้ง) หารด้วยค่าที่สอง (ตัวหาร) และจะส่งคืนส่วนที่เหลือ

margin: rem(18px, 5px); /* returns 3px */

ความแตกต่างระหว่างฟังก์ชัน 2 รายการคือ rem() จะใช้เครื่องหมายเสมอ ของเงินปันผล ดังนั้นหากค่าแรกเป็นบวก ค่าที่ส่งคืน จะเป็นบวก ฟังก์ชัน mod() จะใช้เครื่องหมายของตัวหาร

ดูข้อมูลเพิ่มเติมเกี่ยวกับ rem() และ mod() ใน การคำนวณ CSS ใหม่: rem() และ mod() โดย Dan Wilson