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))

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

ความกว้างที่สมบูรณ์แบบ

ตามหนังสือ The Elements of Typographic Style ของ Robert Bringhurst "อักขระ 45 ถึง 75 ตัวถือเป็นความยาวบรรทัดที่เหมาะสมสำหรับหน้าแบบคอลัมน์เดียวที่ใช้แบบอักษร Serif ในขนาดข้อความ"

หากต้องการให้บล็อกข้อความมีความกว้างระหว่าง 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
• ข้อกำหนดค่าและหน่วย CSS ระดับ 4
• บทความเคล็ดลับ CSS เกี่ยวกับความกว้างขององค์ประกอบภายใน
• ภาพรวม min(), max(), clamp() โดย Ahmad Shadeed