CSS min(), max() และ clamp()

ดูวิธีควบคุมขนาดองค์ประกอบ รักษาระยะห่างที่เหมาะสม และนำแบบอักษรแบบยืดหยุ่นไปใช้โดยใช้ฟังก์ชัน CSS ที่รองรับได้ดี

Una Kravets

เมื่อการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์มีความซับซ้อนมากขึ้น CSS ก็พัฒนาอย่างต่อเนื่องเพื่อให้ผู้เขียนควบคุมสิ่งต่างๆ ได้มากขึ้น ฟังก์ชัน min(), max() และ clamp() ซึ่งตอนนี้เบราว์เซอร์สมัยใหม่ทั้งหมดรองรับแล้ว เป็นเครื่องมือล่าสุดที่ช่วยให้การสร้างเว็บไซต์และแอปมีความยืดหยุ่นและตอบสนองได้ดียิ่งขึ้น คุณสามารถใช้ฟังก์ชันเหล่านี้เพื่อควบคุมขนาดและการปรับขนาดองค์ประกอบ รักษาระยะห่างระหว่างองค์ประกอบ และสร้างแบบอักษรที่ยืดหยุ่นและลื่นไหล

ฟังก์ชันคณิตศาสตร์ calc(), min(), max() และ clamp() อนุญาตให้ใช้นิพจน์ทางคณิตศาสตร์ที่มีการบวก (+), ลบ (-), คูณ (*) และหาร (/) เป็นค่าคอมโพเนนต์

ค่าและหน่วย CSS ระดับ 4

การสนับสนุนเบราว์เซอร์

min()

max()

clamp()

การใช้งาน

คุณสามารถใช้ min(), max() และ clamp() ทางด้านขวาของนิพจน์ CSS ใดก็ได้ที่เหมาะ สำหรับ min() และ max() คุณต้องระบุรายการค่าอาร์กิวเมนต์ แล้วเบราว์เซอร์จะระบุค่าที่เล็กที่สุดหรือใหญ่ที่สุด เช่น ในกรณีของ width: min(1rem, 50%, 10vw) เบราว์เซอร์จะคำนวณว่าหน่วยแบบสัมพัทธ์ใดมีขนาดเล็กที่สุด แล้วใช้ค่านั้นสำหรับความกว้างขององค์ประกอบ

ฟังก์ชัน max() ทําสิ่งเดียวกันกับค่าสูงสุด

หากต้องการใช้ clamp() ให้ป้อนค่า 3 ค่า ได้แก่ ค่าต่ำสุด ค่าที่เหมาะสมที่จะคำนวณ และค่าสูงสุด

คุณสามารถใช้ฟังก์ชันเหล่านี้ได้ทุกที่ที่อนุญาต <length>, <frequency>, <angle>, <time>, <percentage>, <number> หรือ <integer> คุณจะใช้สัญลักษณ์เหล่านี้เดี่ยวๆ (เช่น font-size: max(0.5vw, 50%, 2rem)) ร่วมกับ calc() (เช่น font-size: max(calc(0.5vw - 1em), 2rem)) หรือใช้ร่วมกัน (เช่น font-size: max(min(0.5vw, 1em), 2rem)) ก็ได้

ต่อไปนี้เป็นตัวอย่างวิธีใช้ฟังก์ชันเหล่านี้

ความกว้างที่เหมาะเจาะ

หนังสือองค์ประกอบของสไตล์การพิมพ์โดย Robert Bringhurst ระบุว่า "โดยทั่วไปแล้ว บรรทัดที่มีอักขระ 45-75 ตัวถือเป็นความยาวที่พอดีสำหรับหน้าแบบคอลัมน์เดียวที่ตั้งค่าแบบอักษรที่มีขีดด้านบนและด้านล่างในขนาดข้อความ"

หากต้องการให้บล็อกข้อความมีความกว้างระหว่าง 45 ถึง 75 อักขระ ให้ใช้ clamp() และ ch (การเลื่อนอักขระแบบกว้าง 0) ดังนี้

p {
  width: clamp(45ch, 50%, 75ch);
}

วิธีนี้ช่วยให้เบราว์เซอร์กำหนดความกว้างของย่อหน้าได้ โดยค่าเริ่มต้นจะตั้งค่าความกว้างเป็น 50% หาก 50% น้อยกว่า 45ch ระบบจะใช้ 45ch เป็นความกว้างแทน และหาก 50% กว้างกว่า 75ch ระบบจะใช้ 75ch

นอกจากนี้ คุณยังแบ่งข้อมูลออกเป็นส่วนๆ ได้โดยใช้เพียง min() หรือ max() หากต้องการให้องค์ประกอบมีความกว้าง 50% เสมอและไม่กว้างเกิน 75ch ในหน้าจอที่ใหญ่ขึ้น ให้ใช้ width: min(75ch, 50%); เพื่อกำหนดขนาดสูงสุด

ในทํานองเดียวกัน คุณสามารถกําหนดขนาดขั้นต่ำสําหรับข้อความที่อ่านออกได้โดยใช้ฟังก์ชัน max() ดังตัวอย่างใน width: max(45ch, 50%); ในกรณีนี้ เบราว์เซอร์จะเลือกค่าที่มากกว่า ซึ่งหมายความว่าองค์ประกอบต้องกว้าง 45ch ขึ้นไป

จัดการการเว้นวรรค

นอกจากนี้ คุณยังใช้ max() เพื่อกำหนดขนาดการเว้นวรรคขั้นต่ำได้ด้วย ตัวอย่างนี้มาจาก CSS Tricks ซึ่งผู้อ่าน Caluã de Lacerda Pataca ได้แชร์แนวคิดนี้ว่า ปล่อยให้องค์ประกอบมีระยะห่างจากขอบเพิ่มเติมในหน้าจอขนาดใหญ่ แต่ให้คงระยะห่างจากขอบขั้นต่ำในหน้าจอขนาดเล็ก โดยให้ใช้ calc() หรือ max() แล้วลบระยะห่างขั้นต่ำจากทั้ง 2 ด้านขององค์ประกอบ calc((100vw - var(--contentWidth)) / 2) หรือ max(2rem, 50vw - var(--contentWidth) / 2) ในสไตล์ชีต ข้อมูลควรมีลักษณะดังนี้

footer {
  padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}

การจัดวางแบบยืดหยุ่น

Mike Riethmeuller เป็นผู้ทำให้เทคนิคการใช้ฟังก์ชัน clamp() เพื่อกำหนดขนาดตัวอักษรขั้นต่ำ ขนาดตัวอักษรสูงสุด และอนุญาตให้ปรับขนาดระหว่างขนาดเหล่านั้นเป็นที่นิยม เพื่อเปิดใช้การจัดรูปแบบแบบยืดหยุ่น

ก่อนหน้านี้ clamp(), การออกแบบการปรับขนาดแบบอักษรต้องใช้สตริงสไตล์ที่ซับซ้อน ตอนนี้คุณก็ปล่อยให้เบราว์เซอร์ทำงานให้คุณได้ ตั้งค่าขนาดแบบอักษรขั้นต่ำที่ยอมรับได้ (เช่น 1.5rem สำหรับชื่อ) ขนาดสูงสุด (เช่น 3rem) และขนาดที่เหมาะสม (เช่น 5vw) ตอนนี้คุณมีการจัดรูปแบบตัวอักษรที่ปรับขนาดตามความกว้างของวิวพอร์ตของหน้าเว็บจนกว่าจะถึงค่าต่ำสุดและสูงสุดที่กำหนดโดยใช้โค้ดเพียงเล็กน้อย

p {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

แหล่งข้อมูลเพิ่มเติม

• ค่าและหน่วย CSS ใน MDN
• ข้อกำหนดระดับ 4 สำหรับค่าและหน่วย CSS
• บทความเกี่ยวกับความกว้างขององค์ประกอบภายในของ CSS Tricks
• ภาพรวมของ min(), max(), clamp() โดย Ahmad Shadeed

รูปภาพหน้าปกจาก @yer_a_wizard ใน Unsplash